前端小知识10点2019528

1、火狐（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,})
}

2、ESLint Unary operator ‘++’ used
i++是不安全的，所以用i+=1

//bad
for(let i=0;i<a.length;i++)

//good
for(let i=0;i<a.length;i+=1)

3、兼容 ie11 之 SVG 的 transform 旋转
从 0 度

// 非 IE 可以这样写
svg.style('transform', `rotate(0deg)`)
//IE 需要这么写
svg.attr('transform',`rotate(0,0 0)`)

转到 180 度

// 非 IE 可以这样写
svg.style('transform', `rotate(180)`)
//IE 需要这么写
svg.attr('transform',  `rotate(180,0 0)`)

详情请参考：https://www.zhangxinxu.com/wordpress/2015/10/understand-svg-transform/

4、border-block-end
边界块结束

border-block-end: 1px solid #d5d5d5;

第一次知道这个属性，好像是新边框属性，但兼容性不太好，IE11 不兼容，所以还得改回下面这样：

border-bottom: 1px solid #d5d5d5;

5、调整 svg 中 <g> 标签的位置
使用 <g> 标签自带的 transform 属性

<g transform={'translate(0 30) scale(1.4)'}>
</g>

6、get请求中的参数有中文，ie11无法识别
使用 encodeURI() 方法来识别，也不影响其他浏览器

  encodeURI(url)

7、document.activeElement.tagName
返回文档中当前获得焦点的元素

console.log(document.activeElement.tagName)

（这个我以前记过，但发现工作中很少用到）

8、注意写法，在赋值的同时，判断条件

 let a
 let b=1
 if (( a = b)!==2 ) {console.log(a,'a28') //1
 }

9、网上常能见到的一段 JS 随机数生成算法如下，为什么用 9301, 49297, 233280 这三个数字做基数？

function rnd(seed){seed = ( seed * 9301 + 49297) % 233280; // 为何使用这三个数?
    return seed / (233280.0);
};

function rand(number){today = new Date(); 
    seed = today.getTime();
    return Math.ceil(rnd( seed) * number );
};

myNum=(rand(5)); 

简单说，是 3 点原因：

（1）c 与 m 互质
（2）a – 1 可以被 m 的所有质因数整除
（3）如果 m 是 4 的倍数，a – 1 也必须是 4 的倍数
以上三条被称为 Hull-Dobell 定理。
可以看到，a=9301, c = 49297, m = 233280 这组参数，以上三条全部满足。

详情请参考：https://www.zhihu.com/question/22818104

10、浏览器类别判断 window.navigator.userAgent

console.log(window.navigator.userAgent,'userAgent67')

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;

---

（完）