工廠模式介紹
什么時候用工廠模式陕凹，使用場景等悍抑？
- 將 new 操作單獨封裝
- 遇到 new 時，就要考慮是否該使用工廠模式捆姜。
示例
- 你去購買漢堡传趾，直接點餐浪听，取餐掂墓，不用自己親手做训措。
- 商店要 ”封裝" 做漢堡的工作，做好直接給買者苍糠。
工廠模式UML類圖如下
工廠模式UML類圖
其中Creator是一個工廠，Product 是一個產品诫龙。
一個Creator工廠有一個create方法伤极，返回一個產品，可以理解為最簡單的工廠模式蜕便。
代碼演示
class Product {
constructor(name) {
this.name = name;
}
init() {
alert("init");
}
fn1() {
alert("fn1");
}
fn2() {
alert("fn2");
}
}
class Creator {
create(name){
return new Product(name);
}
}
// 測試
let creator = new Creator();
let p = creator.create("p1");
p.init();
p.fn1();
// 結果 彈出 init 111
結論： 我們通過Creator類提供的create方法來創(chuàng)建Product劫恒， 通過Creator工廠已經把真正的構造函數封裝起來了，我們用的時候只需要知道Creator工廠的create方法可以產生一個實例轿腺，而不用去關心生成的實例是誰两嘴。
常見場景
- Jquery - $("div")
- React.createElement
- Vue 異步組件
- Jquery工廠模式簡單demo
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++) {
this[i] = dom[i];
}
this.length = len;
this.selector = selector || "";
}
append(node){
}
addClass(name){
}
html(data){
}
}
window.$ = function (selector) {
return new Jquery(selector);
}
- React.createElement簡單demo
class VNode (tag, attrs, children) { // 此處寫法便于理解，語法錯誤請忽略
// 省略內部代碼
}
React.createElement = function (tag, attrs, children) {
return new Vnode(tag, attrs, children);
}
