提高代碼復用性的web設計模式有哪些

這篇文章主要講解了“提高代碼復用性的web設計模式有哪些”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“提高代碼復用性的web設計模式有哪些”吧！

橋接模式

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

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

這次我們沒有用繼承了，但是我們仍然是先定義了一個基本的操作骨架，然后在這個骨架上去擴展不同地方需要的特殊操作。

感謝各位的閱讀，以上就是“提高代碼復用性的web設計模式有哪些”的內容了，經過本文的學習后，相信大家對提高代碼復用性的web設計模式有哪些這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！