工廠模式介紹
什么時(shí)候用工廠模式，使用場(chǎng)景等？
- 將 new 操作單獨(dú)封裝
- 遇到 new 時(shí)，就要考慮是否該使用工廠模式。
示例
- 你去購(gòu)買漢堡，直接點(diǎn)餐，取餐，不用自己親手做。
- 商店要 ”封裝" 做漢堡的工作，做好直接給買者。
工廠模式UML類圖如下
工廠模式UML類圖
其中Creator是一個(gè)工廠，Product 是一個(gè)產(chǎn)品。
一個(gè)Creator工廠有一個(gè)create方法，返回一個(gè)產(chǎn)品，可以理解為最簡(jiǎn)單的工廠模式。
代碼演示
class Product {
constructor(name) {
this.name = name;
}
init() {
alert("init");
}
fn1() {
alert("fn1");
}
fn2() {
alert("fn2");
}
}
class Creator {
create(name){
return new Product(name);
}
}
// 測(cè)試
let creator = new Creator();
let p = creator.create("p1");
p.init();
p.fn1();
// 結(jié)果 彈出 init 111
結(jié)論： 我們通過Creator類提供的create方法來創(chuàng)建Product， 通過Creator工廠已經(jīng)把真正的構(gòu)造函數(shù)封裝起來了，我們用的時(shí)候只需要知道Creator工廠的create方法可以產(chǎn)生一個(gè)實(shí)例，而不用去關(guān)心生成的實(shí)例是誰。
常見場(chǎng)景
- Jquery - $("div")
- React.createElement
- Vue 異步組件
- Jquery工廠模式簡(jiǎn)單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簡(jiǎn)單demo
class VNode (tag, attrs, children) { // 此處寫法便于理解，語法錯(cuò)誤請(qǐng)忽略
// 省略內(nèi)部代碼
}
React.createElement = function (tag, attrs, children) {
return new Vnode(tag, attrs, children);
}
