yujianAI/segmentfault_upvote5_clean huggingface dataset:
问题：在Vue.js中什么是内联处理器？
在文档中 内联处理器中的方法：
请问下`内联处理器`是指的什么呢？

回答：比较一下这两个写法有什么不同：
## 写法一
```
<div id="example-3">
  <button v-on:click="say">Say hi</button>
  <button v-on:click="say">Say what</button>
</div>
```
```
new Vue({
  el: '#example-3',
  methods: {
    say: function () {
      alert('hello');
    }
  }
});
```
## 写法二
```
<div id="example-3">
  <button v-on:click="say('hi')">Say hi</button>
  <button v-on:click="say('what')">Say what</button>
</div>
```
```
new Vue({
  el: '#example-3',
  methods: {
    say: function (message) {
      alert(message);
    }
  }
});
```
## 差异
一个有括号，一个没括号，对吧？
没括号的这个，直接就是函数名，有括号的这个，实际是一条JS语句，有括号的这个就叫『内联处理器』。
## 没括号的好处
看上去，有括号的更直观，更容易理解。那为什么还要搞什么无括号？
没括号的有这么一个好处：
```
<div id="example-3">
  <button v-on:click="say">Say hi</button>
  <button v-on:click="say">Say what</button>
</div>
```
```
new Vue({
  el: '#example-3',
  methods: {
    say: function (event) {
      alert(event.target.tagName);
    }
  }
});
```
虽然我没括号，但我天生自带`event`参数呀，你在上面不用写`event`，我下面就自带`event`了，你有括号的括号里几个参数，下面就得几个参数，你不能无中生有的。
### 有括号的逆袭
为了让有括号的也能得到无括号娘胎里自带的event参数，我们可以这样写：
```
<div id="example-3">
  <button v-on:click="say('hi', $event)">Say hi</button>
  <button v-on:click="say('what', $event)">Say what</button>
</div>
```
```
new Vue({
  el: '#example-3',
  methods: {
    say: function (message, event) {
      alert(message);
      alert(event.target.tagName);
    }
  }
});
```
送他一个美刀`$`，于是有括号的也可以快乐地使用天然无雕饰的`event`参数了！

标签: vue.js
问题：函数参数中的中括号究竟代表什么呢？
1.这是我看某文档的时候产生的疑问，如一个node中的write方法：
`buf.write(string[, offset[, length]][, encoding])`
2.问题：函数参数中的中括号代表什么了？怎么有些只有半个括号，比如string[ 或 offset[;而有的却是length]][这样了？
3.还会有其他符号也有它独特代表的含义吗？
4.这种写法的好处是什么？

回答：以上三个问题作一个问题回答。
简单的回答就是中括号表示这个参数非必须.
接下来详细解释。
首先，这样使用中括号只是出于一种的表达形式的需要而已(这样的表达形式很常见)，这与api本身是没有关系的。
然后，我们拿上面的例子来说
```
buf.write(string[, offset[, length]][, encoding])
```
对于`buf.write`这个方法：
第一个参数`string`是必须的，他表示你要写入的内容；往后的`offset`、`length`、`encoding`这些参数都是非必须的。这些参数你可以不传(用[]括起来表示不传)，但并不表示这三个参数你想怎么传就怎么传的，这里是有规则的，规则从这里中括号的对应关系中可以看出来。我们来看他的对应关系：`[, offset[, length]]` && `[ encoding]`。这表示`offset`、`length`和`encoding`你可以传或者不传,但是你要是没有传`offset`的话那`length`是一定不能传的，这就是为什么`length`要放在`offset`的括号里面的原因。
所以整个例子理解起来就是：
`string`必须传，`offset`、`length`、`encoding`可传可不传，但是`offset`不传的话`length`也不能传。
至于这样写有什么好处，我想这可能是当初写api那帮家伙觉得这样表达更合理吧，后面写文档的觉得这种方式还不错，就依葫芦画瓢了，慢慢的就约定俗成了。

标签: javascript
问题：当执行npm publish 时，出现unauthorized 和 is not in the npm registry
当执行npm publish，发生了如下错误：
```
appledeMacBook-Pro:nini-react apple$ npm publish
npm ERR! publish Failed PUT 401
npm ERR! code E401
npm ERR! 404 unauthorized Login first: nini-react
npm ERR! 404
npm ERR! 404  'nini-react' is not in the npm registry.
npm ERR! 404 You should bug the author to publish it (or use the name yourself!)
npm ERR! 404
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, http url, or git url.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/apple/.npm/_logs/2018-02-04T00_32_35_475Z-debug.log
appledeMacBook-Pro:nini-react apple$ 
```
起先以为是账户的问题，我就执行了npm adduser 和 npm login  都不行。公司的电脑都是可以的!哪位大神帮帮忙！

回答：您首先执行下` npm adduser `，输入您相应的` Username `、` Password `、` Email: (this IS public) `，关键的一步来了!
```
Logged in as 您的Username on https://registry.npmjs.org/.
```
如果` on `后面不是` https://registry.npmjs.org/ `，而是其他的镜像，比如我们大家常见的淘宝镜像：
```
http://registry.npm.taobao.org/
```
那么您首先替换成原来的，替换成原来执行如下命令：
```
npm config set registry https://registry.npmjs.org/
```
最后，替换完毕再执行` npm adduser `、` npm publish `，这样应该就ok了！

标签: node.js, npm
问题：请教一道算法题，如下，谢谢！
有一个数组`[1,1,1,2,3,4,5,8,10,22,24,25,26,66]`，
请写一个方法把数组变成`[1,1,[1,2,3,4,5],8,10,22,[24,25,26],66]`
就是把里面连续递增的数字归成一个数组，没思路，有没有好的方案？

回答：两个指针 i,j
```
var arr = [1,1,1,2,3,4,5,8,10,22,24,25,26,66]
var len = arr.length
var i = 1, j = 0
var rst = []
for(; i <= len; i++) {
  if(arr[i]-arr[i-1] !== 1) {
    i-j===1 ? rst.push(arr[j]) : rst.push(arr.slice(j, i))
    j = i
  }
}
```

标签: c++, go, python, php, javascript
问题：php 使用redis进行秒杀的思路
问题大概是这样的,因为项目中设计一个比较简单的类似于秒杀的东西
但几经搜索之后  都说使用redis的原子性  采用队列来处理, 然后去看了一下redis的一些命令
又结合了别人的一些代码   大致思路是以下这样
我有几个问题
1.什么时候触发 左进右出 取数据这个流程呢  ,条件是什么呢
2.还是说     把商品数量提到 检查队列长度之前??
3.或者说我的思路  本身就有很大漏洞或者  歪了
请不留情  斧正
```
   
   
   
    //用户进入
    //获取用户信息
    //连接redis
    //加入队列msList
    
    //这个位置检查缓存的商品数量??   为0就直接返回了 不用进行下面的操作?
    
    //检查队列长度  
    //--1.大于200就返回  抢购人数过多,跳转抢购结束页面,结束,终止秒杀
    //--2.小于等于就加入队列
    
    //判断等于200触发下面操作???

    //左进右出  取数据
    //----查询商品数量为num   
    //-------1.无则 加入redis缓存   
    //-------2.有则判断是否大于0 
    //----------1.小于等于就退出 ,跳转库存不足页面,结束
    //----------2.无则判断
    //-------------进入的用户左进右出
    //-----------------事务
    //-----------------1.插入成功,num-1,返回用户消息,结束
    //-----------------1.插入失败,回滚,返回用户消息,结束
    //释放redis

    //订单超时,库存增加??
```

回答：您可以逆向思考这个秒杀问题，由于Redis的list数据结构是不可能到达“负”长度的，所以可以把需要被秒杀的商品信息和一个唯一编号预先放到指定商品类型的唯一队列中，用户请求时直接lpop出结果，不可能出现超量的问题，很多东西都免了。

标签: php, nosql, 缓存
问题：js 怎样用正则去掉小数点后面多于的0
想用replace替换掉小数点后面多于的0.
```
例如： 12.000700 ——————> 12.0007

```
注意：若是没有小数点的话，匹配不生效，不替换任何字符。
1.（不希望转为数字）我的整个数值计算是字符串按位计算的，所以我并不希望将他转为数字，而是通过正则的方式去掉多余的0。不愿意转换也有一点是String/Number等方法对小数点后面的位数有限制。
2.（需要考虑没有小数点的情况）/0*$/或者/0+$/这种单纯的匹配末尾是不全面的。可能有没有小数点的存在。
```
并不希望: 12000 ——————> 12

```
这明显改变了数值
3.（目前想到的方法）目前的能想到的用了两个replace一个match。先匹配到小数点右面的字符。再将该字符去末尾0替换到小数点右面。显然不高级，有没有更优雅的写法。
```
var str = "12.000700";
var _tmp = str.match(/\.\d+0+/)[0].replace(/0+$/,'');
console.log(str.replace(/\.\d+0+/, _tmp));
```

回答：```
const arr=['1200.00100','1200.00000','1200.','1200','1200.10000','0.120010000','0.000011111']
const regexp=/(?:\.0*|(\.\d+?)0+)$/
arr.forEach((item)=>{
    console.log(item.replace(regexp,'$1'))
})

// > 1200.001
// > 1200
// > 1200
// > 1200
// > 1200.1
// > 0.12001
// > 0.000011111
```
再解释下正则的意思`(?:\.0*|(\.\d+?)0+)$`
先分解成4部分

1. `(?:reg1|reg2)` - 它是一个正则分组非捕获组，要么匹配reg1，要么匹配reg2，优先匹配reg1，加上`?:`不对捕获组记录
2. `\\.0*` - 表示匹配一个`.`开头，后边跟着0或0个以上数量的`0`，且不进行捕获，所以在填充`$1`时，就是个空值
3. `(\\.\\d+?)0+` - 它是一个捕获组，匹配一个`.`开头后边跟着非贪婪（懒惰）匹配任意数字，接着在末尾尽可能多的匹配`0`这个字符，匹配完成 后，生成一个捕获组内容
4. `$` - 表示匹配结果需要以`0`作为结尾

标签: 正则表达式, javascript
问题：一道关于  对象之间  值传递的问题
```
    var a = {
      num: 2
    };

    var b = a; 

    a.num = a = {
      num: 4
    };
    console.log(a.num);// 4
    console.log(b.num);// { num: 4 }

```
这个b.num是4不是因为 'var b = a时' b指向a了吗？那为什么下面那个没有指向a
```
    var a = {
      num: 2
    };

    var b = a; //没有把指向给b吗

    a = {
      num: 4
    };
    console.log(b.num)  //为什么是2  a已经是4了b的指向还是a为什么不是4？
```

回答：Javascript中有5种基础数据类型，分别是`Undefined、Null、Boolean、Number、String（ES6中新加的Symbol，暂时不考虑它）`，基础数据类型都是按值访问，即我们可以直接操作保存在变量中得实际值。而Javascript中的引用数据类型，比如Array，Object。。。它们的值是保存在堆内存中得对象，Javascript 不允许直接访问堆内存中的数据，即无法直接操作对象的堆内存空间。在操作对象时，实际上我们操作的是对象的引用，也就是我们经常提及的内存地址、内存指针等。废话不多说，咱们来看题目。
```
var a = {
  num: 2
};

var b = a;
```
我们通过` var b = a; `进行引用类型的赋值操作，该操作会自动分配一个值保存在变量b，不过这个值就是咱们经常提及的引用类型的一个内存地址或内存指针。当内存地址相同时，尽管变量之间相互独立，但访问的具体对象实际上是同一个，即变量 a 和 b 在内存空间对应的对象是同一个，在该位置您不管是修改a.num，还是修改b.num，它们两个都会受影响！
接下我们再分析一下最容易迷惑的一行代码：
```
a.num = a = {
  num: 4
};
```
因为Javascript的成员访问优先级（19）比赋值优先级（3）高（运算符优先级可参考：运算符优先级），因此先执行成员访问a.num，上面我们说了不管您是修改a.num，还是修改b.num，它们两个都会受影响！所以这里变量b也会受到影响，因此实则发生了如下赋值代码：
```
b.num = a = {
    num: 4
}
```
所以变量b对应的堆内存的对象如下：
```
b = {
 num: {
   num: 4
 }
}
```
接下来我们再看看变量a，变量a起先对应的堆内存的对象为：
```
a = {
  num: 2
};
```
当执行 `b.num = a = { num: 4 }`再次进行引用类型的赋值操作，在这里会重新为a分配一个内存指针！所以a最终变成了：
```
a = {
  num: 4
};
```

标签: javascript
问题：怎么在ng4中阻止触摸事件的冒泡or渗透？
我用ng4写了一个触摸滑动组件，部分代码如下：
```
let touchstart = Observable.fromEvent(this.el.nativeElement,'touchstart')
let touchmove = Observable.fromEvent(this.el.nativeElement, 'touchmove')
let touchend = Observable.fromEvent(this.el.nativeElement, 'touchend')

touchstart.map((start:any) => {
  return new Position(start.touches[0].pageX, start.touches[0].pageY)
}).subscribe(start => {
  this.duration = 0;
  this.touchObject.start = start
  transObject.start = new Position(this.trans.x, this.trans.y)
});
```
......
这个组件是fixed在最上层的，他响应触摸滑动的时候，它下面的内容也会跟着一起滑动，有什么办法能够只让它自己滑动呢？

回答：没试过。试试`Observable`加个`filter`
```
let touchstart = Observable.fromEvent(this.el.nativeElement,'touchstart').pipe(
    filter((evt:any) => evt.target == this.el.nativeElement)
)
```
或者加个`tap`中阻止冒泡试试。
```
let touchstart = Observable.fromEvent(this.el.nativeElement,'touchstart').pipe(
    tap((evt:any) => evt.stopPropagation())
)
```
`Rxjs 5+`

标签: angular4
问题：java怎么判断不是常用汉字？例如这类字：挹攀繊昧
java怎么判断不是常用汉字？例如这类字：挹攀繊昧
谢谢！

回答：把常用汉字做成一个字典存起来，用的时候查就行了
http://blog.csdn.net/mingzzne...
只收录一级汉字的话，也就大约10KB左右的大小
上面的是GB2312标准中的
按新一点的有2013年发布的《通用规范汉字表》，一级字变成了3500个，但是似乎没有整理好的文字版

标签: java, 编码, gbk, gb2312
问题：请问如何修改element表头的样式？浏览器页面不显示出应有的样式
本人萌新，最近在使用element中的表格时遇到了一些问题：
请问在浏览器页面修改该表格中的.el-table th,加入background：#f4f4f4 样式能正常显示，但是在项目的style标签中修改再到浏览器页面就不会显示出应有的样式。
以下是代码：
样式：
```
  .el-table th{
        background:#f4f4f4 !important;
        font-size: large;
    }
```
表格：
```
<el-table
          :data="tableData"
          style="width: 100%"
          border>
          <el-table-column
            prop="doc"
            label="文件名称"
            width="290"
            header-align="center"
          >
          </el-table-column>
          <el-table-column
            prop="name"
            label="发起人"
            width="290"
            header-align="center">
          </el-table-column>
          <el-table-column
            prop="situation"
            label="文件状态"
            width="290"
            header-align="center">
          </el-table-column>
          </el-table>
```

回答：您说的项目中，应该是指“组件内”吧？
在组件内使用其它组件的时候，有些样式的设置是无效的。
比如你的test.vue中使用了el-table这个组件，但  .el-table th 这个元素在test.vue中并不存在，而是在el-table这个组件内，那么，你在test.vue 中设置  .el-table th的样式是无效的，这应该跟vue的渲染机制有关。
把.el-table th的样式写到全局的css文件中就好了。

标签: element-ui
问题：求路过前辈指导下小弟学习路线（前端）
```
 小弟前端菜鸟一枚，基础很不扎实，目前断断续续工作了也有半年了，感觉没学到什么东西，反而把知识搞的很乱，现在想自己重新深入学习一遍，由于自己现在东西学的特别乱，十分迷茫，求诸位前辈指点，建议个学习路线，再此写过诸位.
 下面说下我目前会的东西，css,html可以，javascript会用，但不够扎实，css3和html5的东西也差不多可以，bootstrap，jquery，ajax只能说可以简单使用了，还有dojo公司之前也用过，目前正想学习vue看了两天，照着文档可以用，但好多东西根本看不懂。
 真的很是迷乱，求大神指点一条正确学习路线，小弟在此再次写过诸位大神！
```

回答：我的学习过程经历过及个阶段：主要是从断断续续看书以及实践中升级。或许你可以借鉴一下。
- 阶段0：《jQuery基础教程 (第四版)》
- 阶段1：《JavaScript高级程序设计 (第三版)》
- 阶段3：《JavaScript忍者秘籍》
- 阶段4：《Node.js 实战》《HTTP权威指南》《图解TCP IP》《图解HTTP》`不要以为前端不懂通讯协议也行`

- 阶段5：Vue, Webpack, React (直接在官网按照教程学习)
- 
阶段6：自己写一些教程

Vue + Vue-router + Element-ui 搭建一个非常简单的dashboard demo
Vue+ElementUI: 手把手教你做一个audio组件 (ps: 示例音频好好听)


- 阶段7： 开源一些小项目，发布两个npm包

阶段6：自己写一些教程
- Vue + Vue-router + Element-ui 搭建一个非常简单的dashboard demo
- Vue+ElementUI: 手把手教你做一个audio组件 (ps: 示例音频好好听)

我的学习并不是持续的过程，而是断断续续的过程。当然也学到很多其他的东西。当我想学A的时候，我会发现里面有一些有趣的B,C,D可以学习。
总结一下：
- `不要畏惧英文文档，我觉得最好的文档就是官方文档`
- `学习可以不求甚解，渐进式学习`
- `保持对新技术的好奇心，尝试各种新鲜玩意`
- `不要对某个技术特别崇拜`
- `学习要有文档笔记的积累，有个技术博客是不错的加分项`
- 不要认为学好前端就是学好JS, 实际上完全不是如此，你还要掌握HTTP相关知识。例如: OPTIONS预检请求,这里涉及到浏览器的机制，不明白的话，跨域POST时，可能会闹笑话。
- 不要认为前端只是搞前端，有时候后端架构也是要了解的
- ...

另外，编程不是目的。建议阅读以下：`《软技能：代码之外的生存指南》`，`《新生--七年就是一辈子》`。
最重要就是`终身学习，读书，给自己打补丁，升级自己的操作系统。`

标签: javascript, html, html5, css, vue.js
问题：JavaScript数组map方法的疑问[已解决]
问题
一个长度为4空数组
用`map()`给数组元素赋值
为什么新数组还是空的呢?
下面的代码为什么不输出
`[empty × 4]     　　 [2,2,2,2]`
代码
```
var array = new Array(4);
var newArray = array.map(item=>{
    return '2'
});
console.log(array,newArray);
// =>[empty × 4]　　　[empty × 4]
```
解决

回答：什么都没有的数组元素叫做槽(slot)，一般方法都会忽略，可以用 `Array.prototype.fill`、`Array.from` 或者 `[...arr]` 的方式转换。
比如 `Array.from(new Array(4))`

标签: javascript
问题：vue单页面引入cdn
vue单页面应用中需要引入百度地图的三个cdn文件来画图
但是网上都说在index.html加，这样的话会有不必要的加载影响速度，
所以想问怎么只在单个组件里引入这三个文件

回答：封装一个工具函数，比如bmap.js，大致代码如下：
```
export function MP() {  
  return new Promise(function (resolve, reject) {  
    window.onload = function () {  
      resolve(BMap)  
    }  
    let script = document.createElement('script');  
    script.type = 'text/javascript';  
    script.src = 'http://api.map.baidu.com/api?v=2.0&ak=ak&callback=init';  
    script.onerror = reject;  
    document.head.appendChild(script);  
  })  
}  
```
组件中使用：
```
import { MP } from './bmap.js'
export default {
    mounted() {  
       this.$nextTick(function() {  
          const _this = this;  
          MP().then(BMap => {  
              // 其他操作          
          })
        })
    }
} 
```

标签: vue.js, javascript
问题：问一个数据库乐观锁的问题
通常我们采用引入一个version版本号来作为乐观锁，提交的时候校验这个版本号，那么此时有两种方式
方式一，程序中对版本加一，即判断条件为数据库版本小于当前传入的版本：
update set name = ${name} and version = ${version} where id = ${id} and version < ${version}
方式二，通过数据库进行加一，即判断条件为数据库版本等于当前传入的版本：
update set name = ${name} and version = version + 1 where id = ${id} and version = ${version}
请问下，这两种方式有什么不同吗，因为我看几乎所有的乐观锁都是用第二种方式来实现的

回答：结果是一样的，方法二比较好理解点罢了。
很多情况下，乐观锁并不需要version，比如你要UPDATE的是name这一列，那就可以把name当成version，这样就可以写成：
```
UPDATE ... SET name = ${newname} WHERE id = ${id} AND name = ${oldname}

```
我也不知道用方法一该怎么来写呢。

标签: 数据库, mysql
问题：用JS怎样才能正确的得到字符串的长度？
```
var s = '吉林?';
s.length; //4
```
用js输出s.length的是4，但是变量s的字符串的个数是3，如何通过代码准确得到变量 s 的字符串个数（3）？

回答：`s.match(/[\s\S]/gu).length`
主要是正则表达式`u`标志符可以匹配4字节 Unicode 编码。
空字符串要处理一下。。。因为 match 返回 `null`。
正则表达式`u`是ES6的特性，同样的ES6的字符串迭代器也能正确处理 Unicode 编码：`[...s].length`等等写法。
我好奇地跑去 babel 测试了一下，发现了这群大触丧病的 hack：
```
s.match(/[\s\S]/gu)

s.match(/(?:[\0-\uD7FF\uE000-\uFFFF]|[\uD800-\uDBFF][\uDC00-\uDFFF]|[\uD800-\uDBFF](?![\uDC00-\uDFFF])|(?:[^\uD800-\uDBFF]|^)[\uDC00-\uDFFF])/g)
```

标签: javascript, html, html5
问题：JS如何优雅的创建连续元素的数组？
RT, 仅供娱乐，不喜勿喷。
下边是常规的实现方式
```
function ls(count) {
    var a = [], b = 1;
    for (; b <= count; b++)
        a.push(b);
    return a;
}

ls(6);  // [1, 2, 3, 4, 5, 6]
```

回答：```
Array.apply(Array, Array(20)).map((v, k) => k)
```
```
[...Array(20)].map((v, k) => k)
```
```
' '.repeat(20).split('').map((v, k) => k)
```
```
Array.from({ length: 20 }).map((v, k) => k)
```
```
Array.from(function* gen(i, l) {
      while(i < l) yield i++;
}(0, 20));
```
```
Object.keys([...Array(20)]) // 字符串
```

标签: javascript
问题：小白提问：python 在什么时候用函数，什么时候用类？
半路自学的编程小透明，刚刚接触python这门语言。现在有个疑问想请教大家。
我想问的是，大家是如何判断、以及用什么标准来决定什么时候使用函数？什么时候使用类？
函数还好说，一段代码需要重复使用的时候用函数会减少代码量。
但是我遇到了这样一个实例，由于目前思想上更习惯使用面向过程编程，所以在编写下面这个小小爬虫程序的时候就写成了这样的形式：
```
# 任务目标是爬取特定网页上图片列表页面的所有图片。
# 由于是列表页面所以有一个总页数，就使用了 for 循环遍历所有页面，然后下载个页面图片的思路。
# 大致如下

base_url = 'xxx/page='    # 网址忽略了
pages = 90                # 假设一共有 90 页

for page in range(1, pages + 1):          # 首先使用 for 遍历列表的每一页，获取所有的 img 标签
    url = base_url + str(page)
    rq = requests.get(url)
    soup = BeautifulSoup(rq.text)
    all_tag_img = soup.find_all('img')
    
    for tag in all_tag_img:              # 然后在通过 for 遍历所有标签获取下载地址，下载后保存
        img_url = tag.get('src')
        img = requests.get(img_url)
        # 下面就是获取图片的名称，然后保存什么的了
        
```
这样下来的话，流程上面感觉比较接近普通浏览的顺序，
但这是这里用不到函数，更用不到类，但是见到过很多爬虫教程，大家会把例如下载图片、获取名称、保存这些东西封装成函数。有些直接就是创建一个爬虫的类，然后增加各种功能。
所有，问题就是，这样一个任务，你们回去用函数或类么？为什么？
我觉得编程最难的是思想，所有我特别想知道你们是怎么考虑的
万分感谢

回答：个人觉得，其实这个跟你需要完成的任务有关。打个比方，你只是自己想写一个程序，方便自己工作，那你就可以写函数为主，反正自己知道这些函数什么意思，有时候换地方使用直接copy一下，修修改改就好了。
而如果是完成某个大的项目，项目要分很多块，那么就必须写类了。有人说我写个函数，最终实现起来还不是一样？实现起来是一样，那么后期维护呢？你是更喜欢看一个模块，这个模块有几个类，还是说喜欢看几十个函数呢？显而易见，一般稍微有点样子的项目都是分成几个模块，每个模块会分出几个类来各自实现某个特定的任务。到代码层的时候，才会需要看函数的代码。
如果一个项目是由按照某些顺序，直接调用几十个函数完成的，相信后期维护的人会疯吧？好气啊，全是函数，虽然有说明，也很费事的吧？

标签: python, 思维, 思考
问题：Laravel 5.5 中该怎么拦截表单校验失败重定向或者返回JSON的返回格式？
在 laravel 5.1 中 可以在 BaseController 中重写
```
/**
     * {@inheritdoc}
     */
    protected function buildFailedValidationResponse(Request $request, array $errors)
    {
         return new JsonResponse($errors);
    }
```
可以实现拦截`$this->validate($request,$rules,$messages);`方法的自动跳转
现在在 laravel 5.5 中没有了这个方法，现在该怎么修改？

回答：我自己回答这个问题吧，希望以后那些自己不能提出解决方案只会说教别人的嘴炮都闭嘴吧。
一. 仍然使用 控制器 中的`$request->validate($rules);`进行校验，在表单输入不合法的时候，会抛出一个`throw new ValidationException();`错误，可以在`App\Exceptions\Handler`的 `render()`方法中去捕获它
```
        if ($exception instanceof ValidationException) {
                    return new JsonResponse($exception->getMessage());
                }
```
二. 我们不使用 request 对象中的 validate 方法，自己构造一个验证
```
        $validator = Validator::make($request->all(), $rules);
        if ($validator->fails()) {
            return new JsonResponse($validator->getMessage());
        }
```
推荐使用第一个解决方案，仍然可以达到之前的效果，代码修改量也最小。

标签: laravel, php
问题：vue element tab切换两个表格，第一次点切换进来，表格渲染会闪一下，这是什么原因？
vue element tab切换两个表格，第一次点切换进来，表格渲染会闪一下
```
      <el-tabs v-model="activeName">
            <el-tab-pane label="实物" name="first">
                <!--实物表格-->
                <el-table :data="tableData1" border style="width: 100%"  ref="multipleTable" @selection-change="handleSelectionChange">
                    <el-table-column prop="ordergoods" label="活动订单商品" align="center"></el-table-column>
                    <el-table-column prop="consignee" label="收货人信息"></el-table-column>
                    <el-table-column prop="buyeraccount" label="下单人账号" width="150" align="center"></el-table-column>
                </el-table>
            </el-tab-pane>
            <el-tab-pane label="虚拟" name="second">
                <!--虚拟表格-->
                <el-table :data="tableData2" border style="width: 100%" ref="multipleTable" >
                    <el-table-column prop="virtualOrderGoods" label="活动订单商品" align="center"></el-table-column>
                    <el-table-column prop="activationCode" label="激活码" align="center"></el-table-column>
                    <el-table-column prop="validityTerm" label="有效期" align="center"></el-table-column>
                    <el-table-column prop="buyerAccount" label="下单人账号" align="center"></el-table-column>
                    <el-table-column prop="state" label="状态" align="center"></el-table-column>
                </el-table>
            </el-tab-pane>
        </el-tabs>
```
之后再点击切换就是正常的，刷新页面第一次进来的时候会闪

回答：使用`v-if`控制`el-tab-pane`里的内容是可以的，亲测有效
例如`v-if="activeName === 'second'"`
例子详见
https://jsfiddle.net/athena03...

标签: vue.js, element
问题：python写爬虫较node和PHP有什么优势？
## 问题
- 
python 写爬虫较php有什么优势？
python和php的话，都简单易学。python其实内置类型实现上更优雅（都面向对象了），别的有什么优势嘛？
- 
python 写爬虫较node有什么优势？
node模拟js环境方便点，python能做到多线程，别的有什么优势嘛？

回答：都是 `图灵完备` 的语言，不存在什么这语言能做，那语言不能做这种问题，顶多就是实现其实复杂不复杂。
你说的几种语言都有一些良好的抓取库。
Python 爬虫的优势就是
1、名气大，大家都知道
2、大家都是用，贡献代码
以上 2 点良性循环。
难道爬个简单的网页，PHP ，Node 做不到么。

标签: php, node.js, python, python3.x
问题：H5商城项目里关于价格运算是由前端来做还是后端来做？
公众号里的h5商城项目，比如买下选择了三个糖果，点立即购买跳到结算页，结算页有个“合计”多少钱，像这种运算都是把商品价格和数量传给后端再从后端拿到，还是前端自己算出来？不过js浮点运算有精度问题，是都交给后端来算吧？

回答：其实这个问题根本就不用问，因为必须后端算 。并且过程是这样的 。
1、后台加载订单或者商品，这里订单的总价可以是前端算，但是注意精度。
2、当有代金券或者优惠券等减少金额的也可以在前端算 。但是只是提供展示。
3、订单提交，把订单中的商品信息带过去，包括订单金额、优惠券之类都提交过去。
4、后端接到信息后，应该根据订单中有的商品，重新查数据库得到准确的价格，重新计算然后如果有代金券要校验代金券的真实性和有效性，然后再计算总价。这个总价是有意义的，决定着最后支付的金额多少。
5、有人肯定会问、那前端的总金额提交后台有什么用？可以做一个对比，如果计算的结果和前端的总价有区别，那证明这个订单有问题 。要么是页面没刷新，导致商品价格、代金券之类有偏差，可以直接返回到对应的提示页面，告诉用户刷新重新提交订单。另外有可能信息被篡改，那同样的处理，如果是0.01这种，需要记录日志做对应的处理惩罚或者预防 。
手机打字不容易，有帮助请采纳和点赞。?

标签: javascript, html5, node.js
问题：前后端分离项目，你们是怎么控制权限的？
已经做前后端分离 快一年了
技术栈趋向成熟
- vue
- vue router
- vuex
- node
- express
做出来的是单页面应用，但是在权限上一直都有问题。
现在我做权限 是 后台有一套，前端又有重复的一套，麻烦就在这里，
- 只有我对后台有请求的时候，我才知道用户到底有没有这个权限「因为前台的权限，就存在 localSorage 里面，用户可以更改」，如果请求发现没权限，还是前端 router 跳到没权限或者登录页，但是如果这个页面没有请求呢。
- 
因为是一个管理系统，权限特别细，比如某些用户只有这几个目录可以看，其他用户只有那几个目录可以看，但我用的是前端路由，问题又来了。

前端路由一般都是配置好的，我怎么让用户一进来就跳到他自己有权限的页面的第一页。
如果用户直接输入 一个没有权限进入的地址 我该怎么拦截「须知我的拦截其实没有意义，因为页面都在他那里，他只需要改掉我的拦截代码就行」


因为是一个管理系统，权限特别细，比如某些用户只有这几个目录可以看，其他用户只有那几个目录可以看，但我用的是前端路由，问题又来了。
- 前端路由一般都是配置好的，我怎么让用户一进来就跳到他自己有权限的页面的第一页。
- 如果用户直接输入 一个没有权限进入的地址 我该怎么拦截「须知我的拦截其实没有意义，因为页面都在他那里，他只需要改掉我的拦截代码就行」
这里 我现在的解决方案是
- 还是后台传给我 详细的权限，用于我铺设页面，如果这个没有权限，导航上也是没有显示的，但是这样还是可以被更改。
- 
第二个 用户登录 就会跳他能看到页面的第一个。

首先 路由上 是全部都注册好的
请求之后拿到权限，然后根据权限 生成导航数组
然后自动页面跳到导航数组的 第一个
切换页面的时候，都要去根据导航数组判断他是否有这个页面权限。


第二个 用户登录 就会跳他能看到页面的第一个。
- 首先 路由上 是全部都注册好的
- 请求之后拿到权限，然后根据权限 生成导航数组
- 然后自动页面跳到导航数组的 第一个
- 切换页面的时候，都要去根据导航数组判断他是否有这个页面权限。
但是我觉得自己的办法太笨拙，而且还是会被篡改，所以求解答疑惑，谢谢了。

回答：我觉得您的问题应该是不存在的。
后端做了权限控制，无权看到的内容就不会返回了，即使你请求了这个接口。
前端也控制了权限，无权访问的页面，导航中就不会显示了，如果用户自己在前端修改了前端的数据，或者跳过你给的导航，直接通过url访问对应的页面，也应该不会有什么大问题，因为即使他能在前端访问到那个页面，但每个页面都有对应的内容（数据），显示内容的时候是需要请求后端的，后端没有权限，打开页面也只能是空白。
你只要后端做好了权限控制，前端无论怎么改也应该是不能获取到自己没有权限的内容的。
从数据安全的角度来说，前端可以完全不使用权限控制；如果你那里做不到这点的话，那么，你后端的权限控制肯定是有问题的。
前端的权限控制只是为了给用户更好的体检；并不是真的拿来控制权限的。

标签: javascript, vue.js, html5, 前后端分离
问题：报错！Cannot assign to read only property 'exports' of object
```
export default {
    data(){
        return {
            currentPage: 'findMusic',
            currentCut: 'discover',
        }
    },
    name: 'home',
    components: {
        headTop
    },
    mounted(){
         new Swiper('.swiper-container', {
            loop: true,
            autoplay: 3000,
            autoHeight: true,
            grabCursor: true,
            prevButton: '.swiper-button-prev',
            nextButton: '.swiper-button-next',
            pagination: '.swiper-pagination',
        });
    }
}
```
```
import '../plugins/swiper-3.4.2.min.js'
import '../styles/swiper.min.css'
```
```
<div class='swiper-container'>
            <div class='swiper-wrapper'>
                <div class='swiper-slide'><img src='../assets/slide/slide1.jpg'/></div>
                <div class='swiper-slide'><img src='../assets/slide/slide2.jpg'/></div>
                <div class='swiper-slide'><img src='../assets/slide/slide3.jpg'/></div>
                <div class='swiper-slide'><img src='../assets/slide/slide4.jpg'/></div>
                <div class='swiper-slide'><img src='../assets/slide/slide5.jpg'/></div>
                <div class='swiper-slide'><img src='../assets/slide/slide6.jpg'/></div>
            </div>
            <div class='swiper-pagination'></div>
            <div class='swiper-button-prev swiper-prev'></div>
            <div class='swiper-button-next swiper-next'></div>
        </div>
```
网上搜索，说的是 import 和 module.export不能混用，可是我这里没有混用啊。。。晕，麻烦简单直接地回答一下就行

回答：需要引入插件 babel-plugin-transform-es2015-modules-commonjs
然后在 .babelrc中配置 { "plugins": ["transform-es2015-modules-commonjs"] }

标签: javascript, vue.js, vue-router, webpack, swiper.js
问题：python的for循环同时遍历两个list?
```
b = [1, 2, 3]
c = [(10, 20), (30, 40), (50, 60)]

for i, j in b, c:
    print(i, j)

```
```
ValueError: too many values to unpack (expected 2)
```
```
b = [1, 2]
c = [(10, 20), (30, 40)]

for i, j in b, c:
    print(j)
```
```
2
(30, 40)
```
这输出到底是怎么回事啊, 不能这么遍历吗...
为什么我印象中有这种用法呢...
`dict.items()` 就能用:
```
for key, value in x.items()
```
遍历..

回答：當你寫出 `b, c` 的時候, Python 會以為你要製造一個 tuple, 所以:
```
for i, j in b, c:
```
相當於:
```
for i, j in (b, c):
```
當 `b = [1, 2, 3]` 且 `c = [(10, 20), (30, 40), (50, 60)]` 時就相當於:
```
for i, j in ([1, 2, 3], [(10, 20), (30, 40), (50, 60)]):
```
所以第一個迭代到的對象是 `[1, 2, 3]`, 而這個 list 有三個元素自然是無法拆解成兩個變量 `i` 和 `j` 的。
但如果 `b = [1, 2]` 且 `c = [(10, 20), (30, 40)]`，則相當於:
```
for i, j in ([1, 2], [(10, 20), (30, 40)]):
```
第一個迭代到的對象是 `[1, 2]`, 該 list 有兩個元素恰能 unpack 為 `i` 和 `j`，所以下面的語法是能夠順利運行的。
回到你的需求，若要平行迭代兩個 list，你需要的是 `zip` 或 `zip_longest`，你可以參考 @Python爬虫分享 的範例。
我回答過的問題: Python-QA

标签: for循环, python3.x, python
问题：gulp和webpack究竟有什么区别？
我学了这两款工具之后，发现他们做的事情基本上都是一样的啊，比如说整合好几个js文件（模块）成一个文件，然后进行压缩和检查语法，或者调用bable和sass编译器把他们编译成浏览器可以用的文件，包括gulp的watch在webpack里面也有插件可以实现这个功能，那么他们区别究竟是什么呢？
我百度了半天，很多人只是从用法上说了他们的区别，webpack是写好配置文件，然后webpack自己按照配置文件来执行前端构建流程，而gulp是直接自己写流程，就像linux下写sh那样，那么这只是用法上的区别，从他们的执行结果和功能来看我看不出啥区别啊。。。

回答：Gulp 的定位是 Task Runner, 就是用来跑一个一个任务的。
放在以前比如我想用sass写css, coffee写js, 我必须手动的用相应的compiler去编译各自的文件，然后各自minify。这时候designer给你了两张新图片，好嘞，接着用自己的小工具手动去压缩图片。
后来前端人不能忍了，搞出个自动化这个流程的 Grunt/Gulp, 比如你写完代码后要想发布production版本，用一句 `gulp build` 就可以
1. `rm` 掉 dist文件夹中以前的旧文件
2. 自动把sass编译成css, coffee编译成js
3. 压缩各自的文件，压缩图片，生成图片sprite
4. 拷贝minified/uglified 文件到 dist 文件夹

但是它没发解决的是 js module 的问题，是你写代码时候如何组织代码结构的问题.
之前大家可以用 require.js, sea.js 来 require dependency, 后来出了一个 webpack 说 我们能不能把所有的文件(css, image, js) 都用 js 来 生成依赖，最后生成一个bundle呢？  所以webpack 也叫做file bundler. 

同时 webpack 为了解决可以 require 不同文件的需求引入了loader, 比如面对sass文件有
1. sass-loader, 把sass 转换成 css
2. css-loader, 让 webpack 能识别处理 css
3. style-loader, 把识别后的 css 插入到 html style中
类似的识别es6 有babel-loader

本来这就是 webpack 的初衷，require everything, bundle everything. 一开始 webpack 刚出来的时候大家都是把它结合着 gulp 一起用的， gulp 里面有个 gulp-webpack，就是让 webpack 专门去做module dependency的事情, 生成一个bundle.js文件，然后再用 gulp 去做一些其他杂七杂八minify, uglify的事情。 后来人们发现 webpack 有个plugins的选项， 可以用来进一步处理经过loader 生成的bundle.js，于是有人写了对应的插件， 所以minify/uglify, 生成hash的工作也可以转移到webpack本身了，挤掉了gulp这部分的市场份额。 再后来大家有发现 npm/package.json 里面的scripts 原来好好用啊，调用任务的时候就直接写一个简单的命令，因为 gulp 也不就是各种插件命令的组合呀，大部分情况下越来越不需要 gulp/grunt 之类的了 ref. 所以你现在看到的很多新项目都是package.json里面scripts 写了一堆，外部只需要一个webpack就够了。 

打个不恰当的比方，webpack就像微信一样，本来就是做聊天(module dependency)的，后来生生搞出一个微信小程序(processing files)，大家面对简单的需求发现这个比原生app方便使用啊，于是开发原生的人越来越少一样。

所以 LZ 一开始就模仿其他项目用 npm scripts + webpack 就好了，当你发现有哪些任务你没法用 webpack 或者npm scripts 解决起来麻烦， 这个时候再引入task runner 也不迟

标签: node.js, css, javascript, html5, html
问题：vue项目如何引入babel-polyfill 
babel-pollyfill 官方说的是：
```
With webpack.config.js, add babel-polyfill to your entry array:
```
```
With webpack.config.js, add babel-polyfill to your entry array:
module.exports = {
  entry: ["babel-polyfill", "./app/js"]
};
```
但是项目没有webpack.config.js， 倒是有 build/webpack.base.conf.js。 但是里面的结构为：
```
module.exports = {
  entry: {
    app: './src/main.js'
  },
  output: {
    path: config.build.assetsRoot,
    filename: '[name].js',
    publicPath: process.env.NODE_ENV === 'production'
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath
  }
...
```
entry: ["babel-polyfill", "./app/js"]  该怎么加进去呢？

回答：main.js 里面引入
```
import 'babel-polyfill'
```
webpack.base.conf.js 替换到entry部分
```
  entry: {
    // app: './src/main.js'
    app: ["babel-polyfill", "./src/main.js"]
  },
```
注意：多试一下，清空缓存，多试试，我也是捣鼓捣鼓才可以的

标签: vue.js, babel
问题：vue组件created中创建的setInterval定时器，离开页面之后仍然在执行，怎么让它停止下来，等下次进来的时候再执行？
如果离开页面还在执行，那么以后每次点击进来岂不是都会重新执行setInterval创建一个定时器？

回答：解决办法如下：
```
data: {
    return {
        timer: null
    }
},
created() {
    this.timer = setInterval(....);
},
beforeDestroy() {
    if(this.timer) { //如果定时器还在运行 或者直接关闭，不用判断
        clearInterval(this.timer); //关闭
    }
}
```

标签: vue.js
问题：iView中Table通过render添加一个Input如何双向绑定数据
有一个Table：
```
<Table :columns="columns" :data="data" :border="true"></Table>
```
JS代码如下：
```
 export default {
        data(){
            return {
                columns:[],
                data:[{name:11111,name2:'加工精度',value:'',key:''}]
            }
        },
        created(){
            this.init();
        },
        methods:{
            init(){
                let vm = this;
                this.columns = [
                    {
                        title: '序号',
                        key: 'name'
                    },
                    {
                        title: '检验项名称',
                        key: 'name2'
                    },
                    {
                        title: '检验值',
                        key:'value',
                        render: (h, params) => {
                            return h('Input',{
                                props:{
                                    type:'text',
                                    value:vm.data[params.index].value //此处如何让数据双向绑定
                                },
                                on:{
                                    'on-change':(event) => {
                                        console.log(params)
                                    }
                                }
                            })
                        }
                    },
                    {
                        title: '检验结论',
                        key:'key',
                        render: (h, params) => {
                            return h('Select',[
                                h('Option', {
                                    props: {
                                        value: '1',
                                    }
                                }, '合格'),
                                h('Option', {
                                    props: {
                                        value: '2',
                                    }
                                }, '不合格')
                            ]);
                        }
                    },
                ]
            },
            get(){
                console.log(this.data)
            }
        }
    }
```

回答：```
render: (h, params) => {
                            return h('Input',{
                                props:{
                                    type:'text',
                                    value:vm.data[params.index].value
                                },
                                on:{
                                    'on-blur':(event) => {
                                        vm.data[params.index].value = event.target.value;
                                    }
                                },
                            })
                        }
```
通过这个方法可以解决

标签: vue.js, iview, node.js
问题：vue watch怎样同时监听两个值的变化并执行方法？
```
watch:{
      city(cur,old){
          this.loadTop();
      },
      country(cur,old){
//        this.loadTop();
      },
    }
```
如上，我想在城市和国家都变化的时候执行刷新的方法，而不是单一执行刷新

回答：用computed定义一个address对象吧，然后再去watch addres
```
data() {
  return {
    city: '',
    country: ''
  }
},
computed: {
  address() {
    const { city, country } = this
    return {
      city,
      country
    }
  }
},
watch: {
  address: {
    handler: function(val) {
      console.log('address change: ', val)
    },
    deep: true
  }
}

```
只的在computed里面调用也行，不过要使用$nextTick，不然值会是更新前的值。
```
data() {
  return {
    city: '',
    country: ''
  }
},
computed: {
  address() {
    const { city, country } = this
    this.$nextTick(() => {
      console.log(this.city, this.country, 3333)
    })
    return {
      city,
      country
    }
  }
},
```

标签: vue.js, watch, javascript
问题：vue怎么在beforeCreate里获取data
被问的一个面试题：vue怎么在beforeCreate里获取data

回答：1. 异步方式获取data。this.$nextTick或者setTimeout都行。相当于在初始化前告诉容器，等全执行完了再跑里面的代码。 这种方式别说拿data了，拿渲染完DOM都OK~
2. 同步方式的话，是要了解框架内部原理的。在beforeCreate前，所有的options都会先存到`vm.$options`中，在beforeCreate之后，将`$options`里的data啦，props啦，methods啦等等一个个附到vm上，然后再触发created钩子。所以在beforeCreate的时候，通过this.message是拿不到值的，在created的时候就能通过this.message拿到值了。

一定要在beforeCreate的时候就同步去拿data里的值的话，就是直接从`this.$options.data`里去拿。如果data中的初始值是简单的string，那直接`this.$options.data()["message"]`就好.涉及到复杂点的情况，建议看看源码里是怎么处理的，具体在core/instance/state.js中的initData(vm)里。
但是实际情况中从来没遇到过需要在组件还没初始化就去拿data的……

标签: vue.js
问题：redis连接池问题
比如就一个服务A，部署在服务器1上。
redis部署在服务器2上。

为什么还会需要redis连接池这个东西？我在服务A上维护一个全局变量的redis连接实例，前端请求过来我都是用这个连接实例去执行redis指令，不也可以吗？

 redis连接池，无非就是高并发的时候可以支持多个redis连接实例去连接redis，但是redis本身就是单线程的，我多个连接同时去连redis（不还是得排队么），然后执行指令，和我单个全局连接直接去一个个执行redis指令，感觉应该差不多性能吧？

而且如果是全局单个redis连接的话，每次请求过来我还省了连接这个操作，不是又省了点时间么？

回答：您的说法并不正确。

1. redis本身是单线程的没有问题，但这并不表示，使用连接池不能提供效率，只是不能通过多线程提高效率而已。
2. redis连接池较单链接的效能提高很多。要了解为什么redis连接池能够这么大幅的提高性能，就要了解单链接的性能瓶颈在哪。
单线程并 不是redis性能瓶颈。对redis而言，有两个性能所在（一个是计算性能，也就是所谓的执行命令速度，另一个是网络通信性能）。很显然，redis较执行效率而言，通信才是其瓶颈。据我所知（不一定正确，但也相差无几），redis执行命令大概是10w/s，因此，对于客户端 将若干条（若干条显然不会很大）命令传输给redis服务，命令执行时间和通信时间比等于0.(假设以1s举例，几条命令传输时间为40ms, 而每秒可执行10w个命令，即n/10w 秒就可执行完毕，等待下一个命令到来的时间间隙(约39ms多)redis没有任何命令执行)，这就造成了redis闲置。
综上，要提高redis的性能，可以降低单位时间内的通信成本。那么连接池就是一个不错的选择。
客户端使用连接池+多线程方案，使得使得redis服务闲置时间降低，极大地提高了服务效率。

标签: redis, 服务端
问题：return 对代码可读性的影响
在函数中，是否应该控制尽量少的 `return` 出口？
比如 （以 `PHP` 代码举例）：
```
<?php

/**
 * 控制尽量少的退出点
 */
function foo1($var)
{
    try {
        if (empty($var)) {
            throw new \Exception('emty var');
        }

        if (!is_string($var)) {
            throw new \Exception('var must be string');
        }

        return sprintf("input-var:%s \n", $var);
    } catch (\Exception $e) {
        return sprintf("error:%s \n", $e->getMessage());
    }
}

/**
 * 不控制，可以结束的时候直接 return
 */
function foo2($var)
{
    if (empty($var)) {
        return 'error:empty var' . PHP_EOL;
    }

    if (!is_string($var)) {
        return 'error:var must be string' . PHP_EOL;
    }

    return sprintf("input-var:%s \n", $var);
}

```
### 常见观点
#### 正面：应该控制
- 过多的 `renturn`，增加了函数出口点，不利于代码阅读
#### 反面：没必要
- 多个 `return` 也没什么，类似 `try-catch` 在效率上有所损失，尽量少用
#### 中立
- 两种写法只是跟人风格问题，没有优略
- 短函数多个 `return` 无伤大雅，但是长函数中，会严重降低可读性
欢迎留下你的观点。
我的观点：
无论是短函数还是长函数，都尽量控制一下 `return` 点，因为短函数随着迭代可能会变成长函数。
而且多个 `return` 会明显降低长函数的可读性。
对于 `try-catch` 结构，在性能上的一丁点牺牲，换来的可读性提升，是值得的。

回答：观点与你相反，函数中要尽可能多的使用 return 来控制，因为 return 从设计上来说就是这个功能，表示执行权限的移交。这样不会造成任何执行权限的问题。所谓函数，从设计之初，核心就是计算和返回。
滥用 try catch 会导致上级 try catch 无法正确捕获异常
语义化上来说，return 也比 try catch 更加清晰明了。

标签: php, java, go, 可阅读性好, 架构
问题：@Service是标记在接口上还是实现类上？
@Service是标记在接口上还是实现类上？

回答：`@Service`注解是标注在实现类上的，因为`@Service`是把`spring`容器中的`bean`进行实例化，也就是等同于`new`操作，只有`实现类`是可以进行`new`实例化的，而`接口`则不能，所以是加在`实现类`上的。

标签: spring, spring-mvc, java
问题：webpack(config,function(){}) , 这个函数的第二个参数有什么作用？
```
var webpack = require('webpack')
var webpackConfig = require('./webpack.config.js')

webpack(webpackConfig, function(err, stats) {
    process.stdout.write(stats.toString({
        colors: true,
        modules: false,
        children: false,
        chunks: false,
        chunkModules: false
    }))
    
})
```
请问webpack(config,function(){}) 这个函数的第二个函数里面的内容有什么作用？

回答：对打包的配置化，如果打包的时候有错误我们就抛出错误，我们可以在webpack()回调里拿到一个stats打包状态，process.stdout.write跟console.log一个意思因为在node环境里console.log也是用process封装的就是向cli里打印输出。但是输出的时候进行了一些格式化。 colors ： 让打包的时候有颜色。 module  : 去掉内置模块信息 children ：去掉子模块 chunks : 增加包信息（设置为 false 能允许较少的冗长输出）chunkModules : 去除包里内置模块的信息

标签: webpack
问题：esLint里no-case-declarations的意义在哪
官网的解释：The reason is that the lexical declaration is visible in the entire switch block but it only gets initialized when it is assigned, which will only happen if the case where it is defined is reached.
没怎么看懂

回答：有中文网站 no-case-declarations
为了保证词法声明语句只在当前 `case` 语句中有效，将你子句包裹在块中。  
该规则旨在避免访问未经初始化的词法绑定以及跨 `case` 语句访问被提升的函数。
```
switch (foo) {
    case 1:
        let x = 1;
        break;
    case 2:
        const y = 2;
        break;
    case 3:
        function f() {}
        break;
    default:
        class C {}
}
```
大概是指上面`case 1`里的`x`在`case 2`里也会生效，所以要用`{}`包起来，防止`x`提升到整个`switch`语句。

标签: javascript, eslint, vue.js
问题：锤子科技官网banner的动效是如何实现的？
锤子科技官网banner的动效是如何实现的呢？就是图片随鼠标的轨迹移动的动效。以及上方图片文字动效。是CSS3吗？
地址：https://www.smartisan.com/

回答：```
<style type="text/css">
    .content{
        margin:200px auto;
        width:200px;
        height:200px;  
        background: #db473c;  
        color:#fff;   
    }
    .container {
        transform-style: preserve-3d;
        perspective: 500px;
    }
    </style>
    <div class="container">
    <div class="content"></div>
    </div>
    <script type="text/javascript">
        (function(){
            var content=document.querySelector(".content")
                content.onmousemove=function(e){
                    var evt=e||window.event;
                    var rotateY=-(content.clientWidth/2-evt.offsetX)/10;
                    var rotateX=(content.clientHeight/2-evt.offsetY)/10;
                    content.style.transform=`rotateX(${rotateX}deg) rotateY(${rotateY}deg)`
                }
        }
        )()
        
    </script>
```

标签: javascript, html5, css, html, 前端
问题：js数组重组
现在有一个数组类似于
var a=[{name:"May",age:12,id:1},{name:"Jone",age:13,id:5},{name:"May",age:15,id:6}];
要把所有name相同的对象重组，大概成为这样的数组
var b = [{
```
name: "May",
list: [{
    name: "May",
    age: 12,
    id: 1
}, {
    name: "May": age: 15,
    id: 6
}]
```
}, {
```
name: "Jone",
list: [{
    name: "Jone",
    age: 13,
    id: 5
}]
```
}]

回答：```
const a = [{ name: "May", age: 12, id: 1 }, { name: "Jone", age: 13, id: 5 }, { name: "May", age: 15, id: 6 }]

let result = Object.values(a.reduce((m, n) => {
    if (!m[n.name]) {
        m[n.name] = {name: n.name, list: []}
    }
    m[n.name].list.push(n)
    return m
}, {}))

console.log(result)
```

标签: ecmascript-6, javascript
问题：CSS3如何查看获取scale缩放后的元素宽高？
代码如下：
```
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>text</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- <link href="css/style.css" rel="stylesheet"> -->
        <style type="text/css">
            *{
                margin:0;
                padding: 0;
            }
            html,body{
                height: 100%;
                width: 100%;
            }
            .fa{
                height: 100%;
                background-color:green;
            }
            .small{
                width: 100px;
                height: 100px;
                background-color: red;
            }
        </style>
    </head>
    <body>
        <div class="fa">
            <div class="small"></div>
        </div>
        <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                var faH=$(".fa").height();
                var faW=$(".fa").width();
                var smH=$(".small").height();
                var smW=$(".small").width();
                console.log("父盒子的高度:"+faH);
                console.log("父盒子的宽度:"+faW);
                var overviewheight=100;
                var overviewwidth=100;
                var scaleY=faH/overviewheight,
                    scaleX=faW/overviewwidth;
                console.log("Y的比例:"+scaleY+" X的比例:"+scaleX);
                $(".small").css("transform","scaleY("+scaleY+")"+"scaleX("+scaleX+")");
                console.log("子盒子的高度:"+smH);
                console.log("子盒子的宽度:"+smW);
            })
        </script>
    </body>
</html>
```
scale属性设置后，盒子还是占用原来的宽高，但实际上大小已经发生了变化，我试过用`getBoundingClientRect()`方法，发现获取到的数值不是这个元素的，不准确。
请问有更好的方法吗？

回答：我也遇到了这样的问题,解决方法是通过getBoundingClientRect()方法.
比如:
-js代码如下
```
    let Div = document.getElementsByTagName('div')
    Div.getBoundingClientRect().width;//获取div放大(缩小)后的宽度
    Div.getBoundingClientRect().height;//获取div放大(缩小)后的高度
```
-css代码如下
```
div {
  width: 100px;
  height: 100px;
  background: #ccc;
  text-align: center; 
  line-height: 100px;    
  -webkit-transform: scale(2);
}
```

标签: css
问题：怎么通过点击事件关闭Element ui 的Notification 通知
点击打开弹出通知，点击关闭怎么关闭通知？
```
<div>
    <el-button plain @click="open">打开</el-button>
    <el-button @click="close">关闭</el-button>
</div>

methods: {
            open() {
                this.$notify({
                    title: '提示',
                    message: '这是一条不会自动关闭的消息',
                    duration: 0
                });
            },
            close() {
                this.$notify.close()
            }
        }
```

回答：this.$notify 会返回当前 Notification 的实例
```
methods: {
            open() {
                this.instance = this.$notify({
                    title: '提示',
                    message: '这是一条不会自动关闭的消息',
                    duration: 0
                });
            },
            close() {
                this.instance.close()
            }
        }
```

标签: element-ui
问题：用script的方式引入vue的情况，怎么impor其他的.vue文件作为组件使用？
因为项目需要，构建项目时候使用传统的多页方式，我的vue也是通过script方式来引入的，没有使用构建工具，但我之前写的.vue文件怎么引入到现在的项目中呢？直接import也不行，求解

回答：目前我司项目有这种情况, 传统多页项目, 有许多公共样式我通过封装组件引用的, 比如:
`header.js`
```
var headerTemplate = '<div> header HTML 代码</div>'
Vue.component('my-header', {
    template: headerTemplate,
    data: xxx,
    methods: {}
    // ...
})

```
通过 `script`标签引入 `header.js`, 然后在 header.html 内就可以使用了, 比如:
```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="vue.min.js"></script>
    <script src="header.js"></script>
</head>
<body>
    <div id="main">
        <my-header></my-header>
    </div>


    <script>
        new Vue({
            el: '#main'
        })
    </script>
</body>
</html>
```
希望可以帮助到你

标签: vue.js
问题：小程序里如何使页面自动滚动到底部？
在更新数据后，以及初次进入页面，希望页面停留在最底部；
因为内容中有video，不能使用scroll-view来实现，看页面有监听滚动的函数，但没有控制滚动的，那么，怎样可以实现呢？

回答：```
// 获取容器高度，使页面滚动到容器底部
  pageScrollToBottom: function() {
    wx.createSelectorQuery().select('#j_page').boundingClientRect(function(rect){
      // 使页面滚动到底部
      wx.pageScrollTo({
        scrollTop: rect.bottom
      })
    }).exec()
  },
```
- 
`j_page`为页面容器的id
- 使用`rect.bottom, rect.height`均能达到滚动到底部的效果
- 在数据更新后（setData回调函数）使用

相关api文档：
https://mp.weixin.qq.com/debug/wxadoc/dev/api/scroll.html
https://mp.weixin.qq.com/debug/wxadoc/dev/api/wxml-nodes-info.html#nodesrefboundingclientrectcallback

标签: 小程序, 微信小程序, 页面滚动
问题：数据库SQL查询问题，一道面试题，查了好久也没搞定，来SF求助
数据库中有张表，
表的定义为name, address,arrive_time,
数据为 
张三，北京，10：00 ; 
张三 ，河北，12:00 。
怎么查询显示结果为 张三， 北京 河北， 12:00

回答：```
SELECT name, GROUP_CONCAT(DISTINCT address SEPARATOR ' ') AS address, max(arrive_time) AS arrive_time
FROM mytable
GROUP BY name

```

标签: mysql, sql, redis, oracle, sqlserver
问题：react设置多个className
在一个元素上设置样式，有一个固定的样式，然后还有一个使用三元运算符根据条件添加的样式。
```
比如说有一个固定样式"title":
<div className="title">标题</div>，
然后还要一个点击高亮的样式:
<div className={index === this.state.active ? "active" : null}>标题</div>
不能这样写：
<div className="title" className={index === this.state.active ? "active" : null}>标题</div>
```
那多个样式，有字符串，有表达式，应该怎么写到一起？

回答：ES6 模板字符串 ``
```
className={`title ${index === this.state.active ? 'active' : ''`}
```
或
`classnames`
参照：classnames

标签: react.js
问题：vue这个三个点（...mapGetters）为什么要把computed转换成数组
```
<script>
  import { mapGetters } from 'vuex'
  export default {
       computed: {
        ...mapGetters({    //不理解为什么要把这个computed的内容转成数组
          goods_list: 'goods_list',
          userInfo:'userInfo'
        })
    },  }
</script>
```

回答：```
mapGetters({ 
  goods_list: 'goods_list',
  userInfo:'userInfo'
});
```
这种写法跟下面的写法是等价的。为了写的更简单一目了然
当映射的计算属性的名称与 state 的子节点名称相同时，我们也可以给 mapState 传一个字符串数组。
```
mapGetters([
  // 映射 this.goods_list 为 store.getters.goods_list
  'goods_list',
  // 映射 this.userInfo 为 store.getters.userInfo
  'userInfo'
])

```
... 是es6的数组扩展运算符，可以同时写多个，例如：
```
computed: {
    ...mapGetters([ 'goods_list','userInfo']),
    ...mapGetters({
        // 映射 `this.doneCount` 为 `store.getters.doneTodosCount`
        doneCount: 'doneTodosCount'
    })
}
```

标签: javascript, vue.js
问题：VSCode中使用vetur插件格式化vue文件时，js代码会被添加上分号且单引号会转变为双引号
由于vetur插件报错找不到某某组件，于是卸载重装。 装回后插件不再报错，但是格式化vue代码时，会执行两条多余的规则（与未重装之前比较）：
- 自动为js代码加上分号结束符
- 自动将单引号变换为双引号
由于在配置（setting.json）中未找到相应的配置，故很疑惑，应如何取消掉以上两条规则？
2018/11/29 更新
```
//VSCODE扩展当前时间的最新版
vscode version： 1.29.1
prettier version: 1.7.2
vetur version: 0.14.2

```
也会出现上述问题，解决办法：修改 User Settings
```
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      // force-aligned | force-expand-multiline
      "wrap_attributes": "force-aligned"
    },
    "prettyhtml": {
      "printWidth": 100,
      "singleQuote": false,
      "wrapAttributes": false,
      "sortAttributes": true
    },
    // --- 解决问题 ---
    "prettier": {
        "semi": false,
        "singleQuote": true
    }
    // --- 解决问题 ---
  },
```

回答：这是因为在VSCode`1.7.2`中替换了内置格式化插件。解决办法是在VScode设置(setting.json)中，配置如下规则
```
{
   "prettier.singleQuote": true,
   "prettier.semi": false,
   "vetur.format.defaultFormatter.html": "js-beautify-html",
   "vetur.format.defaultFormatterOptions": {
      "wrap_attributes": "force-aligned"
    }
}
```
即可解决您的问题。详情见https://github.com/vuejs/vetur/issues/476

标签: visual-studio-code, vue.js
问题：python 列表生成式怎么理解？
```
z=[x if x%3==0 else x%5==0 for x in range(1,9) ]
print(z)
```
[False, False, 3, False, True, 6, False, False]
为什么5的地方是True,而不是显示5？这个语法怎么理解比较好？怎样翻译成一个个具体的instruction来理解？

回答：你的代码等效于下面的这一段代码：
```
z = []
for x in range(1,9):
    if x%3 == 0:
        z.append(x)
    else:
        z.append(x%5 == 0)

print(z)

```
这样就应该很清楚了吧。。

标签: python
问题：在方法内部throw异常，必须要同时在方法头部声明throws吗？
下面节选自类 JSONObject:
```
public String getString(String key) {
    this.verifyIsNull();
    Object o = this.get(key);
    if(o != null) {
        return o.toString();
    } else {
        throw new JSONException("JSONObject[" + JSONUtils.quote(key) + "] not    found.");
    }
}
```
以上直接抛出异常，而没有在方法头部声明throws。
但是我自己写的方法中，是同时有throw和throws的。去掉throws就会报错：
Unhundled Exception 。
这是为什么？

回答：java异常一般分为`Checked`异常和`Runtime`异常，所有`RuntimeException`类及其子类的实例被称为`Runtime`异常，不属于该范畴的异常则被称为`CheckedException`。
Java认为`Checked`异常都是可以被处理的异常，所以Java程序必须显示处理Checked异常。如果程序没有处理`Checked`异常，该程序在编译时就会发生错误无法编译。
而`RuntimeException`异常如果没有显示的捕获处理则由系统自动检测并将它们交给缺省的异常处理程序。
`JSONException`应该是`RuntimeException`的子类，可以不用显式的对它try...catch或者throws.如果没有对该异常的处理会交给jvm处理。
而你自己写的异常肯定是属于Checked异常，被认为是可以避免的异常，必须try...catch或者显式的抛出throws不然编译报错。如果你自定义的异常想像`throw new JSONException`这样处理，则你自定义的异常需要继承`RuntimeException`即可。

标签: java
问题：PHP可变长参数(...)和生成器问题
问题是关于向redis快速插入大量数据。我使用了1百万个元素数组来插入，在我这里是内存溢出的，所以我使用了生成器的方式
```
function xrange() {
        for ($i=0; $i<1000000; $i++) {
                yield $i;
        }
}
$r = xrange();

$redis = new Redis();
$redis->connect('127.0.0.1', 6379);

$key = 'jimu';
$redis->del($key);
$begin = microtime(true);
$redis->sadd($key, ...$r);

$end = microtime(true);
echo ($end - $begin) . "\n";
```
输出结果：
```
[vagrant@localhost ~]$ php redis.php 
1.2786898612976
[vagrant@localhost ~]$
```
然后redis-cli中确实有了一百万个元素。那么当我把代码中的一百万修改为一千万的时候又报内存溢出
```
[vagrant@localhost ~]$ php redis.php 
PHP Fatal error:  Allowed memory size of 134217728 bytes exhausted (tried to allocate 32 bytes) in /home/vagrant/redis.php on line 6

Fatal error: Allowed memory size of 134217728 bytes exhausted (tried to allocate 32 bytes) in /home/vagrant/redis.php on line 6
```
根据我理解的生成器知识不应该出现内存溢出的情况。因为自始至终生成器xrange只占用一个变量`($i)`内存?
所以我猜测是不是`$redis->sadd($key, ...$r);`这一步的时候`...$r`依然会解析成大数组。 现在不知道如何证实。
补充：
我在`sadd`之前使用`var_dump(...$r);exit;`发现输出的都是
```
int(999775)
int(999776)
int(999777)
int(999778)
int(999779)
int(999780)
int(999781)
```
这样可以证明生成器确实是一个一个产出值的。那么为什么将...$r传入到sadd()的时候还报内存不足呢？不明白这个`...`的原理，还请大佬们指点。

回答：a. 这个问题和redis毫无关系
b. 上代码
```
<?php
//splat.php
function gen() {
  global $argv;
  $max = $argv[1];
  while($max--) {
    yield(str_repeat('x', 10000));
  }
}

function noop() {

}

function getargs() {
  $arg = func_get_args();
}

function splat(...$arg) {

}

function printmemory($msg) {
  printf("%s: %d/%d\n", $msg, memory_get_usage(), memory_get_peak_usage());
}

printmemory(__LINE__);
$gen = gen();
printmemory(__LINE__);
foreach(gen() as $r) {
  crc32($r);
}
printmemory(__LINE__);
$argv[2](...$gen);
printmemory(__LINE__);
```
```
~/Desktop $ php splat.php 10000 getargs
27: 357896/394272
29: 358504/394272
33: 370816/394272
35: 382912/123779064
~/Desktop $ php splat.php 10000 noop
27: 357896/394272
29: 358504/394272
33: 370816/394272
35: 382912/123250912
~/Desktop $ php splat.php 10000 splat
27: 357896/394272
29: 358504/394272
33: 370816/394272
35: 382912/123779064
~/Desktop $ php splat.php 1000 splat
27: 357896/394272
29: 358504/394272
33: 370816/394272
35: 382912/12695544
~/Desktop $ php splat.php 100 splat
27: 357896/394272
29: 358504/394272
33: 370816/394272
35: 382912/1607672
```
c. 解释

27-29-33之间，几乎没有内存占用，这是所谓的"生成器节省内存”的现象，也就是各种相关文章里都会解释的，在30行迭代生成器的时候，每次循环都会进到生成器内部去yield一次，产生一个大字符串，下次循环的时候循环变量又重新被赋值，之前的字符串自然会被GC回收，所以无论循环多大多少次，占用的内存是稳定的（包括上面的`$gen=gen()`也是几乎不占内存的）

33-35，无论被调用的函数如何，甚至noop函数，都一样会占用大量内存，占用内存的量明显和次数成正比，也就是说生成器的内容被合并到一起而占用了一整块内存。这其实很容易解释，几乎的所有语言“调用函数”的过程都是类似的
1. 首先计算所有参数，形成参数列表
2. 生成call frame（其中包含调用被调双方、文件行号、参数列表等等信息），压入call stack中
3. 控制权移交给函数内部（当然省略了超级多的细节，比如实参形参的映射/copy啊，内存管理啊等等什么的，和本题无关）
`...$args`这个操作符其实影响的就是第一个阶段，计算参数的时候，看到...操作符，就需要展开其中的参数来形成参数列表，那么用生成器的场合，这个阶段内存就从原有生成器的少量占用变成了完整的占用了，所以即使是空的`noop`函数也会占用几乎一样多的内存，你的理解是正确的

回到原题的那个redis问题的话，因为重复调用redis方法一定会占用大量的额外网络开销，而一次性批量插入又铁定逃不开内存占用（其实你想redis扩展要发送这个批量的指令给redis，那么这块内存肯定是要的），比较好的方式就是分组了，每1000个或者10000个合并成一次$redis调用，mysql也好其他场景也是类似的

标签: redis, php
问题：一道js面试题
```
for(var i=0; i<10; i++){
  setTimeout(function() {
    console.log(i);
  },0)
}
```
请问输出什么？
如果要输出'0123456789'，要怎么改？

回答：推荐将 `var` 替换为 `let`，拥抱 es6 吧。
```
for(let i=0; i<10; i++){
  setTimeout(function() {
    console.log(i);
  },0)
}
```
这里简单说明一下为什么如此替换会有效。
1. 
`var` 命令声明的变量，在全局范围内有效。例中代码，全局只有一个变量 `i`。每一次循环，`i` 的值均会改变，而 `console.log(i)` 里面的 `i` 指向的就是全局的 `i`，导致运行时输出的是最后一轮的 `i` 的值，即 `10`。
2. 
`let` 命令声明 的变量，仅在块级作用域内有效。修改后的代码，每一次循环的 `i` 都是一个新的变量，所以最后输出 `0123456789`。

另外一点，如果每一轮循环的变量 `i` 均为重新声明，那它怎么知道上一轮循环的值？
因为记得。`JavaScript` 引擎内部会记住上一轮循环的值，初始化本轮的变量 `i` 时，就在上一轮循环的基础上进行计算。

标签: javascript
问题：vue.js 如何在页面渲染完后去操作dom，而且只执行一次？
我想在页面渲染完执行我的代码,去操作dom。因为我把操作dom的写在加载数据的方法里面，发现是选不到dom的，应该是这个时候js还没执行完，页面还没渲染好。
vue的created是实例创建完执行一次，但是这个时候去操作dom是选不到的。
还有个update，这个倒是可以选到dom,但是这个每次都被执行啊，我只想在执行一次。
对于这种需求，有没有什么好的解决方法？

回答：在接口请求成功的回调里使用
```
this.$nextTick(() =>{
  // 在这里面去获取DOM
})。
```
在mounted生命周期，组件挂载成功，但还未渲染，自然获取不到相关的DOM节点。看你资料好像不是前端，举个更简单的例子，你在html中，把 `console.log(document.querySelector('body'))`写在body标签前面，代码执行时机先于页面渲染，结果就是undefined。
不推荐用updated, beforeUpdate生命周期，这2个生命周期只会在数据发生变化时才触发。如果你请求接口的数据是放在created生命周期（我推荐放在created里面去发起请求），初次进入页面是不会触发updated, beforeUpdate里面的代码。
如果你非要要updated，并且希望第一次进入页面即可获取到DOM节点，那么请在mounted生命周期请求接口数据，而不是created了

标签: vue.js