资讯专栏INFORMATION COLUMN

前端小知识10点(2019.5.28)

Imfan / 1498人阅读

摘要:可以看到,这组参数,以上三条全部满足。详情请参考浏览器类别判断安全浏览器完

1、火狐(firefox)的mouseenter问题

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

onMouseEnter事件在火狐上会不断地触发mouseentermouseleave事件,所以需要先设置一个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

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 中标签的位置
使用标签自带的transform属性


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;

(完)

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/109899.html

相关文章

  • 前端知识102019.5.28

    摘要:可以看到,这组参数,以上三条全部满足。详情请参考浏览器类别判断安全浏览器完 showImg(https://segmentfault.com/img/remote/1460000019316485); 1、火狐(firefox)的mouseenter问题 { this.mouseEnter(e,); }} onBlur={() => {...

    longmon 评论0 收藏0
  • 2019年java架构师视频

    摘要:并发专题一内存模型原理实现机制单例模式并发基础并发集合原子操作基本类型线程池互联网工程专题二简介安装工具编程介绍,入门程序仓库依赖管理简介常用操作命令 01.并发专题(一)2018-09-11(1)-Java内存模型2018-09-13(2)-synchronized原理2018-09-16(3)-volatile实现机制2018-09-18(4)-DCL-单例模式2018-09-21...

    Object 评论0 收藏0
  • 前端早读会】每天记录前端学习的过程

    摘要:在这里使用学而思网校的录像设备,记录前端工程师每天学习的内容商城小程序分享人王聪视频插件开发分享人魏媛视频原理分享人李佳晓视频讲座优化实战分享人江芊视频文件操作分享人张凯视频一次性学会正则表达式分享人贺杰视频浅谈 在这里使用学而思网校的录像设备,记录前端工程师每天学习的内容: 2019-8-22 商城小程序codereview 分享人:王聪 视频:https://lecture.xue...

    tylin 评论0 收藏0
  • 前端知识102019.5.18)

    摘要:当给数组的赋负数或小数时,数组的长度有无变化由此可见,的属性只计算非负整数下标不计算负数小数项目热更新慢并且是在时卡住怎么办本人实际上是文件里多写了个逗号。。。。 showImg(https://segmentfault.com/img/remote/1460000019223033); 1、当给数组的index赋负数或小数时,数组的长度有无变化? let arr=[] arr...

    neuSnail 评论0 收藏0
  • 前端知识102019.5.2)

    摘要:为什么整体上是一个匿名函数自调用因为匿名函数自执行里面的所有东西都是局部的,这样引用时,能防止和其他的代码冲突。对象的类型标签是。由于代表的是空指针大多数平台下值为,因此,的类型标签也成为了,就错误的返回了。 showImg(https://segmentfault.com/img/remote/1460000019062498); 1、为什么 jQuery 整体上是一个匿名函数自调用...

    yibinnn 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<