前端_js设计模式

什么是设计模式

1. 什么是设计模式

• 设计模式是前人总结出的，解决开发中某类问题的方法；

• 我们在过去的代码编写中已经接触过很多的设计模式了，只不过当时咱们不知道这就是一种设计模式而已；

• 设计模式之间并不是互相独立的，往往一个功能需要多个设计模式的配合实现；

• 每个设计模式所解决的问题肯定是不同的，根据这些模式的功能我们可以将他们分成很多几大类：创建型设计模式、结构型设计模式、行为型设计模式。当然在JavaScript里面还可以有其他的一些特殊的设计模式，我们也会介绍到。

1. 单例模式

单例模式（Singleton）：确保某一个类只有一个实例。

JavaScript创建实例对象的方法有很多，所以很多写法我们都可以认为是单例模式：

/*
    上面做法在没有调用时就已经初始化DOM节点了，
    很显然，当我们使用时再初始化这样更好
    改良一下：
*/
let Popup = (function () {
    let instance;
    return function () {
        if (!instance) {
            instance = document.createElement("div");
        }
        instance.show = function (arg) {
            this.innerText = arg;
            document.body.appendChild(this);
        };
        return instance;
    };
})();
Popup().show("popup1");//测试使用1
Popup().show("popup2");//测试使用2
console.log(Popup() === Popup());//测试单例

/*
    抽象化一下，写成类的形式：
*/
let Popup = (function () {
    let instance = null;
    class Pop{
        constructor(){
            if( instance ){
                return instance;
            }
            instance = this;
            this.ele = document.createElement("div");
            this.show = function (arg) {
                this.ele.innerText = arg;
                document.body.appendChild(this.ele);
            };
        }
    }
    return Pop;
})();
let a = new Popup();
a.show("popup1");//测试使用1
let b = new Popup();
b.show("popup2");//测试使用2
console.log(a === b);//测试单例

//核心实现代码
let Single = (function(){
    let instance = null;
    class S{
        constructor(){
            if(instance){
                return instance;
            }
            instance = this;
            //code……
        }
    }
})();
//实例化测试
console.log( new Single() === new Single() );

---

**总结：**当需求实例唯一、命名空间时，就可以使用单例模式。结合闭包特性，用途广泛