5月份开发问题整理

Posted 2020-09-23 js-coder

1、BUG-In android7 phone can not slide above

注：Android 7.0以上，iScroll滑动缓慢迟钝问题解决

What browser are you using?

There was a fix to iScroll‘s handling of passive events in Chrome 55, but a new bug appeared in Chrome 56 (confirmed in the iScroll demos).

EDIT: Scouring the GitHubs, rbmeyers (on the github team), has been posting everywhere with a simple CSS fix:

touch-action: none;

https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action

2、React 使用ES6+语法时 事件绑定疑惑

在props里使用 onClick={ this.handleClick.bind(this) } 或者 onClick={ (e) => this.handleClick(e) } 或者 onClick={ ::this.handleClick } 都会产生性能问题，所以现在eslint在语法检查时就会阻止这几种写法，问题原因是每一次render的时候如果遇到这些写法，都会重新用handleClick函数与this去绑定从而重新创建一个新的函数，影响性能。

如果使用下面的写法则不会每次都创建：

// 1. 
constructor() {
    this.handleClick = this.handleClick.bind(this);
}
handleClick(e) { /* ... */ }
// 2. 
handleClick = (e) => { /* ... */ };

3、webpack-dev-server + HostAdmin，导致invalid host header

访问webpack启动的server，直接使用localhost和127.0.0.1都可以正常访问，但是修改了host，使用hostname访问，就会显示invalid host header。

原来新版的webpack-dev-server修改了一些东西，默认检查hostname。如果hostname不是配置内的，将不可访问。应该是考虑一些安全的因素，才有这种配置。之前删除过一次node_modules，重新安装之后出现了这个问题。

修复方法

disableHostCheck:true

或者

public: ‘local.kingsum.biz‘

看文档应该是webpack-dev-server: v1.16.4这个版本合并进来的，所以升级到这个版本之后要注意这个问题

4、select2 初始化默认值

xxx.val(status).trigger(‘change‘)

https://github.com/select2/select2/issues/4659

me.$statusSelect.select2({
	data:  [{
      		id : ‘1‘,
      		text : ‘有效‘
      	},{
      		id : ‘0‘,
      		text : ‘无效‘
      	}
    ],
}).val(status).trigger(‘change‘);

5、如何移除 input type="number" 时浏览器自带的上下箭头？

https://segmentfault.com/q/1010000000687882

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

input[type="number"]{
  -moz-appearance: textfield;
}