这是我参与「第五届青训营」伴学笔记创作活动的第 2 天

前言

工厂模式就是封装实例的创建过程

1. 主要内容

概念介绍，解决的问题

代码颜色和 UML 类图

应用场景

1）学习方法

UML 类图要结合代码理解

设计模式要结合使用场景，否则记不住

2）注意事项

遇到 new class 的地方，就要考虑工厂模式

2. 工厂模式 - 介绍

3. 工厂模式 - 演示

简易的工厂模式

标准的工厂模式

模式验证：是否符合开放封闭原则

1）简易的工厂模式

2）标准的工厂模式

3）是否符合设计原则

工厂和类分离，解耦

可以扩展多个类（派生类，或平行的类）

工厂的创建逻辑也可以自由扩展

4）总结

简易的工厂模式

标准的工厂模式

模式验证：符合开放封闭原则

4. 工厂模式 - 场景

jQuery $

Vue_createElementVNode

React createElement

1）jQuery $ - 代码演示

 // 为Window扩展一个新的属性 $ 
 declare interface Window {
   $: (selector: string) => JQuery;
 }
 
 class JQuery {
   selector: string;
   length: number;
   constructor(selector: string) {
     // 将伪数组变成真实数组
     const domList = Array.prototype.slice.call(
       document.querySelectorAll(selector)
     );
     const length = domList.length;
     for (let i = 0; i < domList.length; i++) {
       // @ts-ignore
       this[i] = domList[i];
     }
     this.selector = selector;
     this.length = length;
   }
   append(elem: HTMLElement): JQuery {
     // append 的操作...
     return this;
   }
   addClass(className: string): JQuery {
     // append 的操作...
     return this;
   }
   // ... methods ...
 }
 
 function $(selector: string) {
   return new JQuery(selector);
 }
 
 // 使用工厂模式
 window.$ = $;

调用代码：console.log( $('p') )

5. 总结