• 等级
  • 110546 访问
  • 29 原创
  • 1 转发
  • 71830 排名
  • 10 评论
  • 23 获赞

js中setTimeout,requestAnimationFrame,requestIdleCallback的区别和应用

前言:本文中提及的关于标题中三个api的回调函数的调用,都是指回调函数被压入调用队列中等待被调用,如对js中的异步调用和任务调度机制尚不太理解,建议先阅读作者的另一篇文章,异步调度机制——Javascript事件循环(EventLoop)机制解析。正文:本文的主要内容是理清setTimeout,requestAnimationFrame,requestIdleCallback这三个函...

2019-04-06 21:25:19

正则表达式中问号(?)的用法详解

正则表达式中“?”的用法大概有以下几种1、直接跟随在子表达式后面这种方式是最常用的用法,具体表示匹配前面的一次或者0次,类似于{0,1},如:abc(d)?可匹配abc和abcd2、非贪婪匹配关于贪婪和非贪婪,贪婪匹配的意思是,在同一个匹配项中,尽量匹配更多所搜索的字符,非贪婪则相反。正则匹配的默认模式是贪婪模式,当?号跟在如下限制符后面时,使用非贪婪模式(*,+,?,{n},{n...

2019-03-23 15:51:39

异步调度机制——Javascript事件循环(Event Loop)机制解析

我们都知道,javascript是一个单线程的语言,这就意味着,js在同一个时间片上,只能执行一个任务。只有当前一个任务执行完成之后,才能执行下一个任务。那么当出现网络请求,IO操作这类耗时操作时,由于当前任务什么时候完成我们是不知道的,这时候如果选择等待当前任务完成之后再进行下一步很明显是不明智的,这样会导致性能的严重下降,于是,js的任务类型分为同步和异步两种。同步任务就不需要多说了,按顺...

2019-02-23 22:40:33

React中key属性的作用及原理解析

Warning:Eachchildinanarrayoriteratorshouldhaveaunique"key"prop.Checktherendermethodof`Test`.Seehttps://fb.me/react-warning-keysformoreinformation.相信在react的使用过程中,大家或多或少都会遇到过这样...

2019-01-20 14:58:10

React中setState的怪异行为 ——setState没有即时生效

setState可以说是React中使用频率最高的一个函数了,我们都知道,React是通过管理状态来实现对组件的管理的,当this.setState()被调用的时候,React会重新调用render方法来重新渲染UI但实际使用的时候,我们会发现,有时候我们setState之后,并没有立刻生效,例如我们看一下以下的示例代码classTestextendsComponent{c...

2019-01-12 14:41:45

React事务机制解析

对react有一定了解的开发人员应该都听说过react的事务机制,这个机制几乎贯穿于react所有提供的方法,包括react中最常使用的setState函数那么,react的事务机制到底是一种什么样的机制呢,为了解释事务机制的实现原理,react源码中用注释画出了这样一幅图根据这幅图,我们可以这样理解事务,react中用事务执行方法,就是用wrapper(称之为套套吧)把方法包裹起来,...

2019-01-11 23:20:19

react生命周期原理解析

这篇文章是对之前的一片文章react生命周期整理提到的生命周期的解析,本文会从源码的角度,对react的各个生命周期的实现原理进行不太详细的分析getDefaultProps与getInitialState首先我们来看一下以下两个代码片段,第一个是用es5创建组件的方法,需要调用react的createClasss方法,第二个是es6创建组件的方法,定义一个类继承react.compone...

2019-01-06 22:24:18

react生命周期整理

react中的生命周期可以分为四大类,分别为定义时触发,渲染时触发,更新时触发以及卸载时触发。本文章会对所有生命周期进行归纳并从源码的角度解析其实现原理(写到一半发现文章已经有点长了,决定新开一片文章来解析实现原理,传送门)定义时触发(createClass)getDefaultProps该生命周期是在定义组件的时候触发,其返回的对象可以用于设置默认的props,由于这个方法是在构造...

2019-01-06 15:28:34

React的跨级组件通信

我们知道,react中父子组件之间的通信,父组件和子组件通信,可以通过props向子组件传递参数,子组件和父组件通信,则可以通过调用props传入的回调函数来向父组件传递参数那么问题来了,如果是跨级组件之间的通信,如果通过props一层一层往下传,不仅逻辑会变得很不清晰,代码也会变得不好维护,这个时候,我们需要使用到react中的context来解决这个问题首先我们来看一段代码cla...

2018-12-28 23:08:52

javascript绑定this的几种方法

首先,理清一下js中的this,js中的this对象指向调用当前方法的对象,这个指向是在执行的时候才确定下来的,跟函数在何时何处声明是无关的。但是,在实际使用过程中,我们经常会遇到要改变当前this指向的需求,一下的对绑定this方法的归纳1、call和apply这里把call和apply放在一起讲,是因为这两个方法及其相似,其作用都是直接调用一个函数,并使其具有一个指定的this,...

2018-11-28 17:20:52

css文字换行总结

web前端布局中有时候在有限的空间中会出现很长的文字,由于对布局的要求有时候我们需要改变默认的换行方式,以自定义的方式控制换行,以下是使用css控制换行的相关总结1、overflow-wrap,word-wrap 这两个属性效果其实是一样的,word-wrap是早期微软定义的属性,overflow-wrap是css3标准化的定义,为了兼容们目前word-wrap已经被作为overflow-...

2018-10-06 22:28:38

如何防止页面被调试

由于web前端项目的特殊性,所有的前端代码基本上是开源的,这就意味着,访问者可以无条件的查看所有的代码,甚至进行调试,弄清项目的业务逻辑,这样,漏洞挖掘者就可以很方便的找出网站的漏洞进行攻击。出于安全的目的,前端会对代码进行各种压缩打包,混淆等,增加阅读代码的难度,但对于调试,似乎很多人并没有引起应有的重视,下面会介绍一种比较基础的方法,用于阻止网站访问者对项目进行调试。我们都知道,在js...

2018-08-26 16:54:51

zepto源码分析之form表单处理

本篇是zepto源码分析系列第二篇,这里依旧有一份包含详细中文注释的zepto源代码,有需要的可以下载下来学习,觉得有帮助的话戳一颗星那就更好了本篇会解析zepto源码中的form表单处理部分,这部分相对来说比较简单,仅包含三个方法:serialize,serializeArray,submit,依次分析如下serializeArray$.fn.serializeArray=fu...

2018-08-19 16:20:53

zepto源码分析之ajax

首先,放github链接,这里有一份包含详细中文注释的zepto源代码,有需要的可以下载下来学习,觉得有帮助的话戳一颗星那就更好了这篇博文会先解析ajax实现的部分,zepto对于ajax的实现包含两个部分,普通的xhr请求和jsonp请求,对外暴露了以下几个方法:$.ajax,$.ajaxJSONP,$.ajaxSettings,$.get,$.getJSON,$.param,$.pos...

2018-08-14 22:16:42

https加密机制解析

https是目前最流行运用最广泛的安全http形式,早年由netscape首创,目前所有的浏览器均支持此技术,这篇博文主要简单的解析https的加密机制从下图可以了看出,https和http最主要的区别在于,https比http多了一层加密层SSL/TLS,接下来会简单解释https相关的加密原理理解https的加密原理,首先要了解一下以下概念数字加密数字加密由明文,密钥,密文...

2018-07-25 23:06:44

js如何判断当前文本的输入状态——中文输入法的那些坑

相信各位在平时接需求的时候肯定会遇到这样的一些需求,例如,要求输入框限制输入长度,限制输入类型,限制只能英文输入,限制只能输入大写字母等等,这时候我们一般的思路无非两种,一种是弹出特定的键盘,第二种是在输入的过程中对输入内容进行正则匹配,然后根据自己的需求对input框进行赋值。弹出特定键盘可以通过对input框的type属性进行赋值,但由于不同的浏览器对弹出的输入框都有比较严格的限制,并且弹出之...

2018-07-09 22:44:43

拦截浏览器后退的两种方式

在平时开发的过程中,经常会遇到类似这样的需求:用户点击后退时,弹出提示框提示用户是否退出,或者需要阻止用户后退,用户点击后退之后重定向到其他页面,这一类的需求,都需要我们能够在用户点击后退时捕获到相应的事件并进行拦截。以下是两种拦截方式的总结:1:利用popstate事件和pushState方法,popstate是html5新增的一个事件,它会在浏览器历史发生变化时触发,对于这个事件的描述...

2018-06-23 09:27:29

浏览器缓存机制分析及前端缓存清理

本文主题:理清浏览器的缓存机制的内部逻辑,并给出避免浏览器缓存的相关解决方案相信很多新手前端发布页面的时候都会遇到一个问题,就是明明页面已经更新了,但是浏览器浏览页面并没有变化,那么如何解决这个问题呢?事实上,这个问题各种搜索引擎搜索之后会发现有很多的方案,但不一定有效,一般的解决方案有以下的两种:1:添加时间戳;2:cache-control。首先第一种,就是在你的所有静态资源文件后面添加随机时...

2018-06-03 16:56:33

FastClick源码分析

玩过移动端web开发的同学应该都了解过,移动端上的click事件都会有300毫秒的延迟,这300毫秒主要是浏览器为了判断你当前的点击时单击还是双击,但有时候为了更快的对用户的操作做出更快的响应,越过这个300毫秒的延迟是有点必要的,faskclick做的就是这件事,这篇文章会理清faskclick的整体思路,分析主要的代码,但不会贴出所有的代码,仅分析主干,由于历史原因,faskclick对旧版本...

2018-06-03 11:12:28

关于类库的模块化实现

相信很多人都有过自己写个类库的想法,对于一个类库,如何模块化是首先需要考虑的问题,目前js有多种模块化的规范,常见的有CMD,AMD以及ES6自身实现的模块化方案,前两种是社区早期指定的规范,最后一种则是w3c的规范,那么如何让我们自己编写的代码能兼容到这么多种规范呢,或者说,知名的类库都是怎么实现的呢,接下来我们分析一下underscore.js中的实现if(typeofexp...

2018-05-20 22:13:29

小敏哥

关注
奖章
  • 专栏达人
  • 持之以恒