Javascript设计模式

Posted 2021-03-03 liea

javascript设计模式

设计模式有23种，分为三个大类创建型，结构型，行为型。

创建型：工厂模式（工厂方法模式，抽象工厂模式，建造者模式），单例模式，原型模式。

解构型：适配器模式，装饰器模式，代理模式，外观模式，桥接模式，组合模式，享元模式。

行为型：策略模式，迭代器模式，模版方法模式，职责连模式，观察者模式，命令模式，备忘录模式，中介者模式，状态模式，解释器模式，访问者模式。

工厂模式

工厂模式是一个创建型模式，他提供了创建对象的一种方式，在创建对象时只提供创建方法，不暴露创建逻辑。工厂模式将new操作单独封装，遇到new操作时可以考虑使用这种模式。

举个例子：假如去餐厅吃饭，我们去了餐厅只需要点餐和取餐两个步骤，至于食物的加工处理是由餐厅来提供，我们不需要知道其中的过程。

演示代码：

class Person {
    constructor(name) {
        this.name = name
    }
    say() {
        console.log(‘ary you ok ?‘, this.name )
    }
}
class Make {
    create(name) {
        return new Person(name)
    }
}
const make = new Make()
const jack = make.create(‘jack‘)
jack.say()

场景：

// React.createElement()
React.createElement(‘h1‘, className = ‘blue‘, ‘hello worf‘ )

单例模式

单例模式属于创建型，是比较简单的一个模式。该模式一个类只能有一个实例，在系统中被唯一使用。

场景：购物车，登陆框，vuex 和 redux 中的 store。

适配器模式

旧接口与使用者不兼容，中间加一个适配转换接口。

场景：vue computed

装饰器模式

为对象添加新功能，不改变其原有结构和功能。它作为一个现有类的包装。

class Circle {
    draw() {
        console.log(‘画一个圆形‘)
    }
}
class Decorator {
    constructor(circle) {
        this.circle = circle
    }
    draw() {
        this.circle.draw()
        this.setRedBorder(circle)
    }
    setRedBorder() {
        console.log(‘设置红色边框‘)
    }
}
// 测试
// 未装饰的
let circle = new Circle()
circle.draw()
// 打印 画一个圆形

// 装饰器后的
let dec = new Decorator(circle)
dec.draw()
// 打印 画一个圆形  设置红色边框

场景：

ES7 装饰器

@dec
class Demo {
}
function dec(target) {
    target.isDec = true
}
console.log(Demo.isDec) // true

function log(target, name, descriptor) {
   var oldValue = descripter.value
   descriptor.value = function() {
       console.log(`Calling ${name} with`, arguments)
       return oldValue.apply(this, arguments)
   }
   return descriptor
}

class Math {
   @log
   add(a, b) {
       return a + b
   }
}

const math = new Math()
const result = math.add(2, 4)
// 执行add时，装饰器会自动打印日志。
console.log(‘打印‘, result)

代理模式

使用者无权访问目标对象，中间加代理，通过代理做授权和控制。

场景：通过代理访问外网，网页事件代理，jQuery $.proxy ，ES6 Proxy。

未完，后续随时更新补充。