前端小知識10點（2019.5.28）

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

二、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)

三、兼容 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/

四、border-block-end
邊界塊結束

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

第一次知道這個屬性，好像是新邊框屬性，但兼容性不太好，IE11 不兼容，因此還得改回下面這樣：

border-bottom: 1px solid #d5d5d5;

五、調整 svg 中<g>標籤的位置
使用<g>標籤自帶的transform屬性

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

六、get請求中的參數有中文，ie11沒法識別
使用encodeURI()方法來識別，也不影響其餘瀏覽器

encodeURI(
        url
    )

七、document.activeElement.tagName
返回文檔中當前得到焦點的元素

console.log(document.activeElement.tagName)

（這個我之前記過，但發現工做中不多用到）

八、注意寫法，在賦值的同時，判斷條件

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

九、 網上常能見到的一段 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

十、瀏覽器類別判斷 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;

---

（完）