本文是設計模式的第二篇文章，第一篇文章是[不知道怎麼封裝程式碼？看看這幾種設計模式吧！](https://juejin.im/post/5ec737b36fb9a04799583002)，後面還會有`提高擴充套件性`，`提高程式碼質量`的設計模式，點個關注不迷路，哈哈~ 想必大家都聽說過`DRY`原則，其實就是`Don't repeat yourself(不要重複你自己)`，意思就是不要重複寫一樣的程式碼，換句話說就是要提高程式碼的複用性。那什麼樣的程式碼才算有好的複用性呢？ > 1. 物件可以重複利用。這個其實有點像我們關係型資料庫的設計原則，資料表和關係表是分開的，資料表就是單純的資料，沒有跟其他表的關係，也沒有業務邏輯，關係表才是儲存具體的對應關係。當我們需要某個資料時，直接讀這個表就行，而不用擔心這個表會有其他的業務在裡面。類似設計的還有redux，redux的store裡面就是單純的資料，並不對應具體的業務邏輯，業務如果需要改變資料需要發action才行。正是因為這種資料很單純，所以我們需要的地方都可以拿來用，複用性非常高。所以我們設計資料或物件時，也要儘量讓他可以複用。 > 2. 重複程式碼少。如果你寫的程式碼重複度很高的話，說明你程式碼的抽象度不夠。很多時候我們重複程式碼的產生都是因為我們可能需要寫一個跟已經存在的功能類似的功能，於是我們就把之前的程式碼拷貝過來，把其中兩行程式碼改了完事。這樣做雖然功能實現了，但是卻製造了大量重複程式碼，本文要講的幾種設計模式就是用來解決這個問題的，提高程式碼的抽象度，減少重複程式碼。 > 3. 模組功能單一。這意味著一個模組就專注於一個功能，我們需要做一個大功能時，就將多個模組組合起來就行。這就像樂高積木，功能單一的模組就像樂高積木的一小塊，我們可以用10個小塊拼成一個小汽車，也可以用20個小塊拼成一個大卡車。但是如果我們模組本身做複雜了，做成了小汽車，我們是不能用兩個小汽車拼成一個大卡車的，這複用性就降低了。 提高複用性的設計模式主要有`橋接模式`，`享元模式`，`模板方法模式`，下面我們分別來看下。 ## 橋接模式 橋接模式人如其名，其實就相當於一個橋樑，把不同維度的變數橋接在一起來實現功能。假設我們需要實現三種形狀（長方形，圓形，三角形），每種形狀有三種顏色（紅色，綠色，藍色），這個需求有兩個方案，一個方案寫九個方法，每個方法實現一個圖形： ```javascript function redRectangle() {} function greenRectangle() {} function blueRectangle() {} function redCircle() {} function greenCircle() {} function blueCircle() {} function redTriangle() {} function greenTriangle() {} function blueTriangle() {} ``` 上述程式碼雖然功能實現了，但是如果我們需求變了，我們要求再加一個顏色，那我們就得再加三個方法，每個形狀加一個。這麼多方法看著就很重複，意味著他有優化的空間。我們仔細看下這個需求，我們最終要畫的圖形有顏色和形狀兩個變數，這兩個變數其實是沒有強的邏輯關係的，完全是兩個維度的變數。那我們可以將這兩個變數拆開，最終要畫圖形的時候再橋接起來，就是這樣： ```javascript function rectangle(color) { // 長方形 showColor(color); } function circle(color) { // 圓形 showColor(color); } function triangle(color) { // 三角形 showColor(color); } function showColor(color) { // 顯示顏色的方法 } // 使用時，需要一個紅色的圓形 let obj = new circle('red'); ``` 使用橋接模式後我們的方法從`3 * 3`變成了`3 + 1`，而且如果後續顏色增加了，我們只需要稍微修改`showColor`方法，讓他支援新顏色就行了。如果我們變數的維度不是2，而是3，這種優勢會更加明顯，前一種需要的方法是`x * y * z`個，橋接模式優化後是`x + y + z`個，這直接就是指數級的優化。所以這裡橋接模式優化的核心思想是觀察重複程式碼能不能拆成多個維度，如果可以的話就把不同維度拆出來，使用時再將這些維度橋接起來。 ### 例項：毛筆和蠟筆 橋接模式其實我最喜歡的例子就是`毛筆和蠟筆`，因為這個例子非常直觀，好理解。這個例子的需求是要畫`細`，`中`,`粗`三種型號的線，每種型號的線需要5種顏色，如果我們用蠟筆來畫就需要15支蠟筆，如果我們換毛筆來畫，只需要3支毛筆就行了，每次用不同顏色的墨水，用完換墨水就行。寫成程式碼就是這樣，跟上面那個有點像: ```javascript // 先來三個筆的類 function smallPen(color) { this.color = color; } smallPen.prototype.draw = function() { drawWithColor(this.color); // 用color顏色來畫畫 } function middlePen(color) { this.color = color; } middlePen.prototype.draw = function() { drawWithColor(this.color); // 用color顏色來畫畫 } function bigPen(color) { this.color = color; } bigPen.prototype.draw = function() { drawWithColor(this.color); // 用color顏色來畫畫 } // 再來一個顏色類 function color(color) { this.color = color; } // 使用時 new middlePen(new color('red')).draw(); // 畫一箇中號的紅線 new bigPen(new color('green')).draw(); // 畫一個大號的綠線 ``` 上述例子中蠟筆因為大小和顏色都是他本身的屬性，沒法分開，需要的蠟筆數量是兩個維度的乘積，也就是15支，如果再多一個維度，那複雜度是指數級增長的。但是毛筆的大小和顏色這兩個維度是分開的，使用時將他們橋接在一起就行，只需要三隻毛筆，5瓶墨水，複雜度大大降低了。上面程式碼的顏色我新建了一個類，而上個例子畫圖形那裡的顏色是直接作為引數傳遞的，這樣做的目的是為了演示即使同一個設計模式也可以有不同的實現方案。具體採用哪種方案要根據我們實際的需求來，如果要橋接的只是顏色這麼一個簡單變數，完全可以作為引數傳遞，如果要橋接一個複雜物件，可能就需要一個類了。另外上述程式碼的三個筆的類看著就很重複，其實進一步優化還可以提取一個模板，也就是筆的基類，具體可以看看後面的模板方法模式。 ### 例項：選單項 這個例子的需求是：有多個選單項，每個選單項文字不一樣，滑鼠滑入滑出時文字的顏色也不一樣。我們一般實現時可能這麼寫程式碼: ```javascript function menuItem(word) { this.dom = document.createElement('div'); this.dom.innerHTML = word; } var menu1 = new menuItem('menu1'); var menu2 = new menuItem('menu2'); var menu3 = new menuItem('menu3'); // 給每個menu設定滑鼠滑入滑出事件 menu1.dom.onmouseover = function(){ menu1.dom.style.color = 'red'; } menu2.dom.onmouseover = function(){ menu1.dom.style1.color = 'green'; } menu3.dom.onmouseover = function(){ menu1.dom.style1.color = 'blue'; } menu1.dom.onmouseout = function(){ menu1.dom.style1.color = 'green'; } menu2.dom.onmouseout = function(){ menu1.dom.style1.color = 'blue'; } menu3.dom.onmouseout = function(){ menu1.dom.style1.color = 'red'; } ``` 上述程式碼看起來都好多重複的，為了消除這些重複程式碼，我們將事件繫結和顏色設定這兩個維度分離開： ```javascript // 選單項類多接收一個引數color function menuItem(word, color) { this.dom = document.createElement('div'); this.dom.innerHTML = word; this.color = color; // 將接收的顏色引數作為例項屬性 } // 選單項類新增一個例項方法，用於繫結事件 menuItem.prototype.bind = function() { var that = this; // 這裡的this指向menuItem例項物件 this.dom.onmouseover = function() { this.style.color = that.color.colorOver; // 注意這裡的this是事件回撥裡面的this,指向DOM節點 } this.dom.onmouseout = function() { this.style.color = that.color.colorOut; } } // 再建一個類存放顏色，目前這個類的比較簡單，後面可以根據需要擴充套件 function menuColor(colorOver, colorOut) { this.colorOver = colorOver; this.colorOut = colorOut; } // 現在新建選單項可以直接用一個數組來迴圈了 var menus = [ {word: 'menu1', colorOver: 'red', colorOut: 'green'}, {word: 'menu2', colorOver: 'green', colorOut: 'blue'}, {word: 'menu3', colorOver: 'blue', colorOut: 'red'}, ] for(var i = 0; i < menus.length; i++) { // 將引數傳進去進行例項化，最後調一下bind方法，這樣就會自動繫結事件了 new menuItem(menus[i].word, new menuColor(menus[i].colorOver, menus[i].colorOut)).bind(); } ``` 上述程式碼也是一樣的思路，我們將事件繫結和顏色兩個維度分別抽取出來，使用的時候再橋接，從而減少了大量相似的程式碼。 ## 享元模式 當我們觀察到程式碼中有大量相似的程式碼塊，他們做的事情可能都是一樣的，只是每次應用的物件不一樣，我們就可以考慮用享元模式。現在假設我們有一個需求是顯示多個彈窗，每個彈窗的文字和大小不同： ```javascript // 已經有一個彈窗類了 function Popup() {} // 彈窗類有一個顯示的方法 Popup.prototype.show = function() {} ``` 如果我們不用享元模式，一個一個彈就是這樣: ```javascript var popup1 = new Popup(); popup1.show(); var popup2 = new Popup(); popup2.show(); ``` 我們仔細觀察上面的程式碼，發現這兩個例項做的事情都是一樣的，都是顯示彈窗，但是每個彈窗的大小文字不一樣，那`show`方法是不是就可以提出來公用，把不一樣的部分作為引數傳進去就行。這種思路其實就是享元模式，我們改造如下: ```javascript var popupArr = [ {text: 'popup 1', width: 200, height: 400}, {text: 'popup 2', width: 300, height: 300}, ] var popup = new Popup(); for(var i = 0; i < popupArr.length; i++) { popup.show(popupArr[i]); // 注意show方法需要接收引數 } ``` ### 例項：檔案上傳 我們再來看一個例子，假如我們現在有個需求是上傳檔案，可能需要上傳多個檔案，我們一般寫程式碼可能就是這樣: ```javascript // 一個上傳的類 function Uploader(fileType, file) { this.fileType = fileType; this.file = file; } Uploader.prototype.init = function() {} // 初始化方法 Uploader.prototype.upload = function() {} // 具體上傳的方法 var file1, file2, file3; // 多個需要上傳的檔案 // 每個檔案都例項化一個Uploader new Uploader('img', file1).upload(); new Uploader('txt', file2).upload(); new Uploader('mp3', file3).upload(); ``` 上述程式碼我們需要上傳三個檔案於是例項化了三個`Uploader`，但其實這三個例項只有檔案型別和檔案資料不一樣，其他的都是一樣的，我們可以重用一樣的部分，不一樣的部分作為引數傳進去就行了，用享元模式優化如下: ```javascript // 檔案資料扔到一個數組裡面 var data = [ {filetype: 'img', file: file1}, {filetype: 'txt', file: file2}, {filetype: 'mp3', file: file3}, ]; // Uploader類改造一下, 建構函式不再接收引數 function Uploader() {} // 原型上的其他方法保持不變 Uploader.prototype.init = function() {} // 檔案型別和檔案資料其實是上傳的時候才用，作為upload的引數 Uploader.prototype.upload = function(fileType, file) {} // 呼叫時只需要一個例項，迴圈呼叫upload就行 var uploader = new Uploader(); for(var i = 0; i < data.length; i++) { uploader.upload(data[i].filetype, data[i].file) } ``` 上述程式碼我們通過引數的抽取將3個例項簡化為1個，提高了`Uploader`類的複用性。上述兩個例子其實是類似的，但他們只是享元模式的一種形式，只要是符合這種思想的都可以叫享元模式，比如jQuery裡面的`extend`方法也用到了享元模式。 ### 例項：jQuery的extend方法 jQuery的`extend`方法是大家經常用的一個方法了，他接收一個或者多個引數： > 1. 只有一個引數時，`extend`會將傳入的引數合併到jQuery自己身上。 > 2. 傳入兩個引數obj1和obj2時，`extend`會將obj2合併到obj1上。 根據上述需求，我們很容易自己實現： ```javascript $.extend = function() { if(arguments.length === 1) { for(var item in arguments[0]) { this[item] = arguments[0][item] } } else if(arguments.length === 2) { for(var item in arguments[1]) { arguments[0][item] = arguments[1][item]; } } } ``` 上述程式碼的`this[item] = arguments[0][item]`和`arguments[0][item] = arguments[1][item]`看著就很像，我們想想能不能優化下他，仔細看著兩行程式碼，他們不同的地方是拷貝的目標和來源不一樣，但是拷貝的操作卻是一樣的。所以我們用享元模式優化下，將不同的地方抽出來，保持共用的拷貝不變: ```javascript $.extend = function() { // 不同的部分抽取出兩個變數 var target = this; // 預設為this，即$本身 var source = arguments[0]; // 預設為第一個變數 // 如果有兩個引數, 改變target和source if(arguments.length === 2) { target = arguments[0]; source = arguments[1]; } // 共同的拷貝操作保持不變 for(var item in source) { target[item] = source[item]; } } ``` ## 模板方法模式 模板方法模式其實類似於繼承，就是我們先定義一個通用的模板骨架，然後後面在這個基礎上繼續擴充套件。我們通過一個需求來看下他的基本結構，假設我們現在需要實現一個導航元件，但是這個導航型別還比較多，有的帶訊息提示，有的是橫著的，有的是豎著的，而且後面還可能會新增型別： ```javascript // 先建一個基礎的類 function baseNav() { } baseNav.prototype.action = function(callback){} //接收一個回撥進行特異性處理 ``` 上述程式碼我們先建了一個基礎的類，裡面只有最基本的屬性和方法，其實就相當於一個模板，而且在具體的方法裡面還可以接收回調，這樣後面派生出來的類可以根據自己的需求傳入回撥。模板方法模式其實就是類似於面向物件的基類和派生類的關係，下面我們再來看一個例子。 ### 例項：彈窗 還是之前用過的彈窗例子，我們要做一個大小文字可能不同的彈窗元件，只是這次我們的彈窗還有取消和確定兩個按鈕，這兩個按鈕在不同場景下可能有不同的行為，比如發起請求什麼的。但是他們也有一個共同的操作，就是點選這兩個按鈕後彈窗都會消失，這樣我們就可以把共同的部分先寫出來，作為一個模板： ```javascript function basePopup(word, size) { this.word = word; this.size = size; this.dom = null; } basePopup.prototype.init = function() { // 初始化DOM元素 var div = document.createElement('div'); div.innerHTML = this.word; div.style.width = this.size.width; div.style.height = this.size.height; this.dom = div; } // 取消的方法 basePopup.prototype.cancel = function() { this.dom.style.display = 'none'; } // 確認的方法 basePopup.prototype.confirm = function() { this.dom.style.display = 'none'; } ``` 現在我們有了一個基礎的模板，那假如我們還需要在點選取消或者確認後再進行其他操作，比如發起請求，我們可以以這個模板為基礎再加上後面需要的操作就行： ```javascript // 先繼承basePopup function ajaxPopup(word, size) { basePopup.call(this, word, size); } ajaxPopup.prototype = new basePopup(); ajaxPopup.prototype.constructor = ajaxPopup; // 上面是一個繼承的標準寫法，其實就相當於套用了模板 // 下面來加上需要的發起網路請求的操作 var cancel = ajaxPopup.prototype.cancel; // 先快取模板上的cancel方法 ajaxPopup.prototype.cancel = function() { // 先調模板的cancel cancel.call(this); // 再加上特殊的處理，比如發起請求 $.ajax(); } // confirm方法是一樣的處理 var confirm = ajaxPopup.prototype.confirm; ajaxPopup.prototype.confirm = function() { confirm.call(this); $.ajax(); } ``` 上面這個例子是通過繼承實現了模板方法模式，但是這個模式並不是一定要用繼承的，他強調的是將一些基礎部分提取出來作為模板，後面更多的操作可以在這個基礎上進行擴充套件。 ### 例項：演算法計算器 這個例子我們就不用繼承了，他的需求是我們現在有一系列的演算法，但是這些演算法在具體用的時候可能還會新增一些不同的計算操作，需要新增的操作可能在這個演算法前執行，也可能在這個演算法後執行。 ```javascript // 先定義一個基本的類 function counter() { } // 類上有一個計算方法 counter.prototype.count = function(num) { // 裡面有一個演算法本身的基本計算方法 function baseCount(num) { // 這裡的演算法是什麼不重要，我們這裡就加1吧 num += 1; return num; } } ``` 根據需求我們要解決的問題是在基本演算法計算時可能還有其他計算操作，這些操作可能在基本計算前，也可能在基本計算之後，所以我們要在這個計算類上留出可擴充套件的介面： ```javascript function counter() { // 新增兩個佇列，用於基本演算法前或者後執行 this.beforeCounting = []; this.afterCounting = []; } // 新增一個介面，接收基本演算法計算前應該進行的計算 counter.prototype.before = function(fn) { this.beforeCounting.push(fn); // 直接將方法放進數組裡面 } // 再新增一個介面，接收基本演算法計算後應該進行的計算 counter.prototype.after = function(fn) { this.afterCounting.push(fn); } // 改造計算方法，讓他按照計算前-基本計算-計算後執行 counter.prototype.count = function(num) { function baseCount(num) { num += 1; return num; } var result = num; var arr = [baseCount]; // 將需要進行的計算都放到這個數組裡面 arr = this.beforeCounting.concat(arr); // 計算前操作放到陣列前面 arr = arr.concat(this.afterCounting); // 計算後操作放到陣列後面 // 將陣列全部按順序拿出來執行 while(arr.length > 0) { result = arr.shift()(result); } return result; } // 現在counter就可以直接使用了 var counterIntance = new counter(); counterIntance.before(num => num + 10); // 計算前先加10 counterIntance.after(num => num - 5); // 計算後再減5 counterIntance.count(2); // 2 + 10 + 1 - 5 = 8 ``` 這次我們沒有用繼承了，但是我們仍然是先定義了一個基本的操作骨架，然後在這個骨架上去擴充套件不同地方需要的特殊操作。 ## 總結 1. 如果我們的程式碼中出現了大量相似的程式碼塊，往往意味著有進一步的優化空間。 2. 如果這些重複程式碼塊可以拆分成不同的維度，那可以試試橋接模式，先將維度拆開，再橋接這些維度來使用。 3. 如果這些重複程式碼有一部分操作是一樣的，但是每次操作的物件不一樣，我們可以考慮用享元模式將公有操作提取成方法，將私有部分作為引數傳進去。 4. 如果這些重複程式碼有一些基本操作是一樣的，但是具體應用時需要的功能更多，我們可以考慮將這些基本操作提取成模板，然後在模板上留出擴充套件介面，需要的地方可以通過這些介面來擴充套件功能，有點類似於繼承，但實現方式並不僅限於繼承。 5. 我們將重複部分提取出來，其他地方也可以用，其實就是提高了程式碼的複用性。 6. 還是那句話，設計模式沒有固定的正規化，主要還是要理解他的思想，程式碼在不同地方可以有不同的實現方式。 **文章的最後，感謝你花費寶貴的時間閱讀本文，如果本文給了你一點點幫助或者啟發，請不要吝嗇你的贊和GitHub小星星，你的支援是作者持續創作的動力。** **本文素材來自於[網易高階前端開發工程師微專業](https://mooc.study.163.com/smartSpec/detail/1202851605.htm)唐磊老師的設計模式課程。** **作者博文GitHub專案地址： [https://github.com/dennis-jiang/Front-End-Knowledges](https://github.com/dennis-jiang/Front-End-Knowledges)** **作者掘金文章彙總：[https://juejin.im/post/5e3ffc85518825494e2772fd](https://juejin.im/post/5e3ffc85518825494e2