设计模式

1. 工具

UML类图(统一建模语言)

1. 类图是UML图中的一种, 推荐Processon, 在线建模工具

2. 类图关系: 设计模式中主要用到 泛化(继承) 和 关联(引用)

3. UML类图说明: 三行结构

   类图结构说明.jpg

4. 例子

       // 类, 相对于如下的, UML类图
       // JS中没有protected/private, 故而UML类图更多是`+`
       class People {
           constructor(name, house) {
               this.name = name
               this.house = house
           }
           saySomething () {}
       }
     //  A, B是泛化(继承)
       class A extends People {
             constructor(name) {
                 super(name)
             }
             saySomething () {
                 console.log('I am A')
             }
         }
         class B extends People {
               constructor(name) {
                   super(name)
               }
               saySomething () {
                   console.log('I am B')
               }
           }
         // House是关联关系
          class House {
               constructor(city) {
                   this.city = city
               }
               showCity() { }
           }
       } 
   

   uml关联图.jpg

2. 五大设计原则(SOLID)

1. 概念:

       S - 单一职责原则: 一个程序只做一件事
       
       O - 开放封闭原则: 对拓展开放, 对修改封闭(支持拓展, 不支持修改源代码影响原有功能)
       
       L - 李氏置换原则: 子类能覆盖父类, 父类能出现的地方子类就能出现(React.component), js较少
       
       I - 接口独立原则: 保持接口单一独立, 避免出现"胖接口"(java等语言实现接口, js较少)
       
       D - 依赖导致原则: 依赖抽象而不依赖具体(js较少)
   

2. Promise示例

       const loadImg(src) {
           return new Promise((resolve, reject) => {
               let img = document.createElement('img')
               img.onload = () => {
                   resolve(img)
               }
               img.onerror = () => {
                   reject('图片加载失败')
               }
               img.src = src
           })
       }
       
       let src = `www.baodu.com`
       let result = loadImg(src)
       
       // 单一原则, 每个then只做一件事
       // 开放封闭原则, 不修改原有的, 当需要拓展时, 直接再then即可
       result.then(img => {
           console.log(`width: ${img.width}`)
           return img
       }).then(img => {
           // ....
       }).catch(err => {
           console.log(err)
       })
   

3. 23种设计模式

1. 概括

       创建型: 
           工厂模式 (工厂方法模式, 抽象工厂模式, 建造者模式), 
           单例模式
           原型模式 
       
       组合型
           适配器模式
           装饰器模式
           代理模式
           外观模式
           桥接模式
           组合模式
           亨元模式
       
       行为型
           观察者模式
           迭代器模式
           策略模式
           模板方法模式
           职责连模式
           命令模式
           
           备忘录模式
           状态模式
           访问者模式
           中介者模式
           解释权模式