设计模式是什么？有哪些？

【问】设计模式是什么？有哪些？

【答】设计模式是针对特定问题摸索出的最佳实践经验总结，通过抽象化的手段形成通用模型，其目的是为了软件的可复用性、可扩展、易于理解等。前端开发常用的设计模式有：

1. 单例模式：保证一个类仅有一个实例，并提供一个访问他的全局访问点
2. 观察者模式（同发布订阅者模式，不同的实现）：被观察者状态变化后通知观察者
3. 工厂模式：批量创建对象

【实现1：单例模式】

function Person(){
    this.name = "zhangsan"
}

const singleIns = (function() {
    let instance = null;
    return function (){
        if(!instance){
            instance = new Person();
        }
        return instance;
    }
})()

const p1 = singleIns();
const p2 = singleIns();

【实现2-1：观察者模式】

// 观察者构造函数 ==============================
class Observer {
    constructor(name, fn = () => {}) {
        this.name = name;
        this.fn = fn;
    }
}
const observer1 = new Observer('观察者1', (state) => {console.log('我观察者1收到了', state)}); // 观察者1
const observer2 = new Observer('观察者2', (state) => {console.log('我观察者2收到了', state)}); // 观察者2
// 被观察者构造函数 =============================
class Subscribe {
    constructor(state) {
        this.state = state;
        this.observers = [];
    }
    setState(val) {
        this.state = val;
        this.observers.forEach((item) => {
            item.fn(this.state);
        })
    }
    addObserver(obs) {
        this.observers = this.observers.filter(item => item !== obs)
        this.observers.push(obs);
    }
    delObserver(obs) {
        this.observers = this.observers.filter(item => item !== obs)
    }
}
const Subscribe1 = new Subscribe(); // 被观察者1

//测试=========================================
Subscribe1.addObserver(observer1);
Subscribe1.addObserver(observer2);
// Subscribe1.setState('值修改为1')

【实现2-2：发布订阅者模式】

// 订阅发布者模式构造函数======================================
class Observer {
    constructor() {
        this.message = {};
    }
    on(type, fn) {
        if(!this.message[type]){
            this.message[type] = [];
        }
        this.message[type].push(fn);
    }
    off(type, fn) {
        if(!fn) {
            delete this.message[type];
            return;
        }
        if(!this.message[type]){
            return;
        }
        this.message[type] = this.message[type].filter(item => item !== fn);
    }
    trigger(type) {
        if(!this.message[type]) {
            return;
        }
        this.message[type].forEach(item => item());
    }
}
//测试=========================================
const observer1 = new Observer();
observer1.on('type1', handler1);
observer1.on('type1', handler1);
observer1.on('type2', handler2);
function handler1() {console.log("handler1触发")}
function handler2() {console.log("handler2触发")}
// observer1.off('type1', handler1);
// observer1.trigger('type2');

订阅：

取消订阅：

发布通知订阅：

【实现3：工厂模式】

// 工厂模式构造函数======================================
function CarFactory(brand, price) {
    var car = {};
    car.brand = brand;
    car.price = price;
    car.getPrice = function() {
        return this.price;
    }
    return car;
}

var car1 = CarFactory('品牌A', 1);
var car2 = CarFactory('品牌B', 2);

参考1：JS-设计模式 bilibili
参考2：JS设计模式一：工厂模式 掘金