前端小知识(20191107)

1、flex 超出换行 flex-wrap: wrap

.noIcon {
  display: flex;
  //超出换行
  flex-wrap: wrap;
}

2、正则表达式：正整数

 const reg = /^[0-9]*[1-9][0-9]*$/;

3、stopImmediatePropagation() 有两个作用：

// 1、阻止剩下的事件处理程序被执行
$("div").click(function(event){
    alert("点击了divOne");
    event.stopImmediatePropagation();
});
$("div").click(function(event){
    alert("点击了divTwo");
});// 只显示点击了divOne

// 2、阻止冒泡
$("body").click(function(event){
    alert("body 被执行");
});
$("div").click(function(event){
    alert("事件句柄 1 被执行");
    event.stopImmediatePropagation();
});
// 只执行了div点击没有冒泡

4、setTimeout(fn,0)的含义

指定某个任务在主线程最早可得的空闲时间执行，也就是说，尽可能早得执行。它在"任务队列"的尾部添加一个事件，因此要等到同步任务和"任务队列"现有的事件都处理完，才会得到执行。

5、实时推送

利用websocket推送数据，这是HTML5提供的方法，所以只能支持HTML5标准的浏览器。这种方式可以利用socket.io来实现。

6、火狐（firefox）的mouseenter问题

<MyIcon
      onMouseEnter={e => {
          this.mouseEnter(e,);
       }}
       onBlur={() => {}}
       onMouseLeave={e => {
          this.mouseOut(e,);
       }}
/>

onMouseEnter事件在火狐上会不断地触发mouseenter和mouseleave事件，所以需要先设置一个flag=false，在onMouseEnter时设为true，在onMouseLeave设为false，让不断触发的onMouseEnter事件只触发一次即可

this.state={
  flag:false
}

mouseEnter(){
  if(!this.state.flag){
    //...do something
    this.setState({
      flag:true,
    })
  }
}

mouseOut(){
  this.setState({
    flag:false,
  })
}

7、浏览器类别判断

window.navigator.userAgent

// 普通
    window.navigator.userAgent;
// 360安全浏览器
    const is360=window.navigator.userAgent.indexOf("WOW64")!==-1;
// Edge
    const isEdge = window.navigator.userAgent.indexOf('Edge') !== -1;
// IE11
    const isMs = window.navigator.userAgent.indexOf('.NET') !== -1;

8、jQuery清空表单form中的input

$(':input').val('');

9、Math.trunc() 用于去除一个数的小数部分，返回整数部分

10、确定一个字符串是否包含在另一个字符串中 的四种方法：

• indexOf() 有指定字符串则返回其位置
• includes(searchString[, position]) position表示开始搜索的位置
• startsWith(searchString [, position]) 表示参数字符串是否在原字符串的头部在 str 中搜索 searchString 的开始位置，默认值为 0，也就是真正的字符串开头处。
• endsWith(searchString [, position]) 表示参数字符串是否在原字符串的尾部