中级前端工程师必须要掌握的27个JavaScript 技巧(3)

getBoundClientRect 的实现方式,监听 scroll 事件(建议给监听事件添加节流),图片加载完会从 img 标签组成的 DOM 列表中删除,最后所有的图片加载完毕后需要解绑监听事件。

中级前端工程师必须要掌握的27个JavaScript 技巧

intersectionObserver 的实现方式,实例化一个 IntersectionObserver ,并使其观察所有 img 标签。

当 img 标签进入可视区域时会执行实例化时的回调,同时给回调传入一个 entries 参数,保存着实例观察的所有元素的一些状态,比如每个元素的边界信息,当前元素对应的 DOM 节点,当前元素进入可视区域的比率,每当一个元素进入可视区域,将真正的图片赋值给当前 img 标签,同时解除对其的观察。

20. new 关键字

中级前端工程师必须要掌握的27个JavaScript 技巧

21. 实现 Object.assign

中级前端工程师必须要掌握的27个JavaScript 技巧

Object.assign 的原理可以参考我另外一篇博客。

22. instanceof

中级前端工程师必须要掌握的27个JavaScript 技巧

原理是递归遍历 right 参数的原型链,每次和 left 参数作比较,遍历到原型链终点时则返回 false,找到则返回 true。

23. 私有变量的实现

中级前端工程师必须要掌握的27个JavaScript 技巧

使用 Proxy 代理所有含有 _ 开头的变量,使其不可被外部访问。

中级前端工程师必须要掌握的27个JavaScript 技巧

通过闭包的形式保存私有变量,缺点在于类的所有实例访问的都是同一个私有变量。

中级前端工程师必须要掌握的27个JavaScript 技巧

另一种闭包的实现,解决了上面那种闭包的缺点,每个实例都有各自的私有变量,缺点是舍弃了 class 语法的简洁性,将所有的特权方法(访问私有变量的方法)都保存在构造函数中。

中级前端工程师必须要掌握的27个JavaScript 技巧

通过 WeakMap 和闭包,在每次实例化时保存当前实例和所有私有变量组成的对象,外部无法访问闭包中的 WeakMap,使用 WeakMap 好处在于不需要担心内存溢出的问题。

24. 洗牌算法

早前的 chrome 对于元素小于 10 的数组会采用插入排序,这会导致对数组进行的乱序并不是真正的乱序,即使最新的版本 chrome 采用了原地算法使得排序变成了一个稳定的算法,对于乱序的问题仍没有解决。

中级前端工程师必须要掌握的27个JavaScript 技巧

中级前端工程师必须要掌握的27个JavaScript 技巧

通过洗牌算法可以达到真正的乱序,洗牌算法分为原地和非原地,图一是原地的洗牌算法,不需要声明额外的数组从而更加节约内存占用率,原理是依次遍历数组的元素,将当前元素和之后的所有元素中随机选取一个,进行交换。

25. 单例模式

中级前端工程师必须要掌握的27个JavaScript 技巧

通过 ES6 的 Proxy 拦截构造函数的执行方法来实现的单例模式。

26. promisify

中级前端工程师必须要掌握的27个JavaScript 技巧

使用方法:

中级前端工程师必须要掌握的27个JavaScript 技巧

promisify 函数是将回调函数变为 promise 的辅助函数,适合 error-first 风格(nodejs)的回调函数,原理是给 error-first 风格的回调无论成功或者失败,在执行完毕后都会执行最后一个回调函数,我们需要做的就是让这个回调函数控制 promise 的状态即可。

这里还是用了 Proxy 代理了整个 fs 模块,拦截 get 方法,使得不需要手动给 fs 模块所有的方法都包裹一层 promisify 函数,更加的灵活。

27. 优雅的处理 async/await

中级前端工程师必须要掌握的27个JavaScript 技巧

使用方法:

中级前端工程师必须要掌握的27个JavaScript 技巧

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/c6c15d98738fcc2d42698e2a4df0b408.html