参考资料：

设计模式

设计模式 描述 例子
单例模式 一个类只能构造出唯一实例 Redux/Vuex的store、购物车、登录框
工厂模式 对创建对象逻辑的封装 jQuery的$(selector)
观察者模式 当一个对象被修改时，会自动通知它的依赖对象 Redux的subscribe、Vue的双向绑定
装饰器模式 对类的包装，动态地扩展类的功能 React高阶组件、ES7 装饰器
适配器模式 兼容新旧接口，对类的包装 封装旧API
代理模式 控制对象的访问 事件代理、ES6的Proxy

单例模式

即一个类只能构造一个实例，意义在于共享、唯一

  • 应用：Redux/Vuex中的store、业务场景中的购物车、登录框 ```javascript class SingletonLogin { constructor(name,password){ this.name = name this.password = password } static getInstance(name,password){ // 判断对象是否已经被创建,若创建则返回旧对象 if(!this.instance)this.instance = new SingletonLogin(name,password) return this.instance } }

let obj1 = SingletonLogin.getInstance(‘CXK’,’123’) let obj2 = SingletonLogin.getInstance(‘CXK’,’321’)

console.log(obj1===obj2) // true console.log(obj1) // {name:CXK,password:123} console.log(obj2) // 输出的依然是{name:CXK,password:123}

  1. <a name="hzumW"></a>
  2. ### 工厂模式
  3. 即**对创建对象逻辑的封装**。有多种：简单工厂模式、工厂方法模式、抽象工厂模式
  5. - 应用：**React.createElement()**和**Vue.component()**
  6. ```javascript
  7. // 简单工厂模式为例
  8. class User {
  9.   constructor(name, auth) {
  10.     this.name = name
  11.     this.auth = auth
  12.   }
  13. }
  15. class UserFactory {
  16.   static createUser(name, auth) {
  17.     //工厂内部封装了创建对象的逻辑:
  18.     //权限为admin时,auth=1, 权限为user时, auth为2
  19.     //使用者在外部创建对象时,不需要知道各个权限对应哪个字段, 不需要知道赋权的逻辑，只需要知道创建了一个管理员和用户
  20.     if(auth === 'admin')  new User(name, 1)
  21.     if(auth === 'user')  new User(name, 2)
  22.   }
  23. }
  25. const admin = UserFactory.createUser('cxk', 'admin');
  26. const user = UserFactory.createUser('cxk', 'user');

观察者模式

观察者监听被观察者的变化，当被观察者发生变化时，会通知所有的观察者。和订阅/发布模式有一点点不同，订阅/发布多一个调度中心。

  • 应用：广泛用于监听事件的实现，如Redux，Vue 2.x的双向绑定 ```javascript //观察者 class Observer {
    constructor (fn) {
    this.update = fn
    } } //被观察者 class Subject {
    constructor() { 
    1.   this.observers = []          //观察者队列
    }
    addObserver(observer) { 
    1.   this.observers.push(observer)//往观察者队列添加观察者
    }
    notify() { //通知所有观察者,实际上是把观察者的update()都执行了一遍 
    1.   this.observers.forEach(observer => {        
    2.       observer.update()            //依次取出观察者,遍历执行观察者的update方法        
    3.   })
    } }

var subject = new Subject() //被观察者 const update = () => {console.log(‘被观察者发出通知’)} //收到广播时要执行的方法 var ob1 = new Observer(update) //观察者1, （回调函数） var ob2 = new Observer(update) //观察者2 subject.addObserver(ob1) //观察者1订阅subject的通知 subject.addObserver(ob2) //观察者2订阅subject的通知 subject.notify() //发出广播,执行所有观察者的update方法

  2. - Vue 2.x的双向绑定原理：
  4. <a name="Wl2Au"></a>
  5. ### 装饰器模式
  7. - 应用：ES7的装饰器语法、React中的Hoc（高阶组件）
  8. ```javascript
  9. // ES7的装饰器模式
  10. function info(target) {
  11.   target.prototype.name = '张三'
  12.   target.prototype.age = 10
  13. }
  15. @info
  16. class Man {}
  18. let man = new Man()
  19. man.name // 张三

适配器模式

将一个接口转换成客户希望的另一个接口，使接口不兼容的那些类可以一起工作。（转换插头的例子）

  1. class Adaptee {
  2.   test() {
  3.       return '旧接口'
  4.   }
  5. }
  7. class Target {
  8.   constructor() {
  9.       this.adaptee = new Adaptee()
  10.   }
  11.   test() {
  12.       let info = this.adaptee.test()
  13.       return `适配${info}`
  14.   }
  15. }
  17. let target = new Target()
  18. console.log(target.test())

代理模式

为一个对象找一个替代对象，以便对原对象进行访问。即在访问者与目标对象之间加一层代理，通过代理做授权和控制。

  • 应用：事件代理、ES6的proxy ```javascript const idol = { name: ‘蔡x抻’, phone: 10086, price: 1000000 //报价 }

const agent = new Proxy(idol, { get: function(target) { //拦截明星电话的请求,只提供经纪人电话 return ‘经纪人电话:10010’ }, set: function(target, key, value) { if(key === ‘price’ ) { //经纪人过滤资质 if(value < target.price) throw new Error(‘报价过低’) target.price = value } } })

agent.phone //经纪人电话:10010 agent.price = 100 //Uncaught Error: 报价过低

```

策略模式

定义 : 要实现某一个功能，有多种方案可以选择。我们定义策略，把它们一个个封装起来，并且使它们可以相互转换。

单一职责原则和开放封闭原则

  • 单一职责原则：一个类只负责一个功能领域中的相应职责，或者可以定义为：就一个类而言，应该只有一个引起它变化的原因。
  • 开放封闭原则：核心的思想是软件实体（类、模块、函数等）是可扩展的、但不可修改。也就是说，对扩展是开放的,而对修改是封闭的。