設計模式第二彈: 不知道怎么提高代碼復用性？看看這幾種設計模式吧！

本文是設計模式的第二篇文章，第一篇文章是不知道怎么封裝代碼？看看這幾種設計模式吧！，后面還會有提高擴展性，提高代碼質量的設計模式，點個關注不迷路，哈哈~

想必大家都聽說過DRY原則，其實就是Don't repeat yourself(不要重復你自己)，意思就是不要重復寫一樣的代碼，換句話說就是要提高代碼的復用性。那什么樣的代碼才算有好的復用性呢？

1. 對象可以重復利用。這個其實有點像我們關系型數據庫的設計原則，數據表和關系表是分開的，數據表就是單純的數據，沒有跟其他表的關系，也沒有業務邏輯，關系表才是存儲具體的對應關系。當我們需要某個數據時，直接讀這個表就行，而不用擔心這個表會有其他的業務在里面。類似設計的還有redux，redux的store里面就是單純的數據，並不對應具體的業務邏輯，業務如果需要改變數據需要發action才行。正是因為這種數據很單純，所以我們需要的地方都可以拿來用，復用性非常高。所以我們設計數據或對象時，也要盡量讓他可以復用。
2. 重復代碼少。如果你寫的代碼重復度很高的話，說明你代碼的抽象度不夠。很多時候我們重復代碼的產生都是因為我們可能需要寫一個跟已經存在的功能類似的功能，於是我們就把之前的代碼拷貝過來，把其中兩行代碼改了完事。這樣做雖然功能實現了，但是卻制造了大量重復代碼，本文要講的幾種設計模式就是用來解決這個問題的，提高代碼的抽象度，減少重復代碼。
3. 模塊功能單一。這意味着一個模塊就專注於一個功能，我們需要做一個大功能時，就將多個模塊組合起來就行。這就像樂高積木，功能單一的模塊就像樂高積木的一小塊，我們可以用10個小塊拼成一個小汽車，也可以用20個小塊拼成一個大卡車。但是如果我們模塊本身做復雜了，做成了小汽車，我們是不能用兩個小汽車拼成一個大卡車的，這復用性就降低了。

提高復用性的設計模式主要有橋接模式，享元模式，模板方法模式，下面我們分別來看下。

橋接模式

橋接模式人如其名，其實就相當於一個橋梁，把不同維度的變量橋接在一起來實現功能。假設我們需要實現三種形狀（長方形，圓形，三角形），每種形狀有三種顏色（紅色，綠色，藍色），這個需求有兩個方案，一個方案寫九個方法，每個方法實現一個圖形：

function redRectangle() {}
function greenRectangle() {}
function blueRectangle() {}
function redCircle() {}
function greenCircle() {}
function blueCircle() {}
function redTriangle() {}
function greenTriangle() {}
function blueTriangle() {}

上述代碼雖然功能實現了，但是如果我們需求變了，我們要求再加一個顏色，那我們就得再加三個方法，每個形狀加一個。這么多方法看着就很重復，意味着他有優化的空間。我們仔細看下這個需求，我們最終要畫的圖形有顏色和形狀兩個變量，這兩個變量其實是沒有強的邏輯關系的，完全是兩個維度的變量。那我們可以將這兩個變量拆開，最終要畫圖形的時候再橋接起來，就是這樣：

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支毛筆就行了，每次用不同顏色的墨水，用完換墨水就行。寫成代碼就是這樣，跟上面那個有點像:

// 先來三個筆的類
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瓶墨水，復雜度大大降低了。上面代碼的顏色我新建了一個類，而上個例子畫圖形那里的顏色是直接作為參數傳遞的，這樣做的目的是為了演示即使同一個設計模式也可以有不同的實現方案。具體采用哪種方案要根據我們實際的需求來，如果要橋接的只是顏色這么一個簡單變量，完全可以作為參數傳遞，如果要橋接一個復雜對象，可能就需要一個類了。另外上述代碼的三個筆的類看着就很重復，其實進一步優化還可以提取一個模板，也就是筆的基類，具體可以看看后面的模板方法模式。

實例：菜單項

這個例子的需求是：有多個菜單項，每個菜單項文字不一樣，鼠標滑入滑出時文字的顏色也不一樣。我們一般實現時可能這么寫代碼:

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';
}

上述代碼看起來都好多重復的，為了消除這些重復代碼，我們將事件綁定和顏色設置這兩個維度分離開：

// 菜單項類多接收一個參數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();
}

上述代碼也是一樣的思路，我們將事件綁定和顏色兩個維度分別抽取出來，使用的時候再橋接，從而減少了大量相似的代碼。

享元模式

當我們觀察到代碼中有大量相似的代碼塊，他們做的事情可能都是一樣的，只是每次應用的對象不一樣，我們就可以考慮用享元模式。現在假設我們有一個需求是顯示多個彈窗，每個彈窗的文字和大小不同：

// 已經有一個彈窗類了
function Popup() {}

// 彈窗類有一個顯示的方法
Popup.prototype.show = function() {}

如果我們不用享元模式，一個一個彈就是這樣:

var popup1 = new Popup();
popup1.show();

var popup2 = new Popup();
popup2.show();

我們仔細觀察上面的代碼，發現這兩個實例做的事情都是一樣的，都是顯示彈窗，但是每個彈窗的大小文字不一樣，那show方法是不是就可以提出來公用，把不一樣的部分作為參數傳進去就行。這種思路其實就是享元模式，我們改造如下:

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方法需要接收參數
}

實例：文件上傳

我們再來看一個例子，假如我們現在有個需求是上傳文件，可能需要上傳多個文件，我們一般寫代碼可能就是這樣:

// 一個上傳的類
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，但其實這三個實例只有文件類型和文件數據不一樣，其他的都是一樣的，我們可以重用一樣的部分，不一樣的部分作為參數傳進去就行了，用享元模式優化如下:

// 文件數據扔到一個數組里面
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上。

根據上述需求，我們很容易自己實現：

$.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]看着就很像，我們想想能不能優化下他，仔細看着兩行代碼，他們不同的地方是拷貝的目標和來源不一樣，但是拷貝的操作卻是一樣的。所以我們用享元模式優化下，將不同的地方抽出來，保持共用的拷貝不變:

$.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];
  }
}

模板方法模式

模板方法模式其實類似於繼承，就是我們先定義一個通用的模板骨架，然后后面在這個基礎上繼續擴展。我們通過一個需求來看下他的基本結構，假設我們現在需要實現一個導航組件，但是這個導航類型還比較多，有的帶消息提示，有的是橫着的，有的是豎着的，而且后面還可能會新增類型：

// 先建一個基礎的類
function baseNav() {
}

baseNav.prototype.action = function(callback){}  //接收一個回調進行特異性處理

上述代碼我們先建了一個基礎的類，里面只有最基本的屬性和方法，其實就相當於一個模板，而且在具體的方法里面還可以接收回調，這樣后面派生出來的類可以根據自己的需求傳入回調。模板方法模式其實就是類似於面向對象的基類和派生類的關系，下面我們再來看一個例子。

實例：彈窗

還是之前用過的彈窗例子，我們要做一個大小文字可能不同的彈窗組件，只是這次我們的彈窗還有取消和確定兩個按鈕，這兩個按鈕在不同場景下可能有不同的行為，比如發起請求什么的。但是他們也有一個共同的操作，就是點擊這兩個按鈕后彈窗都會消失，這樣我們就可以把共同的部分先寫出來，作為一個模板：

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';
}

現在我們有了一個基礎的模板，那假如我們還需要在點擊取消或者確認后再進行其他操作，比如發起請求，我們可以以這個模板為基礎再加上后面需要的操作就行：

// 先繼承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();
}

上面這個例子是通過繼承實現了模板方法模式，但是這個模式並不是一定要用繼承的，他強調的是將一些基礎部分提取出來作為模板，后面更多的操作可以在這個基礎上進行擴展。

實例：算法計算器

這個例子我們就不用繼承了，他的需求是我們現在有一系列的算法，但是這些算法在具體用的時候可能還會添加一些不同的計算操作，需要添加的操作可能在這個算法前執行，也可能在這個算法后執行。

// 先定義一個基本的類
function counter() {
  
}

// 類上有一個計算方法
counter.prototype.count = function(num) {
  // 里面有一個算法本身的基本計算方法
  function baseCount(num) {
    // 這里的算法是什么不重要，我們這里就加1吧
    num += 1;
    return num;
  }
}

根據需求我們要解決的問題是在基本算法計算時可能還有其他計算操作，這些操作可能在基本計算前，也可能在基本計算之后，所以我們要在這個計算類上留出可擴展的接口：

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://juejin.im/post/5e3ffc85518825494e2772fd

“前端進階知識”系列文章源碼GitHub地址： https://github.com/dennis-jiang/Front-End-Knowledges