yujianAI/segmentfault_upvote5_clean huggingface dataset:
问题：接口被恶意调用，如何解决
有个短信接口给用户注册时发送验证码的，然后现在发现有人每次用不同ip 不同号码进行恶意调用，现在接口被调爆，如何解决这个问题呢。
补充一下：目前APP已经发布出去了，能不能再服务器做相关的限制呢，因为在接口做限制，它不停的调的话，还是导致了该接口出现卡的现象

回答：本质上就是客户端一个请求发给服务器，请求的所有参数都是来自客户端，所有在客户端做防护的措施都是浮云。有1000种方式防，就有1001种方式破。有时间不如先在服务端检查一下HTTP请求的合法性，举个例子，一个由Firefox浏览器对你APP服务器发起的短信请求`User-Agent: Firefox`，你要给它发吗？一个请求的`Refer`是`www.duanxingongzhaji.com`，你应不应该拦截呢？
最经济有效的其实是`加验证码`，因为攻击者即使是对接打码平台，也是有固定经济成本的。有大把的裸接口跑在外面，短信轰炸机这种工具是不会盯上你的，除非是有人故意要搞你。但加验证码随之而来的就是用户体验的下降。
`APP已经发版了，没办法加怎么办？ 凉拌呗！ 要么强升要么就继续忍受攻击吧`。
回答对IP和手机号做次数限制的亲们，你们认真审题了吗？？？
每次用不同ip 不同号码 不同ip 不同号码 不同ip 不同号码
IP可以考虑对代理和机房IP的识别，自己识别成本太高，可以对接第三方的saas服务，但也没有谁能100%识别代理，70%~80%是差不多的。另外有一些攻击行为是众包的，由中了木马的肉鸡发起，机器本身是在正常不过的个人PC，这种方式基本不要想怎么防了。
手机号只能考虑空号检测了，这个也不要试图自己做了，找供应商吧，同样的，没有100%的准确率，并且不是实时的。技术上讲可以有一些帮助，但是产品层面可能不太优雅。
从攻击者攻击方式考虑：
- 对于短信轰炸机这种无攻击目的性的情况来说，一般手机号都是存在的，并且IP都是分散的正常IP，除了验证码，真的没什么手段可以防。`除非你能事先知道这个号码正在被攻击`
- 对于恶意的黑客攻击行为，一般会伴随大量空号和代理IP，一定要防的话，需要一定成本，否则只能认栽。

对于短信轰炸机这种无攻击目的性的情况来说，一般手机号都是存在的，并且IP都是分散的正常IP，除了验证码，真的没什么手段可以防。`除非你能事先知道这个号码正在被攻击`
对于恶意的黑客攻击行为，一般会伴随大量空号和代理IP，一定要防的话，需要一定成本，否则只能认栽。

标签: centos, linux, php
问题：问个跨域问题，http://www.baidu.com请求https://www.baidu.com要跨域吗？
就是http的域名请求https的域名，这个要跨域吗，为什么？

回答：跨域。
不同源（域名，协议，端口）。
协议：http,https。
会触发跨域的条件还有
域名：
https://www.baidu1.com
https://www.baidu2.com
端口：
https://www.baidu.com:3000
https://www.baidu.com:3001

标签: javascript, html
问题：数组中选取最小值的问题
在选取数组中最小值的时候，发现如果是下面这样子的代码直接运行在<script> </script>中会有问题。
代码1
```
<script> 
var name=[12,3,65,8,2,12];
var min = name[0];
for (var i = 1; i <= 1; i++) {
    if (name[i]<min) 
    {
        min = name[i];
    }    
}
    console.log(min);
}
</script>


```
代码2
```
<script> 
function test(){
var name=[12,3,65,8,2,12];
var min = name[0];
for (var i = 1; i <= 1; i++) {
    if (name[i]<min) 
    {
        min = name[i];
    }    
}
    console.log(min);
}
}

test();
</script>

```
2段代码的结果不一样，想知道是为什么呀？

回答：这是全局变量导致的，我们知道window在<script></script>标签里可以直接使用，其实还有很多这样的全局变量，比如：
name(默认为空)
length(默认为0)
你可能还会纳闷： 那第一种写法为什么得到的是1呢，接下来我们分析下你的代码：
```
<script>
    var name=[12,3,65,8,2,12]; // 全局变量
    var min = name[0];
    for (var i = 1; i <= 1; i++) {
        if (name[i]<min){
            min = name[i];
        }    
    }
    console.log(min);
</script>

// name是在全局里定义的，而name本身就是一个全局变量，而且作为全局变量时只能是字符串，无论赋值什么内容，都会调用 name.toString()方法
// 所以在for循环之前，name的值是 "12,3,65,8,2,12", 因为循环只进行了一次，所以结果是1
```
我们来看第二段代码：
```
function test(){
    var name=[12,3,65,8,2,12]; // 局部变量
    var min = name[0];
    for (var i = 1; i <= 1; i++) {
        if (name[i]<min) 
        {
            min = name[i];
        }    
    }
    console.log(min);
}
test();

// 在函数内部，name就变成了局部变量，此时可以正常赋值，即for循环之前的值是：[12,3,65,8,2,12]，因为循环执行了一次， 12 < 3，所以得到的结果是3
```
总结：在定义变量时，最好不要使用name，因为全局下name会被转化为字符串。length是可以使用，记得还有其他的全局变量，感兴趣的话自己搜一下吧！

标签: javascript
问题：请问下大家这种代码还能优化吗
```
        if (resState == 8) {//下
            li_one.appendTo("#haved .ul-list");
            li_one.find(".status").html("完场");
        } else if (resState == 9) {
            li_one.appendTo("#haved .ul-list");
            li_one.find(".status").html("推迟");
        } else if (resState == 10) {
            li_one.appendTo("#haved .ul-list");
            li_one.find(".status").html("中断");
        } else if (resState == 11) {
            li_one.appendTo("#haved .ul-list");
            li_one.find(".status").html("腰斩");
        } else if (resState == 12) {
            li_one.appendTo("#haved .ul-list");
            li_one.find(".status").html("取消");
        } else if (resState == 13) {
            li_one.appendTo("#haved .ul-list");
            li_one.find(".status").html("待定");
        }
```
如上,这种代码执行效率怎么样?萌新求指教蟹蟹

回答：执行效率没什么问题，就是代码简化些吧
```
var textObj = { 8: "完场", 9: "推迟", 10: "中断", 11: "腰斩", 12: "取消", 13: "待定" }
if (textObj[resState]) {
  li_one.appendTo("#haved .ul-list")
  li_one.find(".status").html(textObj[resState])
}
```

标签: javascript, css, html, html5, php
问题：js if多重判断如何优化到最简?
经常碰到循环数组之后需要把某个值转换
```
let arr = res.data.orderinformation;
for (let i = 0; i < arr.length; i++) {
  if (arr[i].ctype == "11001") {
    arr[i].ctype = "微信支付购买";
  } else if (arr[i].ctype == "11008") {
    arr[i].ctype = "余额购买";
  } else if (arr[i].ctype == "11011") {
    arr[i].ctype = "退款到余额";
  } else if (arr[i].ctype == "11012") {
    arr[i].ctype = "优惠卷兑换";
  } else if (arr[i].ctype == "11013") {
    arr[i].ctype = "积分兑换";
  } else if (arr[i].ctype == "11014") {
    arr[i].ctype = "赠送课程";
  }

  // switch优化, 但是这样写不对, 哪里出了问题?
  //   switch (arr[i].ctype) {
  //     case "11001":
  //     arr[i].ctype = "微信支付购买";
  //     break;
  //     case "11008":
  //     arr[i].ctype = "余额购买";
  //     break;
  //     case "11011":
  //     arr[i].ctype = "退款到余额";
  //     break;
  //     case "11012":
  //     arr[i].ctype = "优惠卷兑换";
  //     break;
  //     case "11013":
  //     arr[i].ctype = "积分兑换";
  //     break;
  //     case "11014":
  //     arr[i].ctype = "赠送课程";
  //     break;
  //     default:
  //     break;
  //   } 

  // 用时间戳转成日期
  arr[i].ctime = new Date(arr[i].ctime);
  arr[i].ctime =
    arr[i].ctime.toLocaleDateString().replace(/\//g, "-") +
    " " +
    arr[i].ctime.toTimeString().substr(0, 8);
}
```

回答：```
const d = {
  '11001': '微信支付购买',
  '11008': '余额购买',
  '11011': '退款到余额',
  '11012': '优惠卷兑换',
  '11013': '积分兑换',
  '11014': '赠送课程',
};
for (let i = 0; i < arr.length; i++) {
  if (d[arr[i].ctype]) arr[i].ctype = d[arr[i].ctype];
}
```

标签: javascript
问题：JavaScript 为什么页面会先显示alert()框,而不是先显示页面元素?
显示顺序
1.显示提示框(此时页面一片空白)
2.点确定后正常显示HelloWorld
```
<body>
    <script>
        document.write("<h1>HelloWorld</h1>");
        document.write("<h1>HelloWorld</h1>");
        alert("你好");
    </script>
</body>
```
为什么页面会先显示alert()框,而不是先显示HelloWorld,我的代码明明是HelloWorld写在上面?

回答：栗子：比如你有一天去饭店, 告诉老板要吃火锅了，他再给你上火锅的路上, 你出去接了个电话  他已经把火锅端上来了(但是你没看到,你走进去才会看到)  (`阻塞了`)
```
    document.write("<h1>HelloWorld</h1>");
    document.write("<h1>HelloWorld</h1>");
    setTimeout(function(){alert("你好")},1000) //定时线程走,就可以看到效果
```

标签: javascript, web
问题：vue 中 axios要如何做同步机制
axios 好像不能想jquery那样，设置async来实现同步请求，这导致我实现一些逻辑带来的困难。
```
methods: {
    funcA() {
        axios.post(
            // 在请求成功后，把属性a赋值
        )
        return a
    }
}
```
如果我有类似上面的需求，我要在请求完成后，对数据进行赋值，然后在后面的语句中要操作数据，比如返回它。如果是同步机制，那么最后我可以成功返回a的值，但是axios是异步的。  
把需求写在请求的回调里面是不行的，如果我要返回这个值，只是这个请求调用返回，对于整个函数来说没有返回，这真的很难受，有没有什么解决方案？回调真的不行。

回答：```
methods: {
    async funA(){
        var res =  await axios.post('')//这里的res就是你axios请求回来的结果了
    }
}
```

标签: vue.js, axios
问题：一个php的面试题，大家看看
```
$listData = [
    '111' => ['a', 'b', 'c', 'a'],
    '222' => ['d', 'e', 'f', 'f', 'b'],
    '333' => ['g', 'h'],
    '444' => ['i', 'j'],
    ...
];
```
定义一个函数，传入$listData
如果`111`里面的元素，和 222/333/444... 里面的元素有重复，返回false 
如果`222`里面的元素，和 111/333/444... 里面的元素有重复，返回false 
如果`333`里面的元素，和 111/222/444... 里面的元素有重复，返回false 
如果 ... 
允许 111/222/333/444 自己里面的元素重复，返回true  
其他情况返回true
已知:
$listData长度未知
111/222/333/444... 的长度未知
111/222/333/444... 里的元素为字符串和数字
我自己实现了一下，感觉算法很糟，请问有没有其他方法
```
function test ($array) {

    $tempValueList  = [];
    foreach ($array as $key => $valueList) {
        
        foreach ($valueList as $value) {
            
            $tempValueList[]    = $key . '~' . $value;
        }
    }
    $result         = true;
    foreach ($array as $key => $valueList) {
        
        foreach ($valueList as $value) {
            
            foreach ($tempValueList as $_value) {
                
                $pos    = strpos($_value, '~');
                $_key   = substr($_value, 0, $pos);
                $_val   = substr($_value, $pos + 1);

                if ($key == $_key) {

                    continue;
                }
                if ($_val == $value) {

                    $result = false;
                    break 3;
                }
            }
        }
    }

    return      $result;
}
```

回答：我对子数组的定义是像 ['a', 'b', 'c', 'a'] 这样的单个数组。
我的答案：
```
$result = array();
foreach ($listData as $line) {
    //子数组内部去重,再组装回原来的格式
    $result[] = array_unique($line);
}

//子数组先去重再合并的结果数量 和 先合并子数组再去重的结果数量 做比较。
//如果是相同的，意味着不存在跨子数组的重复，只存在子数组内部重复，所以`True`
var_dump(count(array_merge(...$result)) === count(array_unique(array_merge(...$listData))));
```
我这个答案调用系统函数次数比较多，看起来简洁一些，但是PHP array_xxx 这类函数很大一部分性能是不具备优势的，如果不用这些函数，能相对程度提高运行效率。
另外，想要在各种情形下都能保持最高效率，可以参考以下代码。
```function check($arr)
{
  $chk = [];
  foreach ($arr as $k => $v)
    foreach ($v as $i)
    {
      if (isset($chk[$i] && $chk[$i] != $k))
        return false;
      $chk[$i] = $k;
    }
  return true;
}```
方便理解的辅助参考信息：
原始数据：
```
$listData = [
    '111' => ['a', 'b', 'c', 'a'],
    '222' => ['d', 'e', 'f', 'f', 'b'],
    '333' => ['g', 'h'],
    '444' => ['i', 'j']
];

```
然后 $result 最终是这样的：
```
$listData = [
        '111' => ['a', 'b', 'c'],
        '222' => ['d', 'e', 'f', 'b'],
        '333' => ['g', 'h'],
        '444' => ['i', 'j']
];

```
子数组先去重再合并的结果
```
Array
(
    [0] => a
    [1] => b
    [2] => c
    [3] => d
    [4] => e
    [5] => f
    [6] => b
    [7] => g
    [8] => h
    [9] => i
    [10] => j
)

```
用于和上面进行数量（数组元素数量）比较的，所谓的“先合并子数组再去重的结果”：
```
Array
(
    [0] => a
    [1] => b
    [2] => c
    [4] => d
    [5] => e
    [6] => f
    [9] => g
    [10] => h
    [11] => i
    [12] => j
)
```

标签: php
问题：求助道面试题，在前端项目中，如何进行seo优化，你在哪些项目里有过seo优化，效果如何？
参加面试，被问到这个，在网上查阅资料，但是找不到很好的回答
在实际项目里是如何做好seo优化的，优化后的效果是什么样的？

回答：您英文水品怎么样，如果还可以的话，试试读读这个系列的文章，也许会有所帮助：
https://moz.com/beginners-guide-to-seo/how-search-engines-operate。
如果是单纯应付面试的话，简单说说就可以了，毕竟这个东西要细聊，聊一天也聊不完，比如：
- 做 SPA 项目时，为解决 SEO 问题，引入了 SSR 渲染引擎
- 在首页加入 meta 标签提供一些元数据
- 使用简单、具有表意性的 title 以及使用 h5 提供的具有语义化的标签（不要一堆 div）
- 生成对 search engine 友好的 sitemap
- 使用合理的 html 结构（比如按标题、内容、页脚这样的顺序、或者将重要的内容放在 html 前，其他放在后）

现在让我想，就大概能想这么多，当然还有其他方式，但是我觉的面试回答这些应该足够了吧，毕竟也就是考察一下知识点而已。
另外也可以通过打开 devtool 的方式，看看一些流量比较大的网站的 html 以及头标签是怎么写的，比如 segmentfault.com，我觉的 SF 这个 SEO 优化的真的是很好了，搜索关键字比较明了的话，一般前 5 个搜索结果必有一个是 SF 的。

标签: 前端, javascript
问题：vue-cli 在写css的时候无法自动刷新浏览器是什么原因
1，修改css的时候切换到浏览器无法自动刷新，需要手动刷新才能看到效果有人遇到过这样的情况吗
修改其他到是没事 ，只是css 会有这个问题
我用的是vue-cli  3.0
附上解决后的配置：
```
// vue.config.js
module.exports = {
    lintOnSave:false,
    devServer:{
        host:'0.0.0.0'
    }
}
```

回答：我也遇到这个问题，不过查明原因后发现是我的vue.config.js配置了extract:true,把style提取至独立的css文件了，而不是动态注入javascipt中。把这个参数去掉就可以了。以下是官方文档原文：
css.extract
Type: boolean | Object
Default: 生产环境下是 true，开发环境下是 false
是否将组件中的 CSS 提取至一个独立的 CSS 文件中 (而不是动态注入到 JavaScript 中的 inline 代码)。
同样当构建 Web Components 组件时它总是会被禁用 (样式是 inline 的并注入到了 shadowRoot 中)。
当作为一个库构建时，你也可以将其设置为 false 免得用户自己导入 CSS。
提取 CSS 在开发环境模式下是默认不开启的，因为它和 CSS 热重载不兼容。然而，你仍然可以将这个值显性地设置为 true 在所有情况下都强制提取。

标签: vue-cli, vue.js
问题：vue-awesome-swiper中loop设置true无效
### vue-awesome-swiper中loop设置true无效
数据是动态加载的，在网上查不到和我相关的问题答案
是放在子组件中，首页直接引入此swiper子组件的
### 相关代码
```
<div class="wrapper" :class="cname">
    <swiper :options="options">
        <swiper-slide v-for="(item, index) in items" :key="index">
            <slot :src="item"></slot>
        </swiper-slide>
        <div class="swiper-pagination" v-if="options.pagination"  slot="pagination"></div>
    </swiper>
</div>

name: "sliderComponent",
props: {
  cname: {
      type: String,
      default: ""
  },
  options: {
      type: Object,
      default () {
          return {
              autoplay: {
                  delay: 3000,
                  disableOnInteraction: false,
                  //stopOnLastSlide: false
              },
              loop: true,
              pagination: {
                  el: '.swiper-pagination'
              },
              observeParents:true,
              observer:true                 
          }
      }
  },



```
不循环了，轮播到最后一个图就不动了

回答：试了好多次，终极答案是这样：
```
<swiper
  :options="swiperOption"
  ref="mySwiper"
>
  <!-- slides -->
  <swiper-slide
    v-for="(item,index) in topBanner"
    :key="item.id"
  >
  <img
    :src="item.image_url"
    :alt="index"
    class="banner-img"
  >
  </swiper-slide>
</swiper>
```
```
data() {
  return {
    swiperOption: {
      init:false,
      loop: true,
      autoplay: {
        delay: 2000,
        disableOnInteraction: false
      },
    },
  }
}
```
当然，在computed()时要获取$refs:
```
computed: {
  swiper() {
    return this.$refs.mySwiper.swiper;
  }
},
```
然后在vue生命周期的updated()时初始化swiper
```
updated() {
  console.log(this.topBanner);
  if (this.topBanner.length>1) {
    console.log(this.swiper);
    this.swiper.init();
  }
},
```
不用v-if，获取到了this.swiper，问题完美解决

标签: vue.js
问题：关于js柯里化做笔试题时遇到一个问题
请实现test2函数满足以下四个条件使其通过测试，以最简洁的方式完成，并保证代码质量
module.exports.test2 = (input) => {
}
(1)test2() === 0
(2)test2(1)() === 1
(3)test2(1)(2)(3)(4)() === 10
(4)const t2 = test2(1)(2); t2(3)() === 6; t2(4)() === 7
我写了一个函数，但是只能满足前三个条件，求大神赐教，怎么同时满足这四个条件，不知道咋写。

回答：题目已经给出了函数的签名，那么答案是不应该擅自改动的。
```
module.exports.test2 = (input) => {
  const fn = a => b => b == null ? a : fn(a + b)
  return input == null ? 0 : fn(input)
}
```

标签: 笔试题, currying, javascript, 前端
问题：如何使用filter方法递归过滤Tree数组对象
```
const treeData = [{
  title: "1",
  key: "1",
  children: [{
    title: "1-1",
    key: "1-1",
    children:[{
      title:"1-1-1",
      key:"1-1-1",
    },{
      title:"1-1-2",
      key:"1-1-2",
    }]
  }, {
    title: "1-2",
    key: "1-2",
  },{
    title: "1-3",
    key: "1-3",
  },{
    title: "1-4",
    key: "1-4",
  }],
}];

```
想要实现通过传入的key，过滤树，如果父级被过滤掉，该父级下面所有子级也全部被过滤。
我通过递归map,还有递归filter都没有实现过滤的效果。代码如下：
```
deleteTreeData = (data,selectedKey) => {
    const newTreeData = data.filter((item) => {
      if(item.children){
        this.deleteTreeData(item.children,selectedKey);
      }

      return item.key !== selectedKey;

    });

    this.setState({
      treeData : newTreeData,
    },function(){
      console.log("=====newTreeData："+JSON.stringify(newTreeData));
    });
  }

```
这样写只能删除顶级菜单，请问正确的思路是什么，谢谢~

回答：```
const treeData = [{
  title: "1",
  key: "1",
  children: [{
    title: "1-1",
    key: "1-1",
    children:[{
      title:"1-1-1",
      key:"1-1-1",
    },{
      title:"1-1-2",
      key:"1-1-2",
    }]
  }, {
    title: "1-2",
    key: "1-2",
  },{
    title: "1-3",
    key: "1-3",
  },{
    title: "1-4",
    key: "1-4",
  }],
}];

function f(arr, selectedKey) {
  return arr.filter(item => item.key !== selectedKey).map(item => {
    item = Object.assign({}, item)
    if (item.children) {
      item.children = f(item.children, selectedKey)
    }
    return item
  })
}

console.log(f(treeData, '1-2'))
```

标签: es5, javascript, filter
问题：关于mogodb缓存
```
With WiredTiger, MongoDB utilizes both the WiredTiger internal cache and the filesystem cache.

Starting in 3.4, the WiredTiger internal cache, by default, will use the larger of either:

    50% of (RAM - 1 GB), or
    256 MB.

```
mongodb4.0文档,大概意思是mongodb使用internal cache and the filesystem cache,
(1))请问一下如果机子内存2g,那么按照上面的计算,internal catche将占用512m,如果数据增加,内存占用超过512m,是不是就开始启用filesystem cache,把此时数据缓存放在空闲内存上,两者有没有先后顺序?
(2)既然两者都是放在内存中,为什么还要分两类缓存,是不是internal cache占据内存是不能被释放的,filesystem cache占据的是会被其他服务挤掉的,是这样吗?
(3)这些缓存是不是也是压缩过的?

回答：internal cache 你可以理解为程序使用的内存。filesystem cache 理解为操作系统的文件系统缓存机制。

在mongo 的 WiredTiger 缓存机制中。如果不做配置的话，他会默认使用你的50% 的系统内存做索引和数据的缓存。
如果你的机器内存比较小，小于 512M 它就使用 256M 内存做缓存。

文件系统的缓存是在内核层面的。你打开一个文件，读了读。关闭了它。系统会根据你的使用程度做一些缓存。你关闭这个文件的时候，操作系统可能并没有把数据从物理内存释放。你再次打开读取这个文件就要比首次打开要快。

filesystem cache是操作系统行为，不受应用控制的。必要的时候这部分缓存会被分给其他进程。因为filesystem cache是对磁盘文件的忠实映射，而MongoDB在磁盘上存储的文件是压缩过的，所以这就代表着在filesystem cache中的内容是压缩过的。
internal cache则是MongoDB控制的部分，其中存储的是最近用到过的数据，索引等，并且是解压过的。
1) 这实际上是操作系统原理方面的知识。MongoDB要把数据加载到内存中，首先要从磁盘上读取原始的文件，那么文件内容就会进入filesystem cache. 然后要把文件内容转换为WiredTiger可以直接使用的格式，即解压，解密，之后的内容才会进到internal cache。所以一定要说先后顺序的话，internal cache中的内容肯定来自filesystem cache，后者先加载。
2) internal cache是进程内存，filesystem cache是操作系统缓存。后者在一定时候会被LRU算法驱逐出内存。如果再次被读取又会从磁盘加载。不过前者同样有可能会被驱逐出内存，因为数据容量可能比缓存大，那么就是保留需要的内容，释放掉暂时不用的部分。这里同样的是LRU。
3）internal cache未压缩，filesystem cache压缩。
额外一些需要注意的问题：

1. 索引无论在internal cache还是filesystem cache都是压缩的，压缩的是索引的键。
2. filesystem cache对性能的影响同样至关重要，不要忽略它的作用。

标签: mongodb
问题：vue父组件的created和子组件的mounted的执行先后？
父组件的created和子组件的mounted的执行先后？
如果父组件的created里有.then那么子组件的created会在子组件mounted前执行吗

回答：执行顺序如下：

1. 父组件 created
2. 子组件 created
3. 子组件 mounted
4. 父组件 mounted

如果有多个子组件：

1. 父组件created钩子结束后，依次执行子组件的created钩子
2. 多个子组件的created执行顺序为父组件内子组件DOM顺序
3. 多个子组件的mounted顺序无法保证，跟子组件本身复杂程度有关
4. 父组件一定在所有子组件结束mounted钩子之后，才会进入mounted钩子

标签: vue.js
问题：vue  input每次输入一个字符后自动失去焦点
代码如下，遇到的问题就是，我在输入框输入的时候，每输入一次，输入框就自动失去焦点了。
ps：实现的功能是，每点击一次添加按钮，然后就会为list对象的name数组添加一个对象，这个时候就会生成一个新的input，在这个input输入就会遇到如上问题
```
 <div class="addTags" v-for="(item,index) in list.name" :key="item.data">
    <input type="text" v-model="item.data">
 </div>
 <span class="add"  @click="addData()">+请添加</span>


 data() {
  return: {
     list: {
          name: []
        }
  }
 },
 methods: {
 addData() {
      this.list.name.push({data:''})
    }
 }
```

回答：问题在于:key=’item.data'，input数据绑定后进行模型更新后，div的属性要刷新，进行渲染后就重新刷新的input。如果你是要在代码中找div，建议你直接找input的父节点的方式，而不要用子节点绑定的数据给父节点的属性赋值。

标签: vue.js
问题：js怎么监听元素属性变化
原生js监听dom元素的属性值的变化，如果监测的目标属性发生变化。执行特定语句。
监听Dom元素的Style内部的某个特定的属性，例如display，默认为none，修改为inline时触发事件
思路：
```
1.Object.defineProperty
   set,get
2.Mutation Observer API
 
 
 
```
发生的问题：
1.defineProperty监测的目标是对象，Dom元素的属性集合[dom.attributes]也为对象{}。attributes对象是所有的属性集合的对象，style是属性集合里下属的集合，因为style的参数多。
问题：把dom.attributes当做对象监测集合下的style，当style发生改变的时候触发Set方法内的语句。但是测试的时候，当图片的display的值发生改变时，set无触发，经测试Object.defineProperty无反应。
```
    var m=document.getElementById("m").attributes; //对象{}
    Object.defineProperty(m,'style',{
        get:function () {
            console.log('get:'+m.style);
            return m.style.display;
        },
        set:function (v) {
            console.log('set:修改后的值'+v);
            m.alt='图片';
        }
    })
```
2.Mutation Observer API它等待所有脚本任务完成后，才会运行（即异步触发方式），不知道能不能实时触发修改。

回答：我觉得MutationObserver可以用啊，正常情况下，这个等待DOM操作结束再执行的异步回调没什么问题吧。什么业务实时性要那么高啊？ 一般一个事件里面同步的不会有同个属性改来改去的情况(有这种情况优化代码更好)，如果是异步的，那MutationObserver也会异步调用，倒没什么问题
```
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
<div id="test" style="position: relative;" onclick="clickMe()">test</div>
<script type="text/javascript">
    var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;
    var element = document.querySelector('#test');
    var observer = new MutationObserver(function(mutations) {
      mutations.forEach(function(mutation) {
        if (mutation.type == "attributes") {
          console.log('mm', new Date().getTime()) 
          console.log("attributes changed", mutation.attributeName)
        }
      });
    });

    observer.observe(element, {
      attributes: true //configure it to listen to attribute changes
    });
    
    function clickMe(){
      console.log('111', new Date().getTime())
      element.style.left = Math.random()* 10  + 'px';
      console.log('222', new Date().getTime())
      element.style.left = Math.random()* 10  + 'px';
      setTimeout(function(){
        console.log('333-timeout', new Date().getTime())
        element.style.left = Math.random()* 10  + 'px';
      }, 2000)

      console.log('click-end')
    }
</script>
</body>
</html>
```

标签: css, html5, html, javascript
问题：js如果两个数组中有相同对象 给对象添加属性
[{id:'11'},{id:'22'},{id:'33'}]  [{id:'11'},{id:'33'}]
想要下面结果 
[
{id:'11',follwed:true},
{id:'22',follwed:false},
{id:'33',follwed:true}
]

回答：```
    let arr1 = [{id:'11'},{id:'22'},{id:'33'}];
    let arr2 = [{id:'11'},{id:'33'}];
    let arr = [...arr1, ...arr2];
    let obj = {};
    arr.forEach(item=>{
        if(obj[item.id]){
            obj[item.id].follwed = true
        }else{
            obj[item.id] = item
            obj[item.id].follwed = false
        }
    });
    let result = Object.values(obj);
    console.log(result)
```

标签: javascript
问题：伪元素中content属性为什么不能设置图片尺寸？
div::before{
  content: url('a.png');
  display: block;
  width: 100px;
  height: 100px;
  object-fit: fill;
}
伪元素的content属性引入的图片之所以不能设置尺寸表现为固有尺寸，是不是因为它的默认属性是boject-fit: none？
如果不是那是为什么不能设置呢？
如果是的话，那么我已经设置了object-fit: fill为什么依然不能设置呢？

回答：`object-fit`是图片`img`的样式，伪元素虽然可以设置图片，但毕竟不是`img`
你可以用背景图片，然后用`background-size:cover`
```
div::before{
content: '';
display: block;
width: 100px;
height: 100px;
background:url('a.png')
background-size:cover;
}
```

标签: css, css3
问题：el-scrollbar怎么滚动到锚点？
el-scrollbar用的目的是为了好看，滚动条被隐藏掉了
但是现在有个问题是正因为用了它，不能滚动到锚点，window.scrollTo也不行
el-scrollbar必须设定高度，才可以使用scrollTop的。内容区就是固定高度了，很丑啊。
我要的是`<a href="#id">` 点击直接#id到达锚点的效果

回答：<template>
  <div class="test">
```
<a href="javascript:void(0)" @click="AnchorLinkTo('id')">我是锚点</a>
<el-scrollbar ref="myScrollbar" style="height: 300px; width: 500px;">
  <div>
    <p>sdfsdfsd</p>
    <p>sdfsdfsd</p>
    <p>sdfsdfsd</p>
    <p>sdfsdfsd</p>
    <p>sdfsdfsd</p>
    <p>sdfsdfsd</p>
    <p>sdfsdfsd</p>
    <p>sdfsdfsd</p>
    <p>sdfsdfsd</p>
    <p>sdfsdfsd</p>
    <p>sdfsdfsd</p>
    <p>sdfsdfsd</p>
    <p>sdfsdfsd</p>
    <p ref="id">哈哈哈哈哈哈哈哈哈</p>
    <p>sdfsdfsd</p>
    <p>sdfsdfsd</p>
    <p>sdfsdfsd</p>
    <p>sdfsdfsd</p>
    <p>sdfsdfsd</p>
    <p>sdfsdfsd</p>
    <p>sdfsdfsd</p>
    <p>sdfsdfsd</p>
    <p>sdfsdfsd</p>
    <p>sdfsdfsd</p>
    <p>sdfsdfsd</p>
    <p>sdfsdfsd</p>
    <p>sdfsdfsd</p>
    <p>sdfsdfsd</p>
    <p>sdfsdfsd</p>
    <p>sdfsdfsd</p>
    <p>sdfsdfsd</p>
    <p>sdfsdfsd</p>
    <p>sdfsdfsd</p>
    <p>sdfsdfsd</p>
    <p>sdfsdfsd</p>
    <p>sdfsdfsd</p>
    <p>sdfsdfsd</p>
    <p>sdfsdfsd</p>
    <p>sdfsdfsd</p>
    <p>sdfsdfsd</p>
    <p>sdfsdfsd</p>
    <p>sdfsdfsd</p>
    <p>sdfsdfsd</p>
    <p>sdfsdfsd</p>
    <p>sdfsdfsd</p>
    <p>sdfsdfsd</p>
    <p>sdfsdfsd</p>
    <p>sdfsdfsd</p>
    <p>sdfsdfsd</p>
    <p>sdfsdfsd</p>
    <p>sdfsdfsd</p>
    <p>sdfsdfsd</p>
    <p>sdfsdfsd</p>
  </div>
</el-scrollbar>
```
</div>
</template>
<script>
export default {
  name: 'test',
  data () {
```
return {}
```
},
  methods: {
```
AnchorLinkTo (ref) {
  this.$refs['myScrollbar'].wrap.scrollTop = this.$refs['' + ref].offsetTop
}
```
}
}
</script>

标签: javascript
问题：webpck是不是不能编译这个属性-webkit-box-orient: vertical
```
 // -webkit-box-orient: vertical!important;
overflow: hidden;
-webkit-line-clamp: 2;
height: .72rem;
line-height: .36rem;
display: -webkit-box;
```
这几个属性是用来处理多行文本溢出的，但是现在webpack编译以后，
`-webkit-box-orient: vertical`检查元素样式并没有这个属性，
其他的几个属性都有，现在只有把这个属性放入内联样式才行，我用的是scss，
希望直接给出解决方案。

回答：解决方案如下
```
 /* autoprefixer: off */
  -webkit-box-orient: vertical;
  /* autoprefixer: on */
```

标签: javascript
问题：php数组引用的小疑问
```
$a=[1,2,3]; 
foreach($a as &$v){} 
foreach($a as $v){}

var_dump($a);

//结果
0 => int 1
1 => int 2
2 => int 2

```
为什么最后一个元素变成了2

回答：这个挺有意思的，很简单，我们来分析一下执行流程即可。
首先，第一次是
```
foreach($a as $v) {}
```
第一次是引用遍历形式，而在PHP中，foreach里的变量不是只在foreach这个范围内有效，而是在整个下文程序中都是有效的。
所以，第一次遍历，此时`$v`得到的是`$a`数组最后的一个引用，也就是 `$v == $a[2] == 3`，当前$v是$a[2]的引用。
然后来看第二次
```
foreach($a as $v) {}
```
我们来看这里的执行情况，这里执行3次，我们从第一次到第三次的执行分析。
首先第一次`foreach`后，`$v = $a[0] == 1`，也就是$v被赋值为`$a[0]`，而从上文我们知道$v是$a[2]的引用，所以，此时相当于`$a[2] = $v = $a[0]  == 1`，也就是说，此时`$a = [1,2,1]`；
同理，来看第二次`foreach`，此时从第一次循环所看到的`$a = [1,2,1]`可知`$v = $a[1] == 2`,已知$v是$a[2]的引用，所以此时相当于`$a[2] = $v = $a[1] == 2`，也就是说，此时`$a = [1,2,2]`;
由此可见，第三次循环，那么`$v = $a[2]`，而从第二次循环可知`$a = [1,2,2]`，所以此时`$v == 2`，已知$v是$a[2]的引用，所以此时相当于`$a[2] = $v = $a[2] == 2`，也就是说，此时`$a = [1,2,2]`；
如果是多次循环，可以依此道理进行计算。

标签: php
问题：react antd table滚动条事件如何实现
### react antd table滚动条事件如何实现
### 项目开发中有一个table表格需要做懒加载效果
### 滚动条事件，就是当table的竖向滚动条到底时，就触发ajax事件再拿一定条数的数据。

回答：可以试试 onScrollCapture 监听
类似这样
```
<div className={styles.center} onScrollCapture={() => this.onScrollEvent()} ref={c => (this.container = c)}>
...
</div>
```
```
constructor(props) {
    super(props);
    this.onScrollEvent = this.onScrollEvent.bind(this);
  }

  onScrollEvent() {
    if (this.container.scrollTop + this.container.clientHeight ===         
      this.container.scrollHeight) {
      // todo
    }
  }
```

标签: antd, react.js
问题：typescript 泛型内的 `=` 赋值操作是什么意思？
### 描述
举个 `jQuery` 声明文件 的 栗子
```
interface JQueryStatic {
    // ...
    <TElement extends Element = HTMLElement>(selector: JQuery.Selector, context?: Element | Document | JQuery): JQuery<TElement>;
}
```
如果是 `<TElement extends Element>(selector: JQuery.Selector, context?: Element | Document | JQuery): JQuery<TElement>` , 我理解大概是说：“可以传入一个泛型参数 TElement，且 TElement 需要满足 Element类型的约束条件” 
### 问题
这里的`=`赋值像是函数参数默认值，代表泛型的默认值么？ 但是，由官方栗子可知，类型推论会自动确定确认 T 的类型，应该是不需要泛型的默认值的吧？
```
`function identity<T>(arg: T): T {
    return arg;
}

let output = identity<string>("myString");  // type of output will be 'string'

// 利用了类型推论 -- 即编译器会根据传入的参数自动地帮助我们确定T的类型
let output2 = identity("myString");  // type of output will be 'string'`
```

回答：就是泛型的默认值。
阁下引用的例子里写到
而在`JQueryStatic`里，传入的参数与`TElement`一毛钱关系都没有，换言之，是无法自动推断的。在这种时候，就可以指定一个默认值。
您引用的例子里写的是“传入的参数”，所以我也就沿用了这个不严谨的表达，但是看起来导致困惑了……
这里的“传入的参数”，指的是圆括号里的东西，即函数的形参。如果圆括号里面没有出现过`TElement`，那么就不可能根据调用时的实参去自动推断泛型。至于泛型的约束条件，可以与默认值同时出现，也可以不同时出现，两者没有必然的联系。
严格来说，“传入”这个词和“泛型参数”这个词是不能搭配的。泛型是定义时使用的，运行时会被去掉。
再补上例子吧：
```
function bare<TElement>(): TElement {
    return null as any as TElement;
}

const a = bare(); // typeof a === {}

function ext<TElement extends Element>(): TElement {
    return null as any as TElement;
}

const b = ext(); // typeof b === Element

function dft<TElement extends Element = HTMLElement>(): TElement {
    return null as any as TElement;
}

const c = dft(); // typeof c === HTMLElement
```
以上圆括号里面都没有出现过`TElement`。

标签: angularjs, node.js, 前端, javascript, typescript
问题：有人说"如果是手机开发， static 会构成内存负担，memory leak 隐患，尽量少用吧。但不用实例话可以直接调用有时又更方便，相对节省内存，这个就拿捏吧。。"
java的static方法会不会造成内存负担？

回答：这样的说法真是胡说八道。首先所有的方法本质上（底层）都是静态的，非静态方法只是多传了一个隐藏的 this 参数。所以任何方法不论是否静态都会占用内存空间。其次优化内存不应该关心方法，而是应该专注于对象的生存周期。

标签: java
问题：假如数据库连接数只有1000，怎么处理100万的并发量呢？不能用负载均衡，有别的办法吗？
求大佬们给个思路，这是我上午的面试题。。。

回答：1、用redis将高频查询数据存储。提高查询速度
2、mysql做主从
3、增删改加队列
4、切表分库
5、swoole解决并发
6、有必要时用grpc做服务治理
7、微服务
8、代码分割
。。。。等等等等
又是一个面试造核弹，上班拧螺丝的过程

标签: php, 负载均衡, 缓存, apache, laravel
问题：js中!!有存在的必要么?为什么?
### 业务背景
- 浏览`lodash源码
- 发现了`!!`这个用法
- 查了一下,是两次取反的意思
- 但是没搞懂他存在的必要
### 示例代码
```
function isObjectLike(value) {
  return !!value && typeof value == 'object';
}
```
```
function isObjectLike(value) {
  return value && typeof value == 'object';
}
```
### 我的困惑
- 
官方代码的含义
  - 就是取反之后再取反,最后来判断这个变量是否为真
- 
我的代码
  - `js`会根据数据类型以及变量值,自动判断他为真为假

比如传一个0进去
- 
官方的步骤:
1. !0 => true
2. !true => false
- 
我的步骤
1. 0 => false

### 问题
- 既然结果都一样,那很多大佬写的代码为什么都要这样用呢?肯定不是多此一举吧

回答：作用是为了类型转换, 强制转换成布尔值.
至于为什么需要. 我来详细说说:
```
function isObjectLike(value) {}
```
我们期望 isObjectLike 的返回值是个 boolean. 但 && 操作的返回值是参与操作的操作数.
```
console.log(1 && 2) // 打印 2
console.log(0 && 2) // 打印 0
```
所以如果我们传递给 && 的操作数不是布尔类型的, 那么我么得到的返回值就不是布尔值. 我们看看去掉 !! 会造成怎样的不一致性和bug.
```
function isObjectLike(value) {
  return value && typeof value == 'object'; // 去掉 !!
}

isObjectLike(0) === false // false 什么? 居然不相等?

console.log(isObjectLike(0)) // 打印 0
```
你能想象一个叫 `isObjectLike` 的函数返回值类型却不是 boolean 值吗?

标签: javascript
问题：vscode 如何配置路径别名?配合webpack使用
```
import { queryString } from '@/utils'
```
如果使用相对路径, 如:
```
import { queryString } from '../../utils'
```
点击 queryString 就能直接索引到对应的文件
但是用webpack alias 后 就失去这种便捷的功能了, 
vscode有没有这种路径别名的配置?

回答：放一个jsconfig.json到项目根目录下。
```
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./*"]
    }
  }
}
```
文档：jsconfig#_using-webpack-aliases

标签: javascript, 前端, visual-studio-code, webpack
问题：说明下为什么this指向window？
能帮我解释下为什么this指向window
```
function fn(){ console.log(this)
};
```
原理

回答：1. 在这个上下文（执行环境）函数并没有绑定到任何一个对象中，意味着 this 指向 window；

2. 从作用域和调用链方面看就很好理解了，函数 fn 的上一级就是全局, 这个 this 指向全局；

3. 如果是在严格模式下执行的，而严格模式下该 this 指向 undefined。

标签: javascript, 前端, html5
问题：typescript 往window上挂在属性报错如何解决？
编译直接报错如何解决
```
window.isWeixin = os.weixin ? os.weixin : false;
```
就想往window上挂在 有什么好的方法能解决此问题

回答：1. 整个项目都能用的方法，适用于自定义属性
```
declare global {
  interface Window {
        isWeixin: boolean
 }
}
```

2. 单文件的方法，适用于简易Polyfill，或者不希望泄漏。
```
declare var window: Window & { isWeixin: boolean }
```

标签: javascript, typescript
问题：正则 exec方法 返回数组中 groups是用来存储什么值的？
var reg = /d+/;
var str = 'ac123abc456abc';
var result = reg.exec(str);
console.log(result);
//=> result: ["123", index: 2, input: "ac123abc456abc", groups: undefined]
//=> groups 作用是什么？

回答：`groups`是一个新的`field`，用来存储命名捕获组的信息：
```
let reg1 = /(\d)(\d)/
let str1 = '123'

console.log(reg1.exec(str1)) // => [12, 1, 2] 除去第一个以外的其他数据就是分组捕获到的数据，但是因为是一个数组，所以会存在一个记忆成本

// 命名捕获组的获取
let reg1 = /(?<first>\d)(?<second>\d)/
let str2 = '123'

console.log(reg2.exec(str2).groups) // => { first: 1, second: 2 } 而新的语法支持对这些捕获组进行命名，更方便地获取某个捕获组的数据
```
语法为：`(?<捕获组的名字>捕获组对应的规则)`

标签: javascript, regexp, 正则表达式
问题：js算法问题
```
let arr1 = [
    {
        label:'张三'，
        value:'1'
    },
    {
        label:'李四',
        value:'2'
    },
    {
        label:'王五',
        value:'3'
    }
 ]

let arry2 = ['1','2']

let resArry = ?

console.log(resArry)   //输出  张三、李四
```
arry2中的值能对应到arry1中的value  则放入resArry中  最终打印出张三、李四
这个怎么实现呢？

回答：```
let resArry = arr1.filter(o=>arry2.indexOf(o.value)>-1).map(o=>o.label);
console.log(resArry);
```

标签: javascript
问题：引入vux，v-chart 报错
引入vux，v-chart 报错，错误信息如下：
```
ERROR Failed to compile with 1 errors 18:17:42

error in ./node_modules/_vux@2.9.1@vux/src/components/v-chart/mixin.js

Module parse failed: Unexpected token (18:6)
You may need an appropriate loader to handle this file type.
| this.$parent.set(this.chartName, {
| shape: defaultShapeMap[this.chartName] || '',
| ...this.$props,
| ...camelAttrs(this.$attrs)
| })
```

回答：vux2必须配合vux-loader使用, 请在build/webpack.base.conf.js里参照如下代码进行配置：
```
const vuxLoader = require('vux-loader')
const webpackConfig = originalConfig // 原来的 module.exports 代码赋值给变量 webpackConfig

module.exports = vuxLoader.merge(webpackConfig, {
  plugins: ['vux-ui']
})
```

标签: vue.js, vux
问题：vue路由跳转不刷新
在'game-detail'页面执行this.$router.push()方法，跳转到'game-detail'，页面不刷新。
因为路由主体没变，变的只是传递的参数id
所以从'game-detail?id=1'到'game-detail?id=2'，并没有跳转。
但是可以在watch里监听$route,监听到id的变化。
后来我就在watch里边监听路由，点击后……重新调用了获取页面数据的methods函数。
想通过刷新页面数据，再加上把滚动条归零，来模拟页面的刷新。
然后……点击后……数据刷新了，页面没变化……
父组件是通过props传递给子组件的，请问我应该在子组件里怎么做呢？
刚才百度了发现有的人说是在子组件里watch并且deep监听，
然后我监听到数据变化了以后在子组件里进行赋值也还是不行。
父组件部分内容：
```
<child :data="dataList"/>
data里边：dataList: []
this.$http.get().then((res)=>{
    this.dataList.splice(0, this.dataList.length, ...res)
})

```
watch部分：
```
watch: {
    $route(to, from) {
        this.$http.get().then((res)=>{
            this.dataList.splice(0, this.dataList.length, ...res)
        })
    }
}

```
子组件部分内容：
```
<div>{{ getData.name }}</div>
props: ['data']
data里边：getData: this.data[0]

```

回答：受邀来答。
路由参数变化但是页面没有刷新这是Vue的组件复用的默认处理方式
文档里面写了
不想复用的话，就在父组件的router-view上加个key
`<router-view :key="$route.fullPath"></router-view>`

标签: vue-router, vue.js
问题：怎么判数组中的值相等
let arr1 = ['你好','我很好'];
let arr2 = [
```
         { name: '我不知道',value: 0},
         { name: '我不好',value: 1}, 
         { name: '你好',value: 2},
         { name: '我特别布好',value: 3},    
         { name: '我很好',value: 4},
       ];
```
请问该怎么判断这里面的值相等啊？最后输出value

回答：```
arr2.filter(function(el) {
    return ~arr1.indexOf(el.name)
}).map(function(item) { return item.value })
```

标签: javascript
问题：optimization.runtimeChunk 具体作用是什么？
webpack 的optimization.runtimeChunk这个配置项的具体作用是什么？看了文档还是不懂

回答：优化持久化缓存的, runtime 指的是 webpack 的运行环境(具体作用就是模块解析, 加载) 和 模块信息清单, 模块信息清单在每次有模块变更(hash 变更)时都会变更, 所以我们想把这部分代码单独打包出来, 配合后端缓存策略, 这样就不会因为某个模块的变更导致包含模块信息的模块(通常会被包含在最后一个 bundle 中)缓存失效. optimization.runtimeChunk 就是告诉 webpack 是否要把这部分单独打包出来.

标签: webpack
问题：vue-property-decorator 和 vue-class-component 有什么区别？
```
@Component({})
```
貌似都可以用以上方式来使用，久而久之有点混乱，请问他们之间有什么区别？或者什么场景下应该使用哪一个？

回答：vue class component 是vue 官方出的
vue property decorator 是社区出的
其中vue class component 提供了 vue component 等等
vue property decorator 深度依赖了 vue class component 拓展出了很多操作符 @Prop @Emit @Inject 等等 可以说是 vue class component 的一个超集
正常开发的时候 你只需要使用 vue property decorator 中提供的操作符即可 不用再从vue class componen 引入vue component

标签: vue.js, typescript
问题：js一道题目，大家进来瞅一瞅
函数add可以实现连续的加法运算
函数add语法如下
add(num1)(num2)(num3)...;//注意这里是省略号哟，无限
使用举例如下：
add(10)(10)=20;
add(10)(20)(50)=80;
add(10)(20)(50)(100)=180;
请用js代码实现函数add。
```
function add(num){
    var sum=num,
    
        tmp=function(v){
            sum+=v;
            return tmp
        };
    
    tmp.toString=function(){
        return sum
    };
    
    return tmp
}


console.log( add(10)(20)(50) )        //80

```
这个tmp又返回tmp是什么操作，这就是传说中的偏函数吗？还有toString的调用？

回答：```
console.log( add(10)(20)(50) )
```
之后代码运行的过程是：
1.首先执行add(10),初始化add函数内部sum为10,
```
return tmp=function(v){
            10+=v;
            return tmp
        };
```
2.其后执行tmp(20)即：
```
return tmp=function(20){
            10+=20;
            return tmp
        };
```
3.其后执行tmp(50)
```
return tmp=function(50){
            30+=50;
            return tmp
        };
```
4.其后输出时会执行一个类型转换函数即被重写的：
```
tmp.toString=function(){
        return sum
    };
```
5.输出tmp函数以及即内容即此时的sum：80

标签: javascript, 前端
问题：无缝轮播滚动，js代码异步，出了点小问题
要轮播5张图 ，布置 5->1->2->3->4->5->1 7张图 要实现无缝
实际思路上就是最后一张滚到第一张实际是顺着滚，动画结束再取消transition切回第一张再附加transition
现在我遇到这个个问题
```
/...5->1执行的代码（有滚动动画）.../
     if (newLeft === -3600) { //滚到第7张图时的left,执行回滚
          setTimeout(function () {
            list.style.transition = 'none'; //取消动画
            list.style.left = -600 + 'px'; //瞬间回滚
            list.style.transition = 'left 2s linear';//恢复动画 //但是这句话回滚的时候会生效是为什么
          },2000)
      }

```
这么写回滚的时候动画会生效
必须要用下面的写法，第二个计时器必须大于2000几个毫秒才满足需求,
为什么会发生这种事情，计时器里面回调函数应该是同步的呀， list.style.left = -600 + 'px';不执行完后面应该是不会设置动画的呀？
```
if (newLeft === -3600) {
      setTimeout(function () {
        list.style.transition = 'none';
        list.style.left = -600 + 'px';
      },2000)
      setTimeout(function () {
                list.style.transition = 'left 2s linear';
      },2020)
}

```
这里我发现：间隔时间1-4秒基本没用给，间隔10ms偶尔会出现回滚动画，设置20ms基本没问题
实际上还是刚刚的问题，js是单线程，会阻塞，2000ms执行的代码如果不执行完，2010ms是不会把异步代码拿来执行的，如果执行完了，那么我这个回滚应该是没有动画的。求大神解释一下

回答：浏览器会在一个特定的点去执行渲染,在那之前的操作是没有中间态的!
```
list.style.left = 0 + 'px';

// 某一时刻 浏览器渲染

// 浏览器执行js
list.style.left = 1 + 'px';
list.style.left = 2 + 'px';
list.style.left = 3 + 'px';
list.style.left = 4 + 'px';

// 某一时刻 浏览器渲染
```
在两次渲染间,浏览器只知道 `list.style.left` 从 0 变为 4px 这个事实, 他不知道也不关心你到 4 中间发生了什么, 你可以是1个px 累加,或先到100再到4. 浏览器看到就是上一次渲染是0,这次是4.
所以
```
list.style.transition = 'none'; 
list.style.left = -600 + 'px';
list.style.transition = 'left 2s linear';
```
在浏览器看来就是:
```
list.style.left = -600 + 'px';
list.style.transition = 'left 2s linear';
```
解决办法是在需要被感知状态的地方让浏览器进行一次渲染, setTimeout 就可以达到这个效果,还有常见的访问 `offsetWidth` 等属性触发一次 reflow.
方案一:
```
list.style.transition = 'none'; 
list.style.left = -600 + 'px';

// 触发 reflow
list.offsetWidth;

list.style.transition = 'left 2s linear';
```
方案二:
```

setTimeout(function () {
  list.style.transition = 'none';
  list.style.left = -600 + 'px';

  // 延迟这部分脚本执行, 让浏览器先渲染当前帧
  setTimeout(() => {
     list.style.transition = 'left 2s linear';
  })
},2000)
```

标签: 定时器, 异步, javascript
问题：vue failed to convert exception to string
使用了vue的导航守卫之后就报错
```
failed to convert exception to string
```
```
router.beforeEach(function(to, from, next){
    /* 路由发生变化修改页面title */
    if (to.meta.title) {
        document.title = to.meta.title
    }
    if(!localStorage.getItem('token')){
        // router.push({name:'login'})
        // router.push({name: 'login'});
        next({ path: '/user/login' });
    }
    next();
});
export default router;
```

回答：你这样写会陷入无限循环的，给你个参考下
```
let login = localStorage.getItem('token')
let path = to.path
if (path === '/user/login') {
  next()
  return
}
if (login) {
  if (path === '/') {
    next({
      path: '/index'
    })
  } else {
    next()
  }
} else {
  next({
    path: '/user/login'
  })
}
```

标签: vue.js, vue-router
问题：js如何修改对象的key值？
原数据：
```
var array = [
    {
        id:1,
        name:"小明"
    },
    {
        id:2,
        name:"小红"
    }
];

```
我要改为的数据：
```
var array = [
    {
        value:1,
        label:"小明"
    },
    {
        value:2,
        label:"小红"
    }
];

```
对应的值不变，只是改key的名称，用js如何实现呢？

回答：```
var array = [
    {
        id:1,
        name:"小明"
    },
    {
        id:2,
        name:"小红"
    }
];
//旧key到新key的映射
var keyMap = {
    "id" : "value",
    "name" : "label"
};

for(var i = 0;i < array.length;i++){
        var obj = array[i];
        for(var key in obj){
                   var newKey = keyMap[key];
                   if(newKey){
                            obj[newKey] = obj[key];
                            delete obj[key];
                     }
            }
}
console.log(array);
```

标签: javascript, css, html, html5
问题：go gorm select 了字段后  结果集还是所有的struct都被返回，只是其他字段为空
### go gorm select 了字段后  结果集还是所有的struct都被返回，只是其他字段为空
### 问题出现的环境背景及自己尝试过哪些方法
### 相关代码
db.Debug().Where(s).Select([]string{"id","username","phone"}).Find(&user)
type User struct {
```
gorm.Model
Username string `json:"username"`
Phone string `json:"phone"`
Type int8 `json:"type"`
Order []Order `gorm:"ForeignKey:UId"`   // hasMany 设置对应的外键
CreditCard *CreditCard `gorm:"foreignkey:CardID"`
CardID uint
```
}
### 实际结果
```
[
{
"id": 3,
"created_at": "0001-01-01T00:00:00Z",
"updated_at": "0001-01-01T00:00:00Z",
"deleted_at": null,
"username": "hello",
"phone": "18672858778",
"type": 0,
"Order": null,
"CreditCard": null,
"CardID": 0
},
{
"id": 6,
"created_at": "0001-01-01T00:00:00Z",
"updated_at": "0001-01-01T00:00:00Z",
"deleted_at": null,
"username": "hello",
"phone": "18672858778",
"type": 0,
"Order": null,
"CreditCard": null,
"CardID": 0
},
{
"id": 9,
"created_at": "0001-01-01T00:00:00Z",
"updated_at": "0001-01-01T00:00:00Z",
"deleted_at": null,
"username": "hello",
"phone": "18672858779",
"type": 0,
"Order": null,
"CreditCard": null,
"CardID": 0
},
{
"id": 12,
"created_at": "0001-01-01T00:00:00Z",
"updated_at": "0001-01-01T00:00:00Z",
"deleted_at": null,
"username": "hello",
"phone": "18672858779",
"type": 0,
"Order": null,
"CreditCard": null,
"CardID": 0
}
]
```
期望结果
```
[{
"id":6,
"username":"hello",
"phone":"18672858779"
},
{
"id":9,
"username":"hello",
"phone":"18672858779"
}
]
```

回答：因为你使用是的：
```
Find(&user)
```
其中，&user 是一个 stuct ，肯定是一个完整的结构，没有值的字段会有默认值
如果不想显示那些的话，可以使用 Scan
```
type Result struct {
  Name string
  Age  int
}

var result Result
db.Table("users").Select("name, age").Where("name = ?", 3).Scan(&result)

// Raw SQL
db.Raw("SELECT name, age FROM users WHERE name = ?", 3).Scan(&result)

```
文档，见这里

标签: go, gorm, select
问题：vue中 钩子函数如何使用async？
```
  async created () {
    await setTimeout(()=>{
      console.log(1)
    },5000);
  },
  async mounted () {
    console.log(2)
  }
```
在vue中给created使用async await，还是会先输出2，而不是等1输出完？

回答：可以变相达到这个目的
```
  async created () {
    this.create_promise = new Promise(resolve=>this.create_promise_resolve=resolve);
    setTimeout(()=>{
        console.log(1);
        this.create_promise_resolve();
    },1000)
  },
  async mounted () {
    await this.create_promise;
    console.log(2)
  }
```

标签: vue.js
问题：axios的withCredentials问题
### 问题描述
我想要跨域带上`cookies`，为什么`withCredentials: true`不起作用？
### 问题出现的环境背景及自己尝试过哪些方法
我尝试过`axios.defaults.withCredentials = true`可以起作用。 
但是为什么单独配置，没有作用？
### 相关代码
```
axios.post('http://101.132.138.141:8888/service/pageUsers', objectToForm({
        'currentPage': '1',
        'pageSize': '10',
        'token': '7e987daa-6c84-46d2-be26-f345dfaed8a7',
    }), {
        // 单独配置
        withCredentials: true
    })
    .then(function(res) {
        console.log(res.data);
    })
    .catch(function(err) {
        console.error(err);
    });
```
### 实际看到的错误信息又是什么？
后端已经设置了`CORS`头，但是因为没有附带上`cookies`，所以被拦截器拦截了。

回答：withCredentials的情况下，后端要设置Access-Control-Allow-Origin为你的源地址，例如http://localhost:8080，不能是*，而且还要设置header('Access-Control-Allow-Credentials: true');

标签: javascript
问题：菜鸟问题：axios到底是装在devDependencies中还是装在dependencies中
之前只是用一直没有注意这个问题，在github上axios的官方安装是：
```
$ npm install axios
```
那就等于是安装在dependencies中了，但是我现在的项目中是安装在devDependencies中的，关键是打包后仍然可以正常使用，所以我有点没明白

回答：除了字面的含义的区别，
`dependencies`和`devDependencies`的区别还在于：
如果你的项目是发布到`npm`的一个包，
那么这个包的`package.json`中的`dependencies`中的依赖是会被下载下来到这个包的`node_modules`文件夹中的（如果你的项目本身没有这个依赖），而`devDependencies`不会。
举个例子：
我发布了一个组件`A`，它有`dependencies：lodash`和`devDependencies：moment`。
那么，如果你的项目`npm install` 了组件`A`。
除非你的项目也依赖了`lodash`并且版本一致，那么项目的`node_modules/A`下会有一个`node_modules`，里面会有`lodash`。
而 `moment`，则无论如何也不会出现在你的项目中。
至于一般的项目，不管你是安装在dev还是dependencies中，安装的时候都会安装，打包的时候都会被打进去的，区分依赖只是为了让项目看起来更加清晰。

标签: javascript, node.js, shell
问题：为什么webpack可以通过require('path')直接使用node.js的内置模块
这个问题可能看起来很搞笑，我也经常用webpack，用到node.js的模块时，因为之前跟着教程学习的缘故，所以也没觉得有什么奇怪。
可是现在想想，为什么webpack可以通过require('path')直接使用node.js的内置模块呢？
感觉webpack在打包时，通过node起了一个服务吧。或者说，用webpack时，项目本身已经是一个node项目了？

回答：- js是一种解释型语言，不能直接运行，需要运行环境。
- 常见的运行环境有，web浏览器，后端服务器(nodejs环境)等。
- webpack里的js不是在浏览器中运行的，而是在后端环境中运行的，这里就是nodejs环境。
- 相当于在nodejs环境中跑webpack，当然可以使用node内置模块。

标签: webpack
问题：js 数组赋值问题 ：值传递还是引用？
### 题目描述
```
var a = [1,2,3];
var b = a;
a = [4,5,6];
alert(b);  //[1,2,3]


var a = [1,2,3];
var b = a;
a.pop();
alert(b);  //[1,2]
//第一个我懂 第二个我不懂
```
### 题目来源
知乎
```
这是一个人回答的
a = [4,5,6];//改变的是a引用本身，没有改变数组对象
a.pop();//改变的是数组对象，a引用没有改变。
b = a;//该操作后，b直接指向数组对象，不是b指向a，a再指向数组。
//所以改变a引用并不会对b引用造成影响，改变数组对象可以

```
但是我觉得说不通啊 我觉得应该是 这个执行顺序啊  但是从结果看 我是错的~~
```
a = [4,5,6];//改变的是a引用本身，没有改变数组对象
b = a; // 这边还是指向引用
a.pop();

```
早上在知乎翻到的 看了他们的答案还是有点蒙蔽 有点蒙蔽  大佬能不能简明扼要的解答下  
我有点菜 望不吝赐教

回答：[1,2,3]是一幢楼，
[4,5,6]也是一幢楼，
a和b是两块门牌号铁皮。
```
var a = [1,2,3];  //把a牌号挂到 123楼门口
var b = a;        //把b牌号挂到 a牌号所在的楼门口，即123楼
a = [4,5,6];      //把a牌号摘下来，挂到了456楼的门口
alert(b);  //[1,2,3]  //此时b牌号依旧挂在123楼门口，b即代表着123楼


var a = [1,2,3];    //把a牌号挂到 123楼门口
var b = a;          //把b牌号挂到 a牌号所在的楼门口，即123楼
a.pop();            //把a牌号所在的楼拆掉顶层,此时a牌号仍旧挂在123楼门口，那就拆3层
alert(b);  //[1,2]  //b牌号仍旧挂在 原123楼门口，但此时只剩12两层
```

标签: node.js, html5, javascript
问题：typescript 往window上挂在属性报错如何解决？
编译直接报错如何解决
```
window.isWeixin = os.weixin ? os.weixin : false;


```
### 就想往window上挂在  有什么好的方法能解决此问题

回答：上面的any大法当然是可以解决所有问题，我补充两个漂亮点的方法吧。
整个项目都能用的方法，适用于自定义属性
```
`declare global {
  interface Window {
    isWeixin: boolean
  }
}`
```
单文件的方法，适用于简易Polyfill，或者不希望泄漏
```
`declare var window: Window & { isWeixin: boolean }`
```

标签: javascript, typescript
问题：es6中对象属性双方括号是什么意思
### es6中对象属性双方括号是什么意思?
在react表单输入输入框的change事件中
```
handleChange = (e) => {
    console.log(e);
    this.setState({
      value: e.target.value
    });
}
```
这里的event对象是一个proxy对象，将其打印到控制台输出如下
```
[[Handler]] : Object
  set : ƒ (target, prop, value)
  __proto__ : Object
[[Target]] : SyntheticEvent
  bubbles : (...)
  cancelable : (...)
  currentTarget : (...)
  defaultPrevented : (...)
  dispatchConfig : null
  eventPhase : (...)
  isDefaultPrevented : null
  isPropagationStopped : null
  isTrusted : (...)
  nativeEvent : (...)
  target : (...)
  timeStamp : (...)
  type : (...)
  _dispatchInstances : null
  _dispatchListeners : null
  _targetInst : null
  preventDefault : (...)
  stopPropagation : (...)
  get bubbles : ƒ ()
  set bubbles : ƒ (val)
  get cancelable : ƒ ()
  set cancelable : ƒ (val)
  get currentTarget : ƒ ()
  set currentTarget : ƒ (val)
  get defaultPrevented : ƒ ()
  set defaultPrevented : ƒ (val)
  get eventPhase : ƒ ()
  set eventPhase : ƒ (val)
  get isTrusted : ƒ ()
  set isTrusted : ƒ (val)
  get nativeEvent : ƒ ()
  set nativeEvent : ƒ (val)
  get target : ƒ ()
  set target : ƒ (val)
  get timeStamp : ƒ ()
  set timeStamp : ƒ (val)
  get type : ƒ ()
  set type : ƒ (val)
  get preventDefault : ƒ ()
  set preventDefault : ƒ (val)
  get stopPropagation : ƒ ()
  set stopPropagation : ƒ (val)
  __proto__ : Object
[[IsRevoked]] : false
﻿

```
如果是函数对象又会有这样的结构
```
arguments : (...)
caller : (...)
length : 0
name : ""
prototype : {constructor: ƒ}
__proto__ : ƒ ()
[[FunctionLocation]] : emptyFunction.js:13
[[Scopes]] : Scopes[2]
```
那这个对象里的[[]]（双方括号）属性命名是有什么意义？

回答：双方括号代表这是JavaScript引擎内部使用的属性/方法，可以帮助debug（点一下`[[FunctionLocation]]`就能跳到定义，点一下`[[Scopes]]`就能查看闭包），但是正常JavaScript代码是取不到这些属性的。
引擎看心情决定要显示哪些内部属性，显示的格式也没有规定，但在控制台里大家一般都约定俗成用双方括号，保持和规范的格式一致。
ECMA 标准： Object Internal Methods and Internal Slots

标签: javascript, html5, css, node.js, chrome
问题：面试题，http和https的区别是什么，跟TCP/IP四层模型有什么关系
在面试中被问到http和https的具体区别是什么？
与tcp/ip有什么关系了？跟三次握手有关系吗？
能不能好好讲解下

回答：## 区别
HTTP协议传输的数据都是未加密的，也就是明文的，可以用抓包工具直接抓下来，而HTTPS则是利用了网景公司设计的SSL（Secure Sockets Layer）协议对HTTP协议传输的数据进行加密，抓包工具抓下来的是密文，大幅增加了中间人攻击的成本。简单来说，HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，要比http协议安全。
## 跟TCP/IP的区别
TPC/IP协议是传输层和网络层协议，主要解决数据如何在网络中传输，而HTTP是应用层协议，主要解决如何包装数据。WEB使用HTTP协议作应用层协议，以封装HTTP 文本信息，然后使用TCP/IP做传输层协议将它发到网络上。
## 三次握手过程中的区别
太长不看版：
```
HTTP:使用三次TCP握手确认建立一个HTTP连接。
HTTPS:HTTPS在HTTP的基础上加入了SSL协议，SSL依靠证书来验证服务器的身份，并为浏览器和服务器之间的通信加密。
```
详细贼长版：
HTTP三次握手：
```
第一次握手：客户端发送syn包(syn=j)到服务器，并进入SYN_SEND状态，等待服务器确认；

第二次握手：服务器收到syn包，必须确认客户的SYN（ack=j+1），同时自己也发送一个SYN包（syn=k），即SYN+ACK包，此时服务器进入SYN_RECV状态；

第三次握手：客户端收到服务器的SYN＋ACK包，向服务器发送确认包ACK(ack=k+1)，此包发送完毕，客户端和服务器进入ESTABLISHED状态，完成三次握手。
```
HTTPS复杂的三次握手：
```
1. 客户端发起HTTPS请求

2. 服务端的配置

采用HTTPS协议的服务器必须要有一套数字证书，可以是自己制作或者CA证书。区别就是自己颁发的证书需要客户端验证通过，才可以继续访问，而使用CA证书则不会弹出提示页面。这套证书其实就是一对公钥和私钥。公钥给别人加密使用，私钥给自己解密使用。

3. 传送证书

这个证书其实就是公钥，只是包含了很多信息，如证书的颁发机构，过期时间等。

4. 客户端解析证书

这部分工作是有客户端的TLS来完成的，首先会验证公钥是否有效，比如颁发机构，过期时间等，如果发现异常，则会弹出一个警告框，提示证书存在问题。如果证书没有问题，那么就生成一个随即值，然后用证书对该随机值进行加密。

5. 传送加密信息

这部分传送的是用证书加密后的随机值，目的就是让服务端得到这个随机值，以后客户端和服务端的通信就可以通过这个随机值来进行加密解密了。

6. 服务段解密信息

服务端用私钥解密后，得到了客户端传过来的随机值(私钥)，然后把内容通过该值进行对称加密。所谓对称加密就是，将信息和私钥通过某种算法混合在一起，这样除非知道私钥，不然无法获取内容，而正好客户端和服务端都知道这个私钥，所以只要加密算法够彪悍，私钥够复杂，数据就够安全。

7. 传输加密后的信息

这部分信息是服务段用私钥加密后的信息，可以在客户端被还原。

8. 客户端解密信息

客户端用之前生成的私钥解密服务段传过来的信息，于是获取了解密后的内容。
```

标签: javascript, 前端, https, http, web
问题：var a=5；a=6；a的地址变了没有啊？
var a=5；a=6；a的地址变了没有啊？

回答：答案是“不知道”。
如果这两段代码如你所写，
```
var a=5;a=6;
```
那么没变，因为目前任何 js 引擎都会把这段代码直接优化编译为 `var a=6;`。
如果 `a` 先初始化为 5，在后面的程序中一直使用这个 `5`。然后在某一步又被重新赋值为 `6`。 那么 `a` 的地址变了吗？
这也得分情况，如果是在一个短小的函数中，也许 `a` 根本就没有内存地址，而是直接在寄存器里面进行运算。
即使 `a` 在内存中分配，也不能保证 `a` 的地址是不变的，因为在 GC 阶段要进行新生代内存区域交换和老生代内存碎片整理。
至于通常用来对比 `var` 和 `const` 的说法，“`const` 只是保证了内存地址不变，而不能保证引用的数据不变”，这个只是民间的说法，规范里面从来没有这么说。之所以这么说，是使用了 C++ 的概念来说明 `const` 的常量性质。
如果从 JavaScript 使用者的角度将，我们可以认为 `const` 定义的变量(常量)地址指向是不变的，但是如果从引擎和底层的角度讲，我们不能想当然的认为常量的地址是不变的。

标签: javascript
问题：微信小程序里自定义组件，canvas组件没有效果
微信小程序里自定义组件，canvas组件没有效果，请问有没有人遇到过这个问题？
```
  ready(){
    const ctx = wx.createCanvasContext('back-canvas')
    ctx.setFillStyle('red')
    ctx.fillRect(10, 10, 150, 75)
    ctx.draw();
  },
```
```
<canvas class='ca' canvas-id="back-canvas" style="width:200px;height:200px;"></canvas>
```

回答：createCanvasContext这个是有两个参数的，在page页面默认传了一个This,组件里面 需要传this
const ctx = wx.createCanvasContext('myCanvas',this);

标签: javascript, css, html, 微信小程序
问题：vue获取后端数据应该在created还是mounted方法？
vue获取后端数据应该在created还是mounted方法

回答：看情况了，一般放到created里面就可以了，这样可以及早发请求获取数据，如果有依赖dom必须存在的情况，就放到`mounted(){this.$nextTick(() => { /* code */ })}`里面

标签: vue.js, javascript
问题：async函数块之间如何同步执行？
请问多个async函数块之间如何同步的进行执行？
例子：以下两个async函数块如何顺序进行？
```
class Example {
    first;
    second;
    constructor(){
    }
    
    async  getFirstVal(){
     this.first = await [一个promise]
    }
    
    async  getSecondVal(){
    this.second = await[一个依赖于first的promise]
    }
    
    async  getOtherVal(){
    this.other = await[一个promise]
    }
    
    doSomeWork(){
    this.getFirstVal(); 
    this.getSecondVal();
    this.getOtherVal();
    ........
    }
}

```
请问，怎么做才能保证doSomeWork里面的first和second这两个异步块顺序执行？
我不想将second这一部分的逻辑写入getFirstVal方法中，虽然这样能获得正确的执行顺序，因为getFirstVal可能在很多地方都会异步调用到，我想将他封装成一个单独的函数。请问有什么好的方法帮助我实现这种async块之间的顺序执行吗？

回答：```
async doSomeWork() {
    await  this.getFirstVal(); 
    this.getSecondVal();
    this.getOtherVal();
}
```
这样可以吗？优雅的方案也没太研究过，但是你可以 看看 Rxjs 或者 async 这些库，能得到比较好的思路

标签: javascript, node.js, async-await, ecmascript-6, rxjs
问题：只用了el-dropdown，怎么控制el-dropdown的显示和隐藏？
我只引用了el-dropdown，没有引用el-dropdown-menu和el-dropdown-item。
dropdown里面的内容都自己写的，请问要怎么控制dropdown的显示和隐藏呢？

回答：解决了，看dropdown的源码封装有hiden()和show()方法，直接给el-dropdown加个ref再通过ref运行组件内的方法即可
```
<el-dropdown trigger="click" ref="messageDrop"></el-dropdown>

this.$refs.messageDrop.hide();
this.$refs.messageDrop.show();
```

标签: element-ui, vue.js