為什么要封裝代碼？

我們經(jīng)常聽說：“寫代碼要有良好的封裝，要高內(nèi)聚，低耦合”。那怎樣才算良好的封裝，我們?yōu)槭裁匆庋b呢？其實封裝有這樣幾個好處：

封裝好的代碼，內(nèi)部變量不會污染外部?？梢宰鳛橐粋€模塊給外部調(diào)用。外部調(diào)用者不需要知道實現(xiàn)的細節(jié)，只需要按照約定的規(guī)范使用就行了。對擴展開放，對修改關(guān)閉，即開閉原則。外部不能修改模塊，既保證了模塊內(nèi)部的正確性，又可以留出擴展接口，使用靈活。

怎么封裝代碼？

JS生態(tài)已經(jīng)有很多模塊了，有些模塊封裝得非常好，我們使用起來很方便，比如jQuery，Vue等。如果我們仔細去看這些模塊的源碼，我們會發(fā)現(xiàn)他們的封裝都是有規(guī)律可循的。這些規(guī)律總結(jié)起來就是設(shè)計模式，用于代碼封裝的設(shè)計模式主要有工廠模式，創(chuàng)建者模式，單例模式，原型模式四種。下面我們結(jié)合一些框架源碼來看看這四種設(shè)計模式：

工廠模式

工廠模式的名字就很直白，封裝的模塊就像一個工廠一樣批量的產(chǎn)出需要的對象。常見工廠模式的一個特征就是調(diào)用的時候不需要使用new，而且傳入的參數(shù)比較簡單。但是調(diào)用次數(shù)可能比較頻繁，經(jīng)常需要產(chǎn)出不同的對象，頻繁調(diào)用時不用new也方便很多。一個工廠模式的代碼結(jié)構(gòu)如下所示:

上述代碼中，我們傳入了type，然后工廠根據(jù)不同的type來創(chuàng)建不同的對象。

實例: 彈窗組件

下面來看看用工廠模式的例子，假如我們有如下需求：

我們項目需要一個彈窗，彈窗有幾種：消息型彈窗，確認型彈窗，取消型彈窗，他們的顏色和內(nèi)容可能是不一樣的。

針對這幾種彈窗，我們先來分別建一個類：

然后我們使用popup就不用new了，直接調(diào)用函數(shù)就行:

let?infoPopup1 = popup('infoPopup', content, color);

改造成面向?qū)ο?/p>

上述代碼雖然實現(xiàn)了工廠模式，但是switch始終感覺不是很優(yōu)雅。我們使用面向?qū)ο蟾脑煜聀opup，將它改為一個類，將不同類型的彈窗掛載在這個類上成為工廠方法：

封裝成模塊

這個popup不僅僅讓我們調(diào)用的時候少了一個new，他其實還把相關(guān)的各種彈窗都封裝在了里面，這個popup可以直接作為模塊export出去給別人調(diào)用，也可以掛載在window上作為一個模塊給別人調(diào)用。因為popup封裝了彈窗的各種細節(jié)，即使以后popup內(nèi)部改了，或者新增了彈窗類型，或者彈窗類的名字變了，只要保證對外的接口參數(shù)不變，對外面都沒有影響。掛載在window上作為模塊可以使用自執(zhí)行函數(shù)：

jQuery的工廠模式

jQuery也是一個典型的工廠模式，你給他一個參數(shù)，他就給你返回符合參數(shù)DOM對象。那jQuery這種不用new的工廠模式是怎么實現(xiàn)的呢？其實就是jQuery內(nèi)部幫你調(diào)用了new而已，jQuery的調(diào)用流程簡化了就是這樣:

上述代碼結(jié)構(gòu)來自于jQuery源碼，從中可以看出，你調(diào)用時省略的new在jQuery里面幫你調(diào)用了，目的是為了使大量調(diào)用更方便。但是這種結(jié)構(gòu)需要借助一個init方法，最后還要將jQuery和init的原型綁在一起，其實還有一種更加簡便的方法可以實現(xiàn)這個需求:

上述代碼就簡潔多了，也可以實現(xiàn)不用new直接調(diào)用，這里利用的特性是this在函數(shù)被new調(diào)用時，指向的是new出來的對象，new出來的對象自然是類的instance，這里的this instanceof jQuery就是true。如果是普通調(diào)用，他就是false，我們就幫他new一下。

建造者模式

建造者模式是用于比較復(fù)雜的大對象的構(gòu)建，比如Vue，Vue內(nèi)部包含一個功能強大，邏輯復(fù)雜的對象，在構(gòu)建的時候也需要傳很多參數(shù)進去。像這種需要創(chuàng)建的情況不多，創(chuàng)建的對象本身又很復(fù)雜的時候就適用建造者模式。建造者模式的一般結(jié)構(gòu)如下：

上述代碼中我們最終使用的是Final，但是Final里面的結(jié)構(gòu)比較復(fù)雜，有很多個子模塊，F(xiàn)inal就是將這些子模塊組合起來完成功能，這種需要精細化構(gòu)造的就適用于建造者模式。

實例：編輯器插件

假設(shè)我們有這樣一個需求：

寫一個編輯器插件，初始化的時候需要配置大量參數(shù)，而且內(nèi)部的功能很多很復(fù)雜，可以改變字體顏色和大小，也可以前進后退。

一般一個頁面就只有一個編輯器，而且里面的功能可能很復(fù)雜，可能需要調(diào)整顏色，字體等。也就是說這個插件內(nèi)部可能還會調(diào)用其他類，然后將他們組合起來實現(xiàn)功能，這就適合建造者模式。我們來分析下做這樣一個編輯器需要哪些模塊:

編輯器本身肯定需要一個類，是給外部調(diào)用的接口需要一個控制參數(shù)初始化和頁面渲染的類需要一個控制字體的類需要一個狀態(tài)管理的類

上面的代碼其實就將一個編輯器插件的架子搭起來了，具體實現(xiàn)功能就是往這些方法里面填入具體的內(nèi)容就行了，其實就是各個模塊的相互調(diào)用，比如我們要實現(xiàn)后退狀態(tài)的功能就可以這樣寫:

單例模式

單例模式適用于全局只能有一個實例對象的場景，單例模式的一般結(jié)構(gòu)如下：

上述代碼中，Singleton類掛載了一個靜態(tài)方法getInstance，如果要獲取實例對象只能通過這個方法拿，這個方法會檢測是不是有現(xiàn)存的實例對象，如果有就返回，沒有就新建一個。

實例：全局數(shù)據(jù)存儲對象

假如我們現(xiàn)在有這樣一個需求:

我們需要對一個全局的數(shù)據(jù)對象進行管理，這個對象只能有一個，如果有多個會導(dǎo)致數(shù)據(jù)不同步。

這個需求要求全局只有一個數(shù)據(jù)存儲對象，是典型的適合單例模式的場景，我們可以直接套用上面的代碼模板，但是上面的代碼模板獲取instance必須要調(diào)getInstance才行，要是某個使用者直接調(diào)了Singleton()或者new Singleton()就會出問題，這次我們換一種寫法，讓他能夠兼容Singleton()和new Singleton()，使用起來更加傻瓜化:

上述代碼支持使用new store()的方式調(diào)用，我們使用了一個靜態(tài)變量instance來記錄是否有進行過實例化，如果實例化了就返回這個實例，如果沒有實例化說明是第一次調(diào)用，那就把this賦給這個這個靜態(tài)變量，因為是使用new調(diào)用，這時候的this指向的就是實例化出來的對象，并且最后會隱式的返回this。

如果我們還想支持store()直接調(diào)用，我們可以用前面工廠模式用過的方法，檢測this是不是當前類的實例，如果不是就幫他用new調(diào)用就行了：

然后我們用兩種方式調(diào)用來檢測下:

實例：vue-router

vue-router其實也用到了單例模式，因為如果一個頁面有多個路由對象，可能造成狀態(tài)的沖突，vue-router的單例實現(xiàn)方式又有點不一樣，下列代碼來自vue-router源碼：

每次我們調(diào)用vue.use(vueRouter)的時候其實都會去執(zhí)行vue-router模塊的install方法，如果用戶不小心多次調(diào)用了vue.use(vueRouter)就會造成install的多次執(zhí)行，從而產(chǎn)生不對的結(jié)果。vue-router的install在第一次執(zhí)行時，將installed屬性寫成了true，并且記錄了當前的Vue，這樣后面在同一個Vue里面再次執(zhí)行install就會直接return了，這也是一種單例模式。

可以看到我們這里三種代碼都是單例模式，他們雖然形式不一樣，但是核心思想都是一樣的，都是用一個變量來標記代碼是否已經(jīng)執(zhí)行過了，如果執(zhí)行過了就返回上次的執(zhí)行結(jié)果，這樣就保證了多次調(diào)用也會拿到一樣的結(jié)果。

原型模式

原型模式最典型的應(yīng)用就是JS本身啊，JS的原型鏈就是原型模式。JS中可以使用Object.create指定一個對象作為原型來創(chuàng)建對象:

上述代碼我們將obj作為原型，然后用Object.create創(chuàng)建的新對象都會擁有這個對象上的屬性和方法，這其實就算是一種原型模式。還有JS的面向?qū)ο笃鋵嵏邮沁@種模式的體現(xiàn)，比如JS的繼承可以這樣寫:

總結(jié)

1.很多用起來順手的開源庫都有良好的封裝，封裝可以將內(nèi)部環(huán)境和外部環(huán)境隔離，外部用起來更順手。

2.針對不同的場景可以有不同的封裝方案。

3.需要大量產(chǎn)生類似實例的組件可以考慮用工廠模式來封裝。

4.內(nèi)部邏輯較復(fù)雜，外部使用時需要的實例也不多，可以考慮用建造者模式來封裝。

5.全局只能有一個實例的需要用單例模式來封裝。

6.新老對象之間可能有繼承關(guān)系的可以考慮用原型模式來封裝，JS本身就是一個典型的原型模式。

7.使用設(shè)計模式時不要生搬硬套代碼模板，更重要的是掌握思想，同一個模式在不同的場景可以有不同的實現(xiàn)方案。

學(xué)習(xí)是一個艱苦的過程，當然如果能把技術(shù)學(xué)成，最后也一定可以獲得高薪工作。掌握一個好的學(xué)習(xí)方法，跟對一個學(xué)習(xí)的人非常重要。今后要是大家有啥問題，可以隨時來問我，能幫助別人學(xué)習(xí)解決問題，對于自己也是一個提升的過程。自己整理了一份2019最全面前端學(xué)習(xí)資料，從最基礎(chǔ)的HTML+CSS+JS到HTML5的項目實戰(zhàn)的學(xué)習(xí)資料都有整理這是我的前端技術(shù)交流群518672693有問題隨時在里面問我，能給大家提出很多寶貴建議。