一、介绍

  • 将new操作单独封装
  • 遇到new时就要考虑是否要使用工厂模式

    二、事例

    例如去KFC买汉堡，工作人员会把做汉堡的工程封装成一套流程，我们只需要点餐，就能获取到汉堡。

    三、UML类图

    image.png

    四、代码实现

    1. // 在创建对象的时候也有用到
    2. // 创建一个产品类
    3. class Product {
    4.   constructor(name) {
    5.       this.name = name
    6.   }
    7.   init() {
    8.       console.log(`${this.name}执行初始化操作`)
    9.   }
    10.   otherFun() {
    11.       console.log(`${this.name}执行其他方法`)
    12.   }
    13. }
    14. // 创建一个工厂类，也可以直接把Creator写在Product里面
    15. class Creator {
    16.   create (name) {
    17.       return new Product(name)
    18.   }
    19. }
    20. // 测试
    21. let creator = new Creator() // 实例化一个工厂
    22. let p = creator.create('zhangsan') // 告诉工厂要做什么
    23. p.init()
    24. p.otherFun()

    五、应用场景

    1、jq中的$(‘div’)

    ```javascript class jQuery { constructor (selector) { let slice = Array.prototype.slice let dom = slice.call(document.querySelectorAll(selector)) let len = dom ? dom.length : 0 for (let i = 0; i < len; i ++) {
    1.   this[i] = dom[i]
    } this.length = len this.selector = selector || ‘’ } append (node) {

} …api方法 } window.$ = function (selector) { return new jQuery(selector) }

  1. <a name="LlMJG"></a>
  2. ## 2、React.createElement
  3. ```javascript
  4. class Node(tag, attr, child) {
  5.     ...省代码
  6. }
  7. React.createElement = function (tag, attr, child) {
  8.     return new Node(tag, attr, child)
  9. }

3、Vue异步组件

六、总结

  • 学完之后去读源码，并将这些设计模式抽离处理
  • 刻意训练
  • 平时编程时多用设计模式思想往里面套用