JS的3种核心设计模式

一、单例模式

1.保证一个类仅有一个实例，并提供一个访问它的全局访问点

2.设计思路：如果存在，不创建，直接返回，不存在才创建。

　　在类的constructor方法里添加一个判断条件属性，并且让创建的实例赋给这个属性。判断该属性，没有则创建，有则返回该属性。

实际开发中，单例模式下最有用的是惰性单例。

3.惰性单例指的是在需要的时候才创建对象实例。

　　应用场景：当我们单击登录按钮的时候，页面中会出现一个登录浮窗，而这个登录浮窗是唯一的，无论单击多少次登录按钮，这个浮窗都只会被创建一次，那么这个登录浮窗就适合用单例模式来创建。

　　这里将一个自执行函数给box，返回创建的这个登录浮窗，开始是隐藏的。点击事件触发后，改变box的display属性为block。

const oBtn = document.querySelector('button');
         let box = (function () {
         let cDiv = document.createElement('div');
         cDiv.innerHTML = '我是登录浮窗';
         cDiv.style.display = 'none';
         document.body.appendChild(cDiv);
         return cDiv;
})();
oBtn.onclick = function () {
         box.style.display = 'block';
         }

　　不过这种方式有个问题：一开始就会有个display为none的div，这样浪费一些DOM节点。

解决：

　　这里box函数里通过return一个函数（这个函数里放如何实现创建这个浮窗），这样在点击事件触发前，不会执行return里的函数，也就不会创建浮窗。

const oBtn = document.querySelector('button');
        let box = (function () {
            let cDiv = null;//需要创建的对象
            return function () {
                if (!cDiv) {//不存在,创建
                    cDiv = document.createElement('div');
                    cDiv.innerHTML = '我是登录浮窗';
                    cDiv.style.display = 'none';
                    document.body.appendChild(cDiv);
                }
                return cDiv;//存在直接返回
            }
        })();
        oBtn.onclick = function () {
            let cdiv = box();
            cdiv.style.display = 'block';
        }

二、组合模式

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

应用：

1、也就是说，假如要封装个addClass函数，需要添加class值的节点可能是单个节点或者多个节点。函数内部通过判断是单个或多个节点，实现添加class，实现代码会针对两种情况做一定的修改。这样这个函数无论是单个或多个DOM节点添加class都能实现了。

2、如果遇到这种问题：实际开发时，可设置入口方法。每一个对象，都可以调用入口方法来调用类里的方法。但是如果实例对象过多，会造成冗余。

解决：在constructor方法里设置一个可以存储实例对象的数组，然后给一个execute方法，遍历执行数组方法里的对象的入口方法。

//组合模式解决。
        class Compose {
            constructor() {
                this.objarr = [];//存储对象的数组
            }
            add(obj) {//将实例化的对象添加到数组里面。
                this.objarr.push(obj);
            }
            execute() {//遍历执行数组里面对象，对象调用入口方法。
                for (let i = 0; i < this.objarr.length; i++) {
                    this.objarr[i].init();
                }
            }
        }
        let p1 = new Compose();
        p1.add(new A());//添加实例化方法。
        p1.add(new B());
        p1.add(new C());
        p1.execute();//执行

三、观察者模式

发布——订阅模式又叫观察者模式，它定义对象间的一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都将得到通知。在 JavaScript开发中，我们一般用事件模型来替代传统的发布 — 订阅模式。

To be continued......

JS的3种核心设计模式

相关推荐