史上最全的JS设计模式（二）

类型	目的	模式	核心
创建型	**处理对象创建机制** 使得程序可以更加灵活的判断针对某个给定实例需要创建哪些对象。	单例模式	确保一个类只有一个实例，并提供对该实例的全局访问。
		简单工厂模式	一个工厂类根据传入的参量决定创建出那一种产品类的实例。
		工厂模式	定义一个接口用于创建对象，但是让子类决定初始化哪个类。工厂方法把一个类的初始化下放到子类。
		抽象工厂模式	为一个产品族提供了统一的创建接口。当需要这个产品族的某一系列的时候，可以从抽象工厂中选出相应的系列创建一个具体的工厂类
		建造者模式	封装一个复杂对象的构建过程，并可以按步骤构造
		原型模式	用原型实例指定创建对象的种类，并且通过拷贝这些原型,创建新的对象
结构型	**处理对象的组合** 将对象结合在一起形成更大的结构	代理模式	通过替身对象实现对访问动作的控制和处理
		适配器模式	将一个类的方法接口转换成客户希望的另外一个接口
		装饰器模式	动态的给对象添加新的功能
		组合模式	将对象组合成树形结构以表示“”部分-整体“”的层次结构
		享元模式	通过共享技术来有效的支持大量细粒度的对象
		外观模式	对外提供一个统一的方法，来访问子系统中的一群接口
		桥接模式	将抽象部分和它的实现部分分离，使它们都可以独立的变化
行为型	**改善或者简化系统中不同对象之间的通信**	观察者模式	定义了对象一对多的依赖关系。当目标对象状态发生变化后，会通知到所有的依赖对象
		模版模式	抽象父类定义抽象方法和具体运行策略，来制定子类的运行顺序和机制； 具体子类来重写父类的抽象方法
		策略模式	定义多个策略类实现具体算法 定义一个环境类通过请求参数来决定使用哪些策略
		状态模式	允许一个对象在其对象内部状态改变时改变它的行为
		中介者模式	用一个中介对象来封装一系列的对象交互
		迭代器模式	提供一种方法顺序访问一个聚合对象中的各个元素，不需要关心对象的内部构造
		备忘录模式	在不破坏封装的前提下，保持对象的内部状态
		访问者模式	在不改变数据结构的前提下，增加作用于一组对象元素的新功能
		解释器模式	给定一个语言，定义它的文法的一种表示，并定义一个解释器
		命令模式	将命令请求封装为一个对象，使得可以用不同的请求来进行参数化。
		职责链模式	将请求的发送者和接收者解耦，使的多个对象都有处理这个请求的机会

大家做组件/大型方案的时候会面临构建一个**复杂对象**的场景，这个对象的每个部分都由一些算法/逻辑生成，并且这些部分都随时可能变化，并且属性组合也存在一定逻辑和步骤。

建造者模式的主要结构和过程如上图所示，主要包括了Product产品、建造者Builder、Director指挥者这3种类。其中Product定义这个复杂对象的属性和结构，Builder定义每个属性的生成函数，Director负责分步调用Builder的各个函数，生成具体对象实例。

// 定义Car的Product类
function Car(){    
    this.color='' // 颜色    
    this.brand='' // 品牌    
    // ...其他复杂属性
}

// 定义BenzBuilder建造者
function BenzBuilder(){
    this.car = new Car()
    this.genColor =()=>{
        this.car.color = 'black'
    }
    this.genBrand = ()=>{
        this.car.brand = 'benz'
    }
}

// 定义CarDirector指挥者
function CarDirector(){
    this.genCar = (builder)=>{
        // 分步调用builder的函数，生成Car对象的属性
        builder.genColor()
        builder.genBrand()
        return builder.car
    }
}

最后通过调用Diretor，指挥具体的Builder生成特定的Car

var benzBuilder = new BenzBuilder()
var director = new CarDirector()
// 调用
var car = director.genCar(benzBuilder) // Car {color: "black", brand: "benz"}

如果我们突然又要生产一个宝马，因为生产对象和属性组装的逻辑是一样的。所以我们可以直接定义BaomaBuilder，进行指挥生产。

// 定义BenzBuilder建造者
function BaomaBuilder(){
    this.car = new Car()
    this.genColor =()=>{
        this.car.color = 'red'
    }
    this.genBrand = ()=>{
        this.car.brand = 'baoma'
    }
}

var baomaBuilder = new BaomaBuilder()
// 调用
var car2 = director.genCar(baomaBuilder) //Car {color: "red", brand: "baoma"}

当我们面临对大量重复对象进行处理时，如果创建多个对象，会使得系统内存占用过多，造成系统资源的浪费。

网上摘抄一个不错的栗子🌰 ：要对某个班进行身体素质测量，根据性别的区分来测量身高体重来进行评判

// 健康测量
function Fitness(name, sex, age, height, weight) {
    this.name = name;
    this.sex = sex;
    this.age = age;
    this.height = height;
    this.weight = weight;
}

// 开始评判
Fitness.prototype.judge = function() {
    var ret = this.name + ': ';
    ret += this.sex === 'male'？this.judgeMale(): this.judgeFemale()
    console.log(ret);
};

// 男性评判规则
Fitness.prototype.judgeMale = function() {
    var ratio = this.height / this.weight;
    return this.age > 20 ? (ratio > 3.5) : (ratio > 2.8);
};

// 女性评判规则
Fitness.prototype.judgeFemale = function() {
    var ratio = this.height / this.weight;
    return this.age > 20 ? (ratio > 4) : (ratio > 3);
};

var a = new Fitness('A', 'male', 18, 160, 80);
var b = new Fitness('B', 'male', 21, 180, 70);
var c = new Fitness('C', 'female', 28, 160, 80);
var d = new Fitness('D', 'male', 18, 170, 60);
var e = new Fitness('E', 'female', 18, 160, 40);

// 开始评判
a.judge(); // A: false
b.judge(); // B: false
c.judge(); // C: false
d.judge(); // D: true
e.judge(); // E: true

评判五个人就需要创建五个对象，一个班就需要创建几十个对象 :（

这么一来我们只需要维护男和女两个对象（使用factory对象），而其他变化的部分则在外部维护（使用manager对象）

// 健康测量
function Fitness(sex) {
    this.sex = sex;
}

// 工厂，创建可共享的对象
var FitnessFactory = {
    objs: [],
    create: function(sex) {
        if (!this.objs[sex]) {
            this.objs[sex] = new Fitness(sex);
        }
        return this.objs[sex];
    }
};

// 管理器，管理非共享的部分
var FitnessManager = {
    fitnessData: {},

    // 添加一项
    add: function(name, sex, age, height, weight) {
        var fitness = FitnessFactory.create(sex);
       // 存储变化的数据
        this.fitnessData[name] = {
            age: age,
            height: height,
            weight: weight
        };
        return fitness;
    },

    // 从存储的数据中获取，更新至当前正在使用的对象
    updateFitnessData: function(name, obj) {
        var fitnessData = this.fitnessData[name];
        for (var item in fitnessData) {
            if (fitnessData.hasOwnProperty(item)) {
                obj[item] = fitnessData[item];
            }
        }
    }
};

// 开始评判
Fitness.prototype.judge = function(name) {
    // 操作前先更新当前状态（从外部状态管理器中获取）
    FitnessManager.updateFitnessData(name, this);

    var ret = name + ': ';
    ret += this.sex === 'male'？this.judgeMale(): this.judgeFemale()
    console.log(ret);
};

// 男性评判规则
Fitness.prototype.judgeMale = function() {
    var ratio = this.height / this.weight;
    return this.age > 20 ? (ratio > 3.5) : (ratio > 2.8);
};

// 女性评判规则
Fitness.prototype.judgeFemale = function() {
    var ratio = this.height / this.weight;
    return this.age > 20 ? (ratio > 4) : (ratio > 3);
};

var a = FitnessManager.add('A', 'male', 18, 160, 80);
var b = FitnessManager.add('B', 'male', 21, 180, 70);
var c = FitnessManager.add('C', 'female', 28, 160, 80);
var d = FitnessManager.add('D', 'male', 18, 170, 60);
var e = FitnessManager.add('E', 'female', 18, 160, 40);

// 开始评判
a.judge('A'); // A: false
b.judge('B'); // B: false
c.judge('C'); // C: false
d.judge('D'); // D: true
e.judge('E'); // E: true

这样使得我们只需要维护2个对象就可以完成整个班级几十个同学的测量工作，但是也使得系统的**复杂度显著的提高...**

当系统存在多个维度的变化时，我们需要将这些维度分类抽离出来，使得各个维度能够独立变化，减少这些变化的耦合，这个抽离的过程就使用了桥接模式。

说了这么多，是不是有点迷糊？简单的来说，桥接模式就是函数的抽取，我们将某些动作抽取成独立函数，在具体业务运行时去调用各个函数来实现特殊的复杂结构。

// 定义特性类
class Tall {
    constructor(height){
        this.height = height
    }

    descript(){ console.log('您可真高') }
}

class Handsome {
     descript(){ console.log('帅气！') }
}

class Smart {
     descript(){ console.log('别人家的孩子真聪明') }
}

// 定义具体实现类
// 小阮是一个高大帅气的男孩
class XiaoRuan {
    constructor(height){
        this.height = new Tall(height)
        this.face = new Handsome()
    }

    init(){
        this.height.descript()
        this. face.descript()
    }
}

// 小迟是一个高大聪明的男孩
class XiaoChi {
    constructor(height){
        this.height = new Tall(height)
        this.head = new Smart()
    }

    init(){
        this.height.descript()
        this.head.descript()
    }
}

可以看到两个同学有公用的函数，也有不同的函数，这些函数都是描述不同维度的属性。

桥接模式正是将这些维度抽离成抽象类，然后在不同的具体实现类中进行组装和调用。同时对象也可以随时改变自己的实现工程，将抽象和实现进行充分的解耦，从而产生更好的结构化系统。

**迭代器模式**允许我们遍历对象里的所有元素，而无需公开对象的内部表示。

大家看名字（Iterator迭代器）是不是有点眼熟，其实JS中Array、Object、Map、Set这四种数据集合都拥有满足迭代器模式的遍历方法。

eg：
Array.forEach    Object.keys   Map.forEach    Set.forEach

如果要实现一个迭代器模式，需要有index指针、next函数、value当前对象、done状态。下面我们实现一个简单的迭代器：

function makeIterator(array,cb) {
  var nextIndex = 0;
  return {
    next: function() {
      var result= nextIndex < array.length ?
        {value: array[nextIndex++], done: false} :
        {value: undefined, done: true};
      cb(result);
      return result
    },
    init:function(){
        var result ={}
        while(result.done!==true){ result=this.next()  }
    }
  };
}

var it = makeIterator(['a', 'b'], console.log);
it.init()
// { value: "a", done: false }
// { value: "b", done: false }
// { value: undefined, done: true }

因为这个模式比较好理解，所以我们只文字举例：

**访问者模式**的主要目的是想将数据结构和数据操作分离，解决稳定的数据结构和频繁变化的操作方法耦合的问题。访问者模式主要用于操作特殊结构的对象或者一系列相同结构对象。

下面我们实战一下，需要大家来设计雇员管理系统，用于对雇员的剩余假期进行财务结算发放福利。

class Employee {
    constructor(name, remainingHolidays, dgree, performance){
        this.name=name //名称
        this.remainingHolidays= remainingHolidays // 剩余假期天数
        this.dgree=dgree // 雇员级别 1初级，2中级，3高级
        this.performance=performance // 绩效 1不及格 2及格 3优秀
    }
}

class  EmployeeGroup {
    this.employeeMap=new Map()
    // 新增员工
    addEmployee(employee){
        this.employeeMap.set(employee.name, employee)
    }
}

在今年对雇员的剩余假期，公司打算采用 【 200元 x（剩余天数 x 级别 x 绩效）】的方式进行福利转换，换成钱发给员工。那么我们应该如何设计这个功能呢？

---我是答案分割线---

class  EmployeeGroup {
    this.employeeMap=new Map()

    addEmployee(employee){
        this.employeeMap.set(employee.name, employee)
    }

    // 遍历输出结果
    countMoney(){
        for(let employee of this.employeeMap.values()){
            const {name,remainingHolidays, dgree, performance} = employee
            const result= 200* remainingHolidays * dgree * performance
            console.log(name, result )
        }
    }

}

看起来没什么毛病。但是如果18年是这个规则，19年却要变成 【 100元 x（剩余天数 x ( 级别 +3 ) x ( 绩效 +2 ) ）】怎么办。我们需要直接修改EmployeeGroup函数的countMoney方法吗？这样违背了设计模式的开闭原则，我们应该可以对新增开发，对修改关闭。

class Employee {
    constructor(name, remainingHolidays, dgree, performance){
        this.name=name //名称
        this.remainingHolidays= remainingHolidays // 剩余假期天数
        this.dgree=dgree // 雇员级别 1初级，2中级，3高级
        this.performance=performance // 绩效 1不及格 2及格 3优秀
    }

    accept(visitor){
        visitor.visit(this)
    }
}

class  EmployeeGroup {
    employeeMap=new Map()

    addEmployee(employee){
        this.employeeMap.set(employee.name, employee)
    }

    // 遍历accept
    accept(visitor){
        for(let employee of this.employeeMap.values()){
            employee.accept(visitor)
        }
    }

}

然后我们创建一个抽象访问者对象和具体访问者对象

// 抽象访问者，定义访问的接口
class MoneyVisitor{
    visit(employee){
        throw new Error('need overwrite this function')
    }
}

// 2018年的福利规则
class MoneyVisitorIn2018 extends MoneyVisitor{
    visit(employee){
        const {name,remainingHolidays, dgree, performance} = employee
        const result= 200* remainingHolidays * dgree * performance
        console.log(name, result )
    }
}

当我们需要实现福利转换的时候，我们只需要将具体的visitor对象传入给group，由各个employee对象来执行具体的方法即可

const group = new EmployeeGroup()
group.addEmployee(new Employee('小王',3,1,1))
group.addEmployee(new Employee('小李',1,2,3))

group.accept(new MoneyVisitorIn2018())

// 小王 600
// 小李 1200

这样当我们需要对福利规则进行变化的时候，我们只需要创建新的规则Visitor进行调用即可，不会对employee和group对象的结构进行破坏！

Dep.prototype.depend = function depend () {
  if (Dep.target) {
    Dep.target.addDep(this);
  }
};

Watcher.prototype.addDep = function addDep (dep) {
  var id = dep.id;
  if (!this.newDepIds.has(id)) {
    this.newDepIds.add(id);
    this.newDeps.push(dep);
    if (!this.depIds.has(id)) {
      dep.addSub(this);
    }
  }
};