前言
前幾天我曾分享過幾張不那麼嚴謹的思維導圖，其中便有關於設計模式的一張：
索性我們就以該圖為大綱，講講那些我們不經意間使用的設計模式 --- 建立型。
1. 三種工廠模式：Factory Pattern
- 簡單工廠模式(
Simple Factory) - 工廠方法模式(
Factory method) - 抽象工廠模式(
Abstract factory)
其核心就是：
工廠起到的作用就是隱藏了建立例項的複雜度，只需要提供一個介面，簡單清晰。 --- 摘自《前端面試之道》
而區別則是：
- 簡單工廠模式，用來建立某一種產品物件的例項，用來建立單一物件。
- 工廠方法模式，將建立例項推遲到子類中進行。
- 抽象工廠模式，是對類的工廠抽象用來建立產品類簇，不負責建立某一類產品的例項。
其實從你會用jQuery開始，就已經在用工廠模式了：
1. jQuery的$(selector)
jQuery中$('div')和new $('div')哪個好用？很顯然直接$()最方便 ,這是因為$()已經是一個工廠方法了。
class jQuery {
constructor(selector) {
super(selector)
}
// ....
}
window.$ = function(selector) {
return new jQuery(selector)
}
複製程式碼2. React的createElement()
React.createElement()方法就是一個工廠方法
React.createElement('h1', null, 'Hello World!'),
複製程式碼3. Vue的非同步元件
通過promise的方式resolve出來一個元件
export function createComponent (
Ctor: Class<Component> | Function | Object | void,
data: ?VNodeData,
context: Component,
children: ?Array<VNode>,
tag?: string
): VNode | Array<VNode> | void {
// ...邏輯處理
// async component
let asyncFactory
const vnode = new VNode(
`vue-component-${Ctor.cid}${name ? `-${name}` : ''}`,
data, undefined, undefined, undefined, context,
{ Ctor, propsData, listeners, tag, children },
asyncFactory
)
}
複製程式碼2. 單例模式：Singleton Pattern
例項一次後處處可用
單例模式的要點有三個:
- 某個類只能有一個例項；
- 它必須自行建立這個例項；
- 它必須自行向整個系統提供這個例項。
從具體實現角度來說，就是以下三點：
- 單例模式的類只提供私有的建構函式
- 類定義中含有一個該類的靜態私有物件
- 該類提供了一個靜態的公有的函式用於建立或獲取它本身的靜態私有物件。
同樣的，它也是我們最早接觸的一種設計模式：
1. 引用第三方庫
多次引用只會使用一個庫引用，如 jQuery，lodash，moment等。
2. Vuex / Redux
全域性狀態管理store
Vuex和Redux資料儲存在單一store中，Mobx將資料儲存在分散的多個store中
const store = createStore(reducer)
render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
)
複製程式碼3. Vue中第三方外掛的安裝
首當其衝的就是Vuex安裝：
let Vue // bind on install
export function install (_Vue) {
if (Vue && _Vue === Vue) {
// 如果發現 Vue 有值，就不重新建立例項了
return
}
Vue = _Vue
applyMixin(Vue)
}
複製程式碼其它也類似，感興趣的可以去GitHub搜尋export function install (Vue)
4. 簡單實現一個單例模式：
class SingletonClass {
constructor() {
if (!SingletonClass.instance) {
SingletonClass.instance = this;
}
return SingletonClass.instance;
}
// other things
}
const instance = new SingletonClass();
Object.freeze(instance);
export default instance;
複製程式碼3. 建造者模式:Builder Pattern
、建造者模式主要用於 “分步驟構建一個複雜的物件”
這在其中“分步驟”是一個穩定的演算法，而複雜物件的各個部分則經常變化。
一句話：指揮者分配任務，建造者進行開發，各執其責，穩定在一個大的流程裡面去。
建造者模式概念擬物化解讀
1. jQuery中的建造者
jQuery中建造者模式體現在：
$( "<div class= "foo">bar</div>" );
$( "<p id="test">foo <em>bar</em></p>").appendTo("body" );
var newParagraph = $( "<p />" ).text( "Hello world" );
$( "<input />" )
.attr({ "type": "text", "id":"sample"});
.appendTo("#container");
複製程式碼下面是jQuery原始碼內部jQuery.prototype方法的一個片段，它將從傳遞給jQuery()選擇器的標記構建jQuery物件。
無論是否 document.createElement用於建立新元素，對元素（找到或建立）的引用都會注入到返回的物件中，因此.attr()可以在其後立即使用其他方法。
// HANDLE: $(html) -> $(array)
if ( match[1] ) {
context = context instanceof jQuery ? context[0] : context;
doc = ( context ? context.ownerDocument || context : document );
//如果傳入的是單個字串，並且是單個標記
//只需執行createElement並跳過其餘部分
ret = rsingleTag.exec( selector );
if ( ret ) {
if ( jQuery.isPlainObject( context ) ) {
selector = [ document.createElement( ret[1] ) ];
jQuery.fn.attr.call( selector, context, true );
} else {
selector = [ doc.createElement( ret[1] ) ];
}
} else {
ret = jQuery.buildFragment( [ match[1] ], [ doc ] );
selector = ( ret.cacheable ? jQuery.clone(ret.fragment)
: ret.fragment ).childNodes;
}
return jQuery.merge( this, selector );
複製程式碼1. 建造者模式的理想實現
本質上，建造者模式的目標是減少建構函式所用的引數數量，並提供向物件新增靈活的行為方法。
// 使用建造者模式之前
const person1 = new Person('Peter', 26, true, 40074986, 4, 2);
// 使用建造者模式之後
const person1 = new Person();
person1
.name('Peter')
.age(26)
.member(true)
.phone(40074986)
.children(4)
.cars(2);
複製程式碼2. ES6中的建造者模式
我們來假設一個商品錄入系統的業務場景，有四個必填資訊，分別是：名稱，價格，分類。
該build方法將返回最終的JavaScript物件。
/書籍建造者類
class ProductBuilder {
constructor() {
this.name = '';
this.price = 0;
this.category = '';
}
withName(name) {
this.name = name
return this
}
withPrice(price) {
this.price = price
return this
}
withCategory(category) {
this.category = category
return this
}
build() {
return {
name: this.name,
price: this.price,
category: this.category,
}
}
}
console.log(
new ProductBuilder()
.withName('《哈利·波特》')
.withCategory('book')
.withPrice('29.9')
.build()
複製程式碼雖然只有三個屬性，我們的構建器已經相當大，並且需要很多withers。
構建器的大小隨欄位數量線性增長。我們有太多的withxxxx方法。我們其實可以自動建立這類withxxxx方法以簡化程式碼。
3. 建造者模式簡化
class ProductBuilder {
constructor() {
this.name = ''
this.price = ''
this.category = 'other'
// 為每個屬性生成`wither`
Object.keys(this).forEach(key => {
const witherName = `with${key.substring(0, 1).toUpperCase()}${key.substring(1)}`
this[witherName] = value => {
this[key] = value
return this
}
})
}
build() {
// 獲取此生成器的所有非函式屬性的陣列
const keysNoWithers = Object.keys(this).filter(key => typeof this[key] !== 'function')
return keysNoWithers.reduce((returnValue, key) => {
return {
...returnValue,
[key]: this[key],
}
}, {})
}
}
console.log(
new ProductBuilder()
.withName('《哈利波特》')
.withCategory('book')
.build()
)
複製程式碼我們將所有的建造方法withxxxx在constructor呼叫時自動被建立，這裡我們使用了一些ES6的新語法：Object.keys獲取物件屬性陣列，...的合併物件的語法
最終我們得到了一種宣告式（易於理解）的方法，且可以動態新增屬性的建造者模式。
5. 提取公用部分，實現多個建造者
當你有許多建造者時，我們可以輕鬆地將其廣義部分提取到一個通用的父類中，從而可以非常輕鬆地建立新的建造者。
class BaseBuilder {
init() {
Object.keys(this).forEach((key) => {
const witherName = `with${key.substring(0,1).toUpperCase()}${key.substring(1)}`;
this[witherName] = (value) => {
this[key] = value;
return this;
};
});
}
build() {
const keysNoWithers = Object.keys(this).filter((key) => (
typeof this[key] !== 'function'
));
return keysNoWithers.reduce((returnValue, key) => {
return {
...returnValue,
[key]: this[key]
};
}, {});
}
}
複製程式碼然後就可以建立多個建造者了：
class ProductBuilder extends BaseBuilder {
constructor() {
super();
this.name = '《前端勸退祕訣》';
this.price = 9.99;
this.category = 'other';
super.init();
}
}
複製程式碼可以看出，建造者模式的使用有且只適合建立極為複雜的物件。在前端的實際業務中，在沒有這類極為複雜的物件的建立時，還是應該直接使用物件字面或工廠模式等方式建立物件。
4. 原型模式
prototype...再講會被砍死吧。
5. 下一篇：結構型設計模式
原本打算又雙叒憋它個一萬多字，把所有設計模式寫個遍。
但是覺得吧，這樣閱讀體驗其實並不好（主要還是懶，想慢慢寫。）
噢對了，現在還有靠譜內推的可以聯絡我
- 微信：
huab119 - 郵箱：
454274033@qq.com
參考文章
作者掘金文章總集
需要轉載到公眾號的喊我加下白名單就行了。
- 「真®全棧之路」Web前端開發的後端指南
- 「Vue實踐」5分鐘擼一個Vue CLI 外掛
- 「Vue實踐」武裝你的前端專案
- 「中高階前端面試」JavaScript手寫程式碼無敵祕籍
- 「從原始碼中學習」面試官都不知道的Vue題目答案
- 「從原始碼中學習」Vue原始碼中的JS騷操作
- 「從原始碼中學習」徹底理解Vue選項Props
- 「Vue實踐」專案升級vue-cli3的正確姿勢
- 為何你始終理解不了JavaScript作用域鏈？