Liang的个人博客

2021-02-06发表2025-12-07更新设计模式10 分钟读完 (大约1486个字)

享元(flyweight)模式是一种用于性能优化的模式，“fly”在这里是苍蝇的意思，意为“蝇量级”。享元模式的核心是运用共享技术来有效支持大量细粒度的对象。

如果系统中因为创建了大量类似的对象而导致内存占用过高，享元模式就非常有用了。在 JavaScript 中，浏览器特别是移动端的浏览器分配的内存并不算多，如何节省内存就成了一件非常有意义的事情。

2021-02-05发表2025-12-07更新设计模式8 分钟读完 (大约1152个字)

模板方法模式

在模板模式（Template Pattern）中，一个抽象类公开定义了执行它的方法的方式/模板。它的子类可以按需要重写方法实现，但调用将以抽象类中定义的方式进行

2021-02-04发表2025-12-07更新设计模式14 分钟读完 (大约2098个字)

组合模式

组合模式将对象组合成树形结构，以表示“部分-整体”的层次结构。除了用来表示树形结构之外，组合模式的另一个好处是通过对象的多态性表现，使得用户对单个对象和组合对象的使用具有一致性

2021-02-03发表2025-12-07更新设计模式9 分钟读完 (大约1277个字)

命令模式

将一个请求封装为一个对象，从而使你可用不同的请求对客户进行参数化；对请求排队或记录请求日志，以及支持可撤销的操作

2021-02-02发表2025-12-07更新设计模式5 分钟读完 (大约755个字)

发布-订阅模式

又叫观察者模式，它定义对象间的一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都将得到通知

2021-02-01发表2025-12-07更新设计模式3 分钟读完 (大约419个字)

迭代器模式

是指提供一种方法顺序访问一个聚合对象中的各个元素，而又不需要暴露该对象的内部表示。

2021-01-31发表2025-12-07更新设计模式6 分钟读完 (大约851个字)

代理模式

为其他对象提供一种代理以控制对这个对象的访问

2021-01-30发表2025-12-07更新设计模式1 分钟读完 (大约202个字)

策略模式

定义一系列算法，把他们一个个封装起来，并且使它们互相可替换

2021-01-28发表2025-12-07更新设计模式3 分钟读完 (大约397个字)

单例模式

保证一个类仅有一个实例，并提供一个访问它的全局访问点
比如vuex、window对象、线程池

2021-01-27发表2025-12-07更新设计模式2 分钟读完 (大约237个字)

惰性加载函数

场景

写一个各浏览器兼容事件绑定函数

let addEvent = function (elem, type, handler) {
    if (window.addEventListener) {
        return elem.addEventListener(type, handler, false);
    }
    if (window.attachEvent) {
        return elem.attachEvent('on' + type, handler);
    }
}

缺点：每一次调用都必须执行一次if判断

方案一

在该代码被加载时，利用立即执行函数做一次判断，然后返回给addEvent正确的事件绑定函数

let addEvent = (function (){
    if (window.addEventListener) {
        return function (elem, type, handler) {
            elem.addEventListener(type, handler, false);
        }
    }
    if (window.attachEvent) {
        return function (elem, type, handler) {
            elem.attachEvent('on' + type, handler);
        }
    }
})()

缺点：如果addEvent绑定事件函数一直都没有被调用，那么就白白做了一次浏览器嗅探

方案二：惰性载入函数

let addEvent = function(elem, type, handler) {
    if (window.addEventListener) {
        addEvent = function (elem, type, handler) {
            elem.addEventListener(type, handler, false);
        }
    }
    if (window.attachEvent) {
        addEvent = function (elem, type, handler) {
            elem.attachEvent('on' + type, handler);
        }
    }
    
    addEvent(elem, type, handler);
}

缺点：首次调用较慢

参考

《Javascript设计模式与开发实践》

场景

方案一

方案二：惰性载入函数

参考

分类

归档

标签

最新文章