设计模式的JS实现

罗列了当下最常用的设计模式，供学习参考

项目基于webpack4和ES6

How to use

npm i --save & npm run dev

何为设计

1. 小即是美

2. 让每个程序只做一件事情

3. 快速建立原型

4. 舍弃高效率而取可移植性

5. 采用纯文本来存储数据

6. 软件复用

7. 避免强制性的用户界面

8. 让每个程序成为过滤器

   ls | grep *.json

   ls | grep *.json | wc -l

   小准则:

   • 各部分之和大于整体
   • 寻求90%的方案(不能满足所有人的需求)

五大设计原则

• S-单一职责原则

• O-开放封闭原则(扩展新代码而不是修改已有代码)

• L-李式置换原则

• I-接口独立原则

• D-依赖倒置原则

function loadImg(src){
    const promise = new Promise((resolve,reject)=>{
          const img = document.createElement('img')
          img.onload = ()=>{
            resolve(img)
          }   
          img.onerror = ()=>{
            reject('error')
          }
      }
    )
    return promise
}
const src = "http://..."
const result = loadImg(src)
result.then((img)=>{  //单一原则
    //do something
    return img
}).then((img)=>{   // 开放封闭原则
    //do another thing
}).catch((err)=>{
    //handle error
})

设计模式

• 创建型
  • 工厂模式
  • 单例模式
  • 原型模式(拷贝)
• 结构型
  • 适配器模式
  • 装饰器模式
  • 代理模式
  • 外观模式
  • 桥接模式
  • 组合模式
  • 享元模式
• 行为型
  • 策略模式
  • 模版方法模式
  • 观察者模式
  • 迭代器模式
  • 命令模式
  • 职责连模式
  • 备忘式模式
  • 状态模式
  • 访问者模式
  • 中介者模式
  • 解释器模式