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

设计模式

23种设计模式

1. 创建型：如何更灵活地创建一个对象使用
2. 结构型：如何灵活地将对象组装成较大的结构
3. 行为型：阀组对象间的高效通信和职责划分

浏览器中的设计模式

• 单例模式
• 发布订阅模式

单例模式

单例：全局唯一访问对象

应用场景：缓存、全局状态管理等

        if(this.instance){
            return this.instance;
        }
        //Request是一个事先定义的对象
        this.instance = new Request();
        return this.instance;
}

如何实现单例？通过getInstance()来创建Request()对象；

发布订阅模式

一种订阅机制，可在被订阅对象发生变化时通知订阅者。

应用场景：从系统架构之间的解耦，到业务中一些实现模式，例如邮件订阅、上线订阅等 可以看到的是，在日常使用中很多模式已经在使用了

JavaScript中的设计模式

• 原型模式
• 代理模式
• 迭代器模式

原型模式

原型：被用于复制现有实例来生成新实例的函数
实例：是类在实例化之后一个一个具体的对象

原型链（除继承以外，实际上就很接近原型模式）
每个构造函数都有一个原型对象，原型对象都包含一个指向构造函数的指针，而实例都包含一个指向原型对象的内部指针。那么假如我们让原型对象等于另一个类型的实例，结果会怎样？显然，此时的原型对象将包含一个指向另一个原型的指针，相应地，另一个原型中也包含着一个指向另一个构造函数的指针。假如另一个原型又是另一个类型的实例，那么上述关系依然成立。如此层层递进，就构成了实例与原型的链条。

    this.age = age       
}
Person.prototype.name = 'woody'
var person1 = new Person()
var person2 = new Person()
console.log(person1.name) //woody
console.log(person2.name)  //woody

代理模式

可自定义控制对原对象的访问方式，并且允许在更新前后做一些额外处理。

应用场景：监控、代理工具、前端框架实现等等

迭代器模式

在不暴露数据类型的情况下访问集合中的数据

应用场景：数据结构

前端框架中的设计模式

• 代理模式
• 组合模式

代理模式

和JavaScript中可以提供的API代理模式不同。
前端框架中对DOM操作的代理：

graph TD
更改DOM属性 --> 更新虚拟DOM　--> 视图更新

组合模式

可多个对象组合使用，也可单个对象独立使用

应用场景：DOM、前端组件、文件目录、部门