web前端进阶之js设计模式篇——下

设计模式是个抽象的东西，只是设计的指导思想，不要为了设计而设计，而是为了使用而设计

原型模式

概念

• clone自己，生成一个新对象（从新new一个对象，开销相对较大）
• java默认有clone接口，不用自己实现

js代码演示

桥接模式

概念

• 用于把抽象化和实现化解耦
• 使得二者可以独立变化

js代码演示

1、要实现一个画图的方法

image.png

 class ColorShape {
        yellowCircle(){
            console.log('yellow circle')
        }
          redCircle(){
            console.log('red circle')
        }
          yellowTriangle(){
            console.log('yellow triangle')
        }
         redTriangle(){
            console.log('red triangle')
        }
    }

    // 测试

    let cs = new ColorShape()
    cs.yellowCircle()
    cs.redTriangle()

2、按照桥接模式，我们将其分离开，画图是画图，填充是填充，最后进行结合，扩展性比较高

image.png

 // 颜色
    class Color {
        constructor(colorName) {
            this.colorName = colorName
        }
    }
    // 形状
    class Shape {
        constructor(shapeName, color) {

            this.shapeName = shapeName
            this.color = color
        }
        draw() {
            console.log(`${this.color.colorName}--${this.shapeName}`)
        }
    }


    // 测试
    let red = new Color('red')
    let yellow = new Color('yellow')
    let redCircle = new Shape('circle', red)
    let yellowTriangle = new Shape('triangle', yellow)
    redCircle.draw()
    yellowTriangle.draw()

设计原则验证

• 抽象和实现分离，解耦
• 符合开放封闭原则

组合模式

概念

• 生成树形结构，表示"整体—部分"关系

• 让整体和部分都具有一致的操作方式

  
  
  image.png

设计原则验证

• 将整体和单个节点的操作抽象出来
• 符合开放封闭原则

享元模式

概念

• 共享内存（主要考虑内存，而非效率）

• 相同数据，共享使用

  
  
  image.png

设计原则验证

• 将相同的部分抽象出来
• 符合开放封闭原则

策略模式

概念

• 不同策略（执行方式）分开处理
• 避免大量出现if...else

案例

1、不同用户，权限不同，代码冗余

image.png

2、把不同用户封装成类

image.png

模板方法模式

通过一个方法将其封住，调用时使用该方法即可

image.png

职责链模式

概念

• 一步操作可能分为多个职责角色来完成
• 把这些角色都分开，然后用一个链串起来
• 将发起者和各个处理者进行隔离

案例

image.png

设计原则验证

• 发起者于各个处理者进行隔离
• 符合开放封闭原则

命令模式

概念

• 执行命令时，发布者和执行者分开

• 中间加入命令对象，作为中转站

  
  
  image.png

案例

image.png

设计原则验证

• 命令对象于执行对象分开，解耦
• 符合开放封闭原则

备忘录模式

概念

• 随时记录一个对象的状态变化
• 随时可以恢复之前的某个状态（如撤销功能）
• 类似富文本编辑器

中介者模式

概念

image.png

image.png

访问者模式

概念
针对于对象结构的元素，定义在不改变该对象的前提下访问结构中元素如的新方法。
代码实现（使用访问者模式，使对象拥有像数组的push pop和splice方法。）

  var Visitor = (function() {
      return {
        splice: function(){
          var args = Array.prototype.splice.call(arguments, 1)
          return Array.prototype.splice.apply(arguments[0], args)
        },
        push: function(){
          var len = arguments[0].length || 0
          var args = this.splice(arguments, 1)
          arguments[0].length = len + arguments.length - 1
          return Array.prototype.push.apply(arguments[0], args)
        },
        pop: function(){
          return Array.prototype.pop.apply(arguments[0])
        }
      }
    })()
    
    var a = new Object()
    console.log(a.length)
    Visitor.push(a, 1, 2, 3, 4)
    console.log(a.length)
    Visitor.push(a, 4, 5, 6)
    console.log(a.length)
    Visitor.pop(a)
    console.log(a)
    console.log(a.length)
    Visitor.splice(a, 2)
    console.log(a)