工厂模式

工厂模式是一种用来创建对象的设计模式。我们不暴露对象创建的逻辑,而是将逻辑封装在一个函数内,那么这个函数可以成为工厂。工厂模式根据抽象程度的不同可以分为：1.简单工厂 2.工厂方法 3.抽象工厂

  • 将new操作单独封装
  • 遇到new时，就要考虑是否使用工厂模式 
    1. class Product{
    2.   constructor(name){
    3.     this.name = name;
    4.   }
    5.   fun1(){
    6.     alert('fun1')
    7.   }
    8.   fun2(){
    9.     alert('fun2')
    10.   }
    11. }
    12. //  创建一个工厂，直接调用工厂操作Product里面的方法。
    13. class Created{
    14.   create(name){
    15.     return new Product(name)
    16.   }
    17. }
    18. let created = new Created()
    19. //  通过工厂创建 Product
    20. let p = created.create()
    21. p.fun1()
    22. p.fun2()

使用场景

  • jquery - $(‘span)
  • vue 异步组件
    1. class Jquery {
    2.   constructor(selector) {
    3.     let slice = Array.prototype.slice;
    4.     let dom = document.querySelectorAll(selector)
    5.     let len = dom ? dom.length : 0;
    6.     for (let i = 0; i < len; i++) {
    7.       this[i] = dom[i]
    8.     }
    9.     this.length = len;
    10.     this.selector = selector || ""
    11.   }
    12.   append(node) {
    13.     //...
    14.   }
    15.   addClass() {
    16.     //...
    17.   }
    18. }
    19. //工厂模式挂载到 $
    20. window.$ = function (selector) {
    21.   return new Jquery(selector);
    22. }
    23. //使用
    24. console.log($('div'));

可以看出jquery使用的工厂模式，最后会把所有的功能都暴露给了window.$,而后我们直接使用$(‘’)就可以直接操作dom元素。

设计模式验证

  • 构造函数和创建者分类
  • 符合开放封闭原则