JS设计模式

1、工厂模式

工厂模式类似于现实生活中的工厂可以生产大量相似的商品，去做同样的事情，实现同样的效果。 用函数来封装以特定接口创建对象的细节

function Person(name,age){
    var obj=new Object();
    obj.name=name;
    obj.age=age;
    obj.sayName=function(){
        return this.name;
    }
    return obj;
}
var p1=Person('cdsvf','33');
console.log(p1.sayName());//cdsvf
console.log(p1.constructor);//Object   不知道是哪个对象的实例  应该是Person的实例

说明：1、在函数中定义对象，并定义对象的各种属性，虽然属性可以为方法，但建议将属性为方法的属性定义到函数之外，这样就可以避免重复创建该方法。

　　　2、在函数的最后返回该对象

工厂模式是为了解决多个类似对象声明的问题，即解决实例化对象时产生重复的问题。

缺点：不知道是哪个对象的实例

2、构造函数

function Person(name,age){
    this.name=name;
    this.age=age;
    this.sayName=function(){
        return this.name;
        }
}
var p1=new Person('cdsvf','33');
var p2=new Person('asw','12');
console.log(p1.sayName());//cdsvf
console.log(p1.constructor);//Person
console.log(p2.constructor);//Person

说明：1、与工厂模式相比，使用构造函数创建对象时无需在函数内部创建对象，而是使用this指代，且函数无需return

　　   2、p1和p2分别保存着Person的一个不同实例

3、原型模式

var sayName=function(){
    return 'name';
}
function Person(){
    Person.prototype.name='cdsvf';
    Person.prototype.age='33';
    Person.prototype.sayName=sayName;
}
var p1=new Person();
console.log(p1.name);//cdsvf

说明：函数中不对属性进行定义，利用prototype属性对属性进行定义。

4、构造函数+原型模式（推荐）

function Person(){
    this.name='cdsvf';
    this.age='33';
}
Person.prototype.sayName=function(){
    return this.name;
}
var p1=new Person();
console.log(p1.name);//cdsvf

5、单例模式

保证一个类仅有一个实例，实现方法为：先判断实例是否存在，如果存在则直接返回，如果不存在就创建再返回，这就确保了一个类只有一个实例。

class CreateUser{
    constructor(name){
        this.name=name;
        this.getName();
    }
    getName(){
        return this.name;
    }
}
var ProxyMode=(function(){
    var instance=null;
    return function(name){
        if(!instance){
            instance=new CreateUser(name);
        }
        return instance;
    }
})();

var a=new ProxyMode('aaa');
var b=new ProxyMode('bbb');
console.log(a===b);//true

适用场景：一个单一对象，比如：弹窗，无论点击多少次，弹窗之应该被创建一次。

6、观察者模式

定义对象之间的一对多的依赖关系，当一个对象的状态发生改变时，所有依赖它的对象都将得到通知。由主体和观察者组成，主体负责发布事件，观察者通过订阅这些事件来观察主体。

例如事件绑定，就是一个标准的观察者模式

document.body.addEventListener('click',function(){
    console.log('3');
})
document.body.click();

对于发布者代码如自定义事件，handlers用于存放订阅者以及订阅者订阅的事件

应用场景：

（1）DOM事件

（2）自定义事件

优点：时间上解耦，对象之间解耦

缺点：创建订阅者本身要消耗一定的时间和内存，当订阅一个消息后，也许该消息永远也没有发生，但是这个订阅者会始终存在于内存中。

　　　虽然弱化了对象之间的联系，但是过度使用的话，对象与对象之间的必要联系也被深埋在背后，导致程序难以跟踪维护和理解。

 

7、策略模式

定义一些列的算法，把他们一个个封装起来。

var levelObj={
    "A":function(money){
        return money*4;
    },
    "B":function(money){
        return money*3;
    },
    "C":function(money){
        return money*2;
    }
}
var p=function(level,money){
    return levelObj[level](money);
}
console.log(p("A",100));