前端 javascript 设计模式

归纳设计模式

javascript 设计模式

设计模式
javascript 设计模式

---

• 单例（Singleton）模式
  某个类只能生成一个实例，该类提供了一个全局访问点供外部获取该实例，其拓展是有限多例模式。

• 原型（Prototype）模式
  将一个对象作为原型，通过对其进行复制而克隆出多个和原型类似的新实例。

• 工厂方法（Factory Method）模式
  定义一个用于创建产品的接口，由子类决定生产什么产品。

• 抽象工厂（AbstractFactory）模式
  提供一个创建产品族的接口，其每个子类可以生产一系列相关的产品。

• 建造者（Builder）模式
  将一个复杂对象分解成多个相对简单的部分，然后根据不同需要分别创建它们，最后构建成该复杂对象。

• 代理（Proxy）模式
  为某对象提供一种代理以控制对该对象的访问。即客户端通过代理间接地访问该对象，从而限制、增强或修改该对象的一些特性。

• 适配器（Adapter）模式
  将一个类的接口转换成客户希望的另外一个接口，使得原本由于接口不兼容而不能一起工作的那些类能一起工作。

• 桥接（Bridge）模式
  将抽象与实现分离，使它们可以独立变化。它是用组合关系代替继承关系来实现，从而降低了抽象和实现这两个可变维度的耦合度。

• 装饰（Decorator）模式
  动态的给对象增加一些职责，即增加其额外的功能。

• 外观（Facade）模式
  为多个复杂的子系统提供一个一致的接口，使这些子系统更加容易被访问。

• 享元（Flyweight）模式
  运用共享技术来有效地支持大量细粒度对象的复用。

• 组合（Composite）模式
  将对象组合成树状层次结构，使用户对单个对象和组合对象具有一致的访问性。

• 模板方法（Template Method）模式
  定义一个操作中的算法骨架，而将算法的一些步骤延迟到子类中，使得子类可以不改变该算法结构的情况下重定义该算法的某些特定步骤。

• 策略（Strategy）模式
  定义了一系列算法，并将每个算法封装起来，使它们可以相互替换，且算法的改变不会影响使用算法的客户。

• 命令（Command）模式
  将一个请求封装为一个对象，使发出请求的责任和执行请求的责任分割开。

• 职责链（Chain of Responsibility）模式：
  把请求从链中的一个对象传到下一个对象，直到请求被响应为止。通过这种方式去除对象之间的耦合。

状态（State）模式：
允许一个对象在其内部状态发生改变时改变其行为能力。

• 观察者（Observer）模式：
  多个对象间存在一对多关系，当一个对象发生改变时，把这种改变通知给其他多个对象，从而影响其他对象的行为。

• 中介者（Mediator）模式
  定义一个中介对象来简化原有对象之间的交互关系，降低系统中对象间的耦合度，使原有对象之间不必相互了解。

• 迭代器（Iterator）模式
  提供一种方法来顺序访问聚合对象中的一系列数据，而不暴露聚合对象的内部表示。

访问者（Visitor）模式：在不改变集合元素的前提下，为一个集合中的每个元素提供多种访问方式，即每个元素有多个访问者对象访问。

• 备忘录（Memento）模式
  在不破坏封装性的前提下，获取并保存一个对象的内部状态，以便以后恢复它。

• 解释器（Interpreter）模式
  提供如何定义语言的文法，以及对语言句子的解释方法，即解释器。

---

6大原则

• 开闭原则
  当应用的需求改变时，在不修改软件实体的源代码或者二进制代码的前提下，可以扩展模块的功能，使其满足新的需求。 可复用性，可维护性

抽象约束、封装变化：抽象对一组事物的通用描述，没有具体的实现；将相同的变化封装到一个接口或抽象类中，将不同的变化封装到不同的接口或抽象类中

• 里氏替换原则
  子类可以扩展父类的功能，但不能改变父类原有的功能

因为继承带来的侵入性，增加了耦合性，也降低了代码灵活性，父类修改代码，子类也会受到影响，此时就需要里氏替换原则。

1，子类必须实现父类的抽象方法，但不得重写父类的非抽象(已实现的)方法。,
2，子类中可增加自己特有的方法。(可以随时扩展)
3，当子类覆盖或者实现父类的方法时,方法的前置条件(方法形参)要比父类输入参数更加宽松。否则会调用到父类的方法。
4，当子类的方法实现父类的抽象方法时，方法的后置条件（即方法的返回值）要比父类更严格。否则会调用到父类的方法。

• 依赖倒置原则
  通过要面向接口的编程来降低类间的耦合性

面向接口编程，依赖于抽象而不依赖于具体
使用方只关注接口而不关注具体类的实现

• 单一职责原则： 唯一，才能保证对象的细粒度

• 接口隔离原则
  单一职责原则主要是约束类，它针对的是程序中的实现和细节；接口隔离原则主要约束接口，主要针对抽象和程序整体框架的构建。一个接口对应一个功能模块

• 迪米特法则

当前对象本身、当前对象的成员对象、当前对象所创建的对象、当前对象的方法参数等，这些对象同当前对象存在关联、聚合或组合关系，可以直接访问这些对象的方法。

第三方转发该调用

---

单例模式

创建型模式： “将对象的创建与使用分离”

单例模式：限制一个类只能有一个实例化对象。并提供一个访问他的全局访问点

经典的实现方式是，创建一个类，这个类包含一个方法，这个方法在没有对象存在的情况下，将会创建一个新的实例对象。如果对象存在，这个方法只是返回这个对象的引用。

使用闭包持久保存函数上一次的执行结果，在之后的调用中直接返回。例如js 中模块加载的方式：require、import都使用到了该模式

var getSingle = function (fn) { // 创建单例方法
    var result // 通过闭包保存创建过的对象
    return function () {
        return result || (result = fn.apply(this, arguments))
    }
}
var createPerson = getSingle(function (name) {
    return {name: name}
})

var person1 = createPerson('张三')
var person2 = createPerson('李四')
console.log(person1, person2);  // {name: '张三'} {name: '张三'}

---

策略模式

定义：定义一系列算法，把他们一个个封装起来，并且可以相互替换
要达成一个目的的时候通常会有多种方案可以选择

var strategies = { // 针对不同表现的员工定制策略，每个策略接受同类型的参数返回相同的结果
    S(salary) {  return salary * 3  },
    A(salary) {    return salary * 2 },
    B(salary) {     return salary  },
    C(salary) {     return -salary }
}
var calculateBonus = function (salary, strategy) {
    return strategies[strategy](salary)
}

console.log(calculateBonus(10000, 'S')); // 30000
console.log(calculateBonus(1000, 'C')); // -1000 

---

工厂模式

构造函数和创建者分离，对new操作进行封装
符合开放封闭原则

class Creator {
    create(name) {  return new Animal(name) }
}
class Animal {
    constructor(name) {  this.name = name }
}

var creator = new Creator()
var duck = creator.create('Duck')
console.log(duck.name) // Duck

---

适配器模式

将一个类的接口转化为另外一个接口，以满足用户需求，使类之间接口不兼容问题通过适配器得以解决。

class Plug {
  getName() { return 'iphone充电头';  }
}
class Target {
  constructor() {  this.plug = new Plug();  }
  getName() {
    return this.plug.getName() + ' 适配器Type-c充电头';
  }
}
let target = new Target();
target.getName(); // iphone充电头 适配器转Type-c充电头

可以让任何两个没有关联的类一起运行。 提高了类的复用。
适配对象，适配库，适配数据

---

代理模式

定义：当直接访问一个对象不方便或者不满足需要时，为其提供一个替身对象来控制对这个对象的访问

应用： 防抖动函数（debounce 常用于控制用户输入后回调函数触发的时机），节流函数（throttle 常用于控制resize、scroll等事件的触发频率）

var throttle = function (fn, interval) {
    var firstTime, timer
    return function () {
        var _this = this
        if(!firstTime) {
            fn.apply(this, arguments)
            firstTime = true
        }        
        if (!timer) {
            timer = setTimeout(function() {
                fn.apply(_this, arguments)
                timer = null
            }, interval);
        }
    }
}
var onScroll = function () {
    console.log('onScroll', Date.now())
}
var throttleOnScroll = throttle(onScroll, 2000)

setInterval(throttleOnScroll, 300) // 每2秒执行一次onScroll函数

使用代理对象加载图片的例子来理解代理模式,当网络不好的时候，图片的加载需要一段时间，这就会产生空白，影响用户体验，这时候我们可在图片真正加载完之前，使用一张loading占位图片，等图片真正加载完再给图片设置src属性。

class MyImage {
    constructor() {
        this.img = new Image()
        document.body.appendChild(this.img)
    }
    setSrc(src) {  this.img.src = src  }
}
class ProxyImage {
    constructor() {  this.proxyImage = new Image() }
    setSrc(src) {
        let myImageObj = new MyImage()
        myImageObj.img.src = 'file://xxx.png'  //为本地图片url
        this.proxyImage.src = src
        this.proxyImage.onload = function() {
            myImageObj.img.src = src
        }
    }
}
var proxyImage = new ProxyImage()
proxyImage.setSrc('http://xxx.png') //服务器资源url

---

迭代器模式

定义：提供一种方法顺序访问一个聚合对象中的各个元素，而要不需要暴露该对象的内部表示

迭代器模式简单来说就是将迭代过程从业务逻辑中抽离，简化开发，其分为内迭代和外迭代。目前许多语言都已经内置了迭代器的实现，如ES5中的forEach函数就是一种内迭代的实现。

Array.prototype.myEach = function (cb) {
    for (let index = 0; index < this.length; index++) {
        const element = this[index];
        if(cb(element, index) === false) {
            break
        }       
    }
};

['a','b','c'].myEach(console.log) // a b c

---

发布订阅模式--观察者模式

分离事件创建者和执行者，执行方只需订阅感兴趣的事件发生点。减少对象间的耦合关系，新的订阅者出现时不必修改原有代码逻辑

发布订阅模式，它定义了对象间一种一对多的关系，当一个对象的状态发生改变时，所有依赖于它的对象都将得到通知。

应用： 浏览器的dom事件通知机制(document.addEventListener)，以及vue框架中数据改变时自动刷新dom的双向绑定机制

var Event = function () {
    var clientList = {} // 订阅者数组
    this.listen = function (key, cb) { // 订阅方法
        clientList[key] = clientList[key] || []
        clientList[key].push(cb)
    }
    this.remove = function (key, cb) { // 取消订阅
        var fns = clientList[key]
        if(!cb) {
            clientList[key] = []
        }else if(fns && fns.length) {
            clientList[key] = fns.filter(fn => fn !== cb)
        }
    }
    this.trigger = function () { // 通知订阅者
        var key = Array.prototype.shift.call(arguments)
        var args = arguments
        var fns = clientList[key]
        var _this = this
        if(fns && fns.length) {
            fns.myEach(function(fn) {
                fn.apply(_this, args)
            })
        }
    }
}
var event = new Event()
event.listen('phone', function getPhone() {
    Array.prototype.unshift.call(arguments, '有个挨千刀的半夜打电话来了他是：')
    console.log.apply(this, arguments)
})
event.trigger('phone', '大狗子') // 有个挨千刀的半夜打电话来了他是：大狗子
event.trigger('phone', '二狗子') // 有个挨千刀的半夜打电话来了他是：二狗子

---

命令模式

将一组行为抽象为对像并提供执行、撤销等方法，解决它与调用者的之间的耦合关系

“命令”指的是一个执行某些特定事情的指令。该模式适用于需要向某些对象发出请求，但不知道接受者是谁，也不知道要执行哪些操作

var client = {  name: '铁蛋儿'}
var cook = { // 厨师（命令发执行者）
    makeFood: function (food) {   console.log('开始做：', food)  },
    serveFood: function (client) {  console.log('上菜给：', client.name) }    
}
function OrderCommand(receiver, food) { // 命令对象
    this.receiver = receiver
    this.food = food
}
OrderCommand.prototype.execute = function (cook) { // 提供执行方法
    cook.makeFood(this.food)
    cook.serveFood(this.receiver)
}
var command = new OrderCommand(client, '宫保鸡丁')
command.execute(cook) // 开始做：宫保鸡丁； 上菜给铁蛋儿

---

组合模式

将一系列具有相同方法的对象合并成一个具有该方法的组合对象，统一执行

组合模式将对象组合成树形结构，以表示“部分-整体”的层次结构。同时利用对象的多态性，使得单个对象的使用和组合对象的使用具有一致性。

例如我们通过命令模式定义了一系列的命令，并且希望组合这些命令形成一个命令宏统一的执行。

// 定义一些命令
var openDoorCommand = {
    execute: function(){   console.log('开门') }
}
var openPcCommand = {
    execute: function(){  console.log('开电脑')  }
}
var openLolCommand = {
    execute: function(){  console.log('撸一局')  }
}
// 定义命令宏组合命令
var MarcoCommand = {
    list: [],
    add: function (command) { this.list.push(command)  },
    execute: function () {
        this.list.forEach(function(command) {  command.execute() })
    }
}

MarcoCommand.add(openDoorCommand)
MarcoCommand.add(openPcCommand)
MarcoCommand.add(openLolCommand)
MarcoCommand.execute() // 开门 开电脑 撸一局