网易课程学习——JS进阶（设计模式）

通过一些设计模式，我们可以组织模块间的组成结构，也可以帮助我们设计模块直接如何沟通，并且可以可以使我们的代码更加简洁、优雅！

设计模式原则

• 开闭原则 —— 对扩展开放，对修改封闭，增加新功能时添加新的代码，而非改动原先的代码
• 单一职责原则 —— 每个模块只专一一件事
• 依赖倒置原则 —— 上层模块不依赖于下层的具体模块，而是依赖于下层的抽象
• 接口隔离原则 —— 接口细化，使其能力单一，更关注于接口
• 迪米特法则 —— 两个对象之间的沟通，互相了解越少越好，减少直接沟通
• 里氏替换原则 —— 在用子类继承父类的时候，确保继承了父类所有属性与方法

设计模式分类

• 创建型 —— 帮助更优雅的创建对象
  1. 工厂模式
  2. 单例模式
  3. 建造者模式
  4. 原型模式
• 结构型 —— 帮助更优雅的设计代码结构
  1. 外观模式
  2. 享元模式
  3. 适配器模式
  4. 桥接模式
  5. 装饰者模式
• 行为型 —— 模块之间的行为模式总结，帮助组织模块行为
  1. 观察者模式
  2. 职责链模式
  3. 命令模式
  4. 状态模式
  5. 策略模式
  6. 迭代器模式
• 技巧型 —— 帮助优化代码的技巧
  1. 链模式
  2. 惰性模式
  3. 委托模式
  4. 等待者模式
  5. 数据访问模式

常用模式介绍

工厂模式

• 目的：方便大量的创造对象
• 应用场景：当某一个对象需要被经常创建的时候
• 基本结构：实现一个方法，通过调用方法拿到想要的对象，减少new的次数
• 例子：jQuery库，根据上下文或传入的元素创建jQuery对象

(function () {
    var jQuery = function (selector, context) {
        return new jQuery.fn.init(selector, context); // 创建一个新的jQuery对象
    }
    jQuery.fn = jQuery.prototype = {
        init: function (selector, context) {
            // 初始化jQuery对象
        }
    }
    jQuery.fn.init.prototype = jQuery.fn;
    jQuery.extend = jQuery.fn.extend = function () {

    }
    window.$ = window.jQuery = jQuery;
})()

建造者模式

• 目的：需要组合出一个全局对象
• 应用场景：当要创建一个庞大、组合对象的时候
• 基本结构：把一个复杂的类各个部分拆分成独立的类，然后再最终的类中整合到一起，返回最终的类
• 例子：实现一个编辑器，由字体控制、状态控制模块构成

function Editor() {
    this.FontController = new FontController()
    this.StateController = new StateController()
}

function FontController() {

}

FontController.prototype.changeColor = function () {

}
FontController.prototype.changeFontsize = function () {

}

function StateController() {
    this.state = []
    this.nowIndex = 0
}

StateController.prototype.saveState = function () {

}
StateController.prototype.stateBack = function () {
    let _state = this.state[this.nowIndex - 1]
}
StateController.prototype.stateGo = function () {

}

window.Editor = Editor

单例模式

• 目的：需要确保只有全局只有一个对象
• 应用场景：为了避免重复创建，避免多个对象存在互相干扰
• 基本结构：定义一个方法，使用对象时只能通过该方法拿到存在内部的同一实例化对象
• 例子：实现一个数据存储对象

function Store() {
    this.store = {}
    if (Store.install) {
        return Store.install
    }
    Store.install = this
}

Store.install = null