【学习笔记】JS设计模式总结

前言：这段时间都在学习Vue的知识，虽然手边放着一本js高程，但确实好久没有好好复习了。温故而知新，因此特意把JS常见的设计模式总结，希望对大家有所帮助...

1. 工厂模式

释义：像工厂一样流水线般生产一个个对象

核心：return一个对象，创建不同的引用类型

// 工厂模式
function createPerson (){
    //定义工厂
    let person = {
        name:'人',
        walk:function(){
            console.log('walk')
        }
    }
    return person
}
let tangj = createPerson()
console.log(tangj.name)  // 人

2. 构造函数模式

释义：在JavaScript里，构造函数通常是认为用来实现实例的，JavaScript没有类的概念，但是有特殊的构造函数。通过new关键字来调用自定义的构造函数，在构造函数内部，this关键字引用的是新创建的对象。

核心：属性邦到this上，方法绑到prototype上，使用new来新增实例

function People(){
    this.name = '人'  //把属性写在构造函数内部
}
People.prototype.walk = function(){
    console.log('walk') //方法写在原型对象上
}
let tangj = new People()
console.log(tangj.name) //人

3. 单例模式

释义：保证一个类只有一个实例，并且仅提供一个访问它的全局访问点

核心：产生一个类的唯一实例

//单例模式
function createPeople (){
    let name;
    return function (useName){
        return name || (name = useName) //如果name存在返回name，如果不存在返回传入的值
    }
}
let single = createPeople()
console.log(single('tangj')) //tangj
console.log(single()) //tangj
console.log(single('tangjSir'))  //tangj

4. 混合模式

释义：一般继承的过程就是混合模式

核心：提供能够被一个或一组子类简单继承功能的类

//混合模式
function People(name,age){
    this.name = name
    this.age = age
}
People.prototype.sayName = function(){
    console.log(this.name)
}
function Student(name,age,score){
    People.call(this,name,age);
    this.score = score;
}
function creat(prototypeObj){
    let empty = function(){};
    empty.prototype = prototypeObj;
    return new empty()
}
Student.prototype = creat(People.prototype);
Student.prototype.work = function(){
    console.log('work')
}

5. 模块模式

核心：闭包

let Person = (function(){
    let name = '小明';
    function sayName(){
        console.log(name)
    }
    return {
        name:name,
        sayName:sayName
    }
})()
Person.sayName()//小明

6. 发布订阅模式

释义：多个订阅者绑定一个发布者，当订阅者监听到发布者变化执行回调函数

核心：绑定事件

let EventCenter = (function(){
    let events = {};
    function on(evt,handler){
        //实现监听
        //使用“或”是为了可以对同一个事件多次进行回调
        events[evt] = events[evt] || [];
        events[evt].push({
            handler:handler
        })
    }
    function fire(evt,args){
        if(!events[evt]){
            return
        }
        for(let i = 0;i<events[evt].length;i++){
            //遍历实现对同一事件的多次回调
            events[evt][i].handler(args)
        }
    }
    function off(name){
        delete events[name];
    }
    return {
        on:on,         //订阅者
        fire:fire,     //发布者
        off:off        //取消订阅
    }
})()

EventCenter.on('hello',function (num){
    console.log(num)
})
EventCenter.on('hello',function(num){
    console.log(num)
})
EventCenter.fire('hello',1) //打印两次 1