这是我参与「第四届青训营 」笔记创作活动的的第五天

什么是设计模式？

工程化的东西都有人总结常见问题的解决方案，而设计模式就是软件设计中常见问题的解决方案的模型

• 历史经验的总结
• 与特定的编程语言无关
• 是解决问题的思想

23种设计模式大体分为三大类：

• 创建型：工厂模式，抽象工厂模式，建造者模式，单例模式，原型模式

• 结构型：适配器模式，装饰器模式，代理模式，外观模式，桥接模式，组合模式，享元模式

• 行为型：策略模式，模板方法模式，发布订阅模式，迭代器模式，职责链模式，命令模式，备忘录模式，状态模式，访问者模式，中介者模式，解释器模式。

浏览器中的设计模式

单例模式

• 单例模式的思路是：保证一个类只能被实例一次，每次获取的时候，如果该类已经创建过实例则直接返回该实例，否则创建一个实例保存并返回。

• 单例模式就是全局唯一访问的对象，比如window对象

• 应用场景：缓存，全局的状态管理等

实例：

发布订阅模式

• 定义：又称观察者模式，是一种订阅机制，可在被订阅对象发生变化时通知订阅者。
• 应用场景：从系统架构之间的解耦，到业务中一些实现模式，像邮件订阅，上线订阅等等，应用广泛。

let bus = {
    list: [],
    // 订阅
    subscribe(callback) {
        this.list.push(callback)
    },

    // 发布
    publish(text) {
        // 遍历事件列表  将回调函数执行
        this.list.forEach(callback => {
            callback && callback(text)
        })
    }
}

// 订阅者
bus.subscribe((value) => {
    console.log(value);
})

// 发布者
bus.publish('男人看了沉默')

javaScript中的设计模式

原型模式

• 定义：复制已有对象来创建新的对象。原型模式是指原型实例指向创建对象的种类，通过拷贝这些原型来创建新的对象，说白了就是克隆自己，生成一个新的对象。
• 优点：不再依赖构造函数或者类创建对象，可以将这个对象作为一个模板生成更多的新对象。
• 缺点：对于包含引用类型值的属性来说，所有实例在默认的情况下都会取得相同的属性值。

实例：

const user = { 
    name:'小明', 
    age:'30', 
    getInfo(){ 
        console.log(`姓名：${this.name}，年龄：${this.age}`) 
    }
} 

const xiaozhang = Object.create(user) 
xiaozhang.name = '小张' 
xiaozhang.age = 18 
xiaozhang.getInfo() // 姓名：小张，年龄：
18 user.getInfo() // 姓名：小明，年龄：30

代理模式

• 定义：在不暴露数据的形况下访问集合中的数据。
• 实现：代理模式的关键是，不方便直接访问一个对象或者需要劫持对象，做出一些别的操作的时候，提供一个替身对象来控制对这个对象的访问，客户实际上访问的是替身对象。通过替身对象代理真实对象的操作。
• 应用场景：比如vue中的数据绑定，代理工具，监控等。