饭后小八卦|27 个 JavaScript 技巧，中级前端工程师必须要掌握的( 三 )
同时通过闭包向外暴露了一个cancel函数 ， 使得外部能直接清除内部的计数器
文章图片
和函数防抖类似 ， 区别在于内部额外使用了时间戳作为判断 ， 在一段时间内没有触发事件才允许下次事件触发
文章图片
【饭后小八卦|27 个 JavaScript 技巧，中级前端工程师必须要掌握的】getBoundClientRect的实现方式 ， 监听scroll事件（建议给监听事件添加节流） ， 图片加载完会从img标签组成的DOM列表中删除 ， 最后所有的图片加载完毕后需要解绑监听事件
文章图片
intersectionObserver的实现方式 ， 实例化一个IntersectionObserver ， 并使其观察所有img标签
当img标签进入可视区域时会执行实例化时的回调 ， 同时给回调传入一个entries参数 ， 保存着实例观察的所有元素的一些状态 ， 比如每个元素的边界信息 ， 当前元素对应的DOM节点 ， 当前元素进入可视区域的比率 ， 每当一个元素进入可视区域 ， 将真正的图片赋值给当前img标签 ， 同时解除对其的观察
文章图片
文章图片
Object.assign的原理可以参考我另外一篇博客
文章图片
原理是递归遍历right参数的原型链 ， 每次和left参数作比较 ， 遍历到原型链终点时则返回false ， 找到则返回true
文章图片
使用Proxy代理所有含有_开头的变量 ， 使其不可被外部访问
文章图片
通过闭包的形式保存私有变量 ， 缺点在于类的所有实例访问的都是同一个私有变量
文章图片
另一种闭包的实现 ， 解决了上面那种闭包的缺点 ， 每个实例都有各自的私有变量 ， 缺点是舍弃了class语法的简洁性 ， 将所有的特权方法（访问私有变量的方法）都保存在构造函数中
文章图片
通过WeakMap和闭包 ， 在每次实例化时保存当前实例和所有私有变量组成的对象 ， 外部无法访问闭包中的WeakMap ， 使用WeakMap好处在于不需要担心内存溢出的问题
早前的chrome对于元素小于10的数组会采用插入排序 ， 这会导致对数组进行的乱序并不是真正的乱序 ， 即使最新的版本chrome采用了原地算法使得排序变成了一个稳定的算法 ， 对于乱序的问题仍没有解决
文章图片
文章图片
通过洗牌算法可以达到真正的乱序 ， 洗牌算法分为原地和非原地 ， 图一是原地的洗牌算法 ， 不需要声明额外的数组从而更加节约内存占用率 ， 原理是依次遍历数组的元素 ， 将当前元素和之后的所有元素中随机选取一个 ， 进行交换
推荐阅读
- 黑熊聊八卦|S6即将堪比乞丐价，vivo S7前置或将升级到1.08亿像素，vivo
- 悟空八卦百宝库|网友：全美的灾难，美国拒付华为“专利费”？怕是不知道后果是啥
- 娱乐八卦小小记|演了21年配角，如今靠《庆余年》一炮而红，他曾与汤唯同居三年
- 科技八卦说|“祸不单行”，超2.6万款游戏被下架，华为机会来了？苹果
- 娱八卦小翁|避开不黄叶，促进花芽分化，独苗养成繁花老桩，三角梅有“三怕”
- 科技八卦说|专为美国制造，保密措施滴水不漏，台积电“神秘51区”
- javascript|10个很棒的JavaScript库，提升Web开发效率
- 水舞娱乐八卦|防爆防身真的完全要靠枪械吗？这种警方必备才是巷战利器
- 球哥扯八卦|为何外太空还是冷的？，太阳表面温度高达6500度
- 娱八卦小翁|如何不破坏画面的自然拉伸背景图，PS教程：拉伸不变形