[[351035]]

 前言

設(shè)計(jì)模式是一個程序員進(jìn)階高級的必備技巧,也是評判一個工程師工作經(jīng)驗(yàn)和能力的試金石.設(shè)計(jì)模式是程序員多年工作經(jīng)驗(yàn)的凝練和總結(jié),能更大限度的優(yōu)化代碼以及對已有代碼的合理重構(gòu).作為一名合格的前端工程師,學(xué)習(xí)設(shè)計(jì)模式是對自己工作經(jīng)驗(yàn)的另一種方式的總結(jié)和反思,也是開發(fā)高質(zhì)量,高可維護(hù)性,可擴(kuò)展性代碼的重要手段.我們所熟知的金典的幾大框架,比如jquery, react, vue內(nèi)部也大量應(yīng)用了設(shè)計(jì)模式, 比如觀察者模式, 代理模式, 單例模式等.所以作為一個架構(gòu)師,設(shè)計(jì)模式是必須掌握的.在中高級前端工程師的面試的過程中,面試官也會適當(dāng)考察求職者對設(shè)計(jì)模式的了解,所以筆者結(jié)合多年的工作經(jīng)驗(yàn)和學(xué)習(xí)探索, 總結(jié)并畫出了針對javascript設(shè)計(jì)模式的思維導(dǎo)圖和實(shí)際案例,接下來就來讓我們一起來探索習(xí)吧.

你將收獲

• 單例模式
• 構(gòu)造器模式
• 建造者模式
• 代理模式
• 外觀模式
• 觀察者模式
• 策略模式
• 迭代器模式

正文

我們先來看看總覽.設(shè)計(jì)模式到底可以給我們帶來什么呢?

以上筆者主要總結(jié)了幾點(diǎn)使用設(shè)計(jì)模式能給工程帶來的好處, 如代碼可解耦, 可擴(kuò)展性,可靠性, 條理性, 可復(fù)用性. 接下來來看看我們javascript的第一個設(shè)計(jì)模式. 

1. 單例模式

1.1 概念解讀

單例模式: 保證一個類只有一個實(shí)例, 一般先判斷實(shí)例是否存在,如果存在直接返回, 不存在則先創(chuàng)建再返回,這樣就可以保證一個類只有一個實(shí)例對象.

1.2 作用

• 模塊間通信
• 保證某個類的對象的唯一性
• 防止變量污染

1.3 注意事項(xiàng)

• 正確使用this
• 閉包容易造成內(nèi)存泄漏,所以要及時清除不需要的變量
• 創(chuàng)建一個新對象的成本較高

1.4 實(shí)際案例

單例模式廣泛應(yīng)用于不同程序語言中, 在實(shí)際軟件應(yīng)用中應(yīng)用比較多的比如電腦的任務(wù)管理器,回收站, 網(wǎng)站的計(jì)數(shù)器, 多線程的線程池的設(shè)計(jì)等.

1.5 代碼實(shí)現(xiàn)

(function(){ 
  // 養(yǎng)魚游戲 
  let fish = null 
  function catchFish() { 
    // 如果魚存在,則直接返回 
    if(fish) { 
      return fish 
    }else { 
      // 如果魚不存在,則獲取魚再返回 
      fish = document.querySelector('#cat') 
      return { 
        fish, 
        water: function() { 
          let water = this.fish.getAttribute('weight') 
          this.fish.setAttribute('weight', ++water) 
        } 
      } 
    } 
  } 
 
  // 每隔3小時喂一次水 
  setInterval(() => { 
    catchFish().water() 
  }, 3*60*60*1000) 
})() 

2. 構(gòu)造器模式

2.1 概念解讀

構(gòu)造器模式: 用于創(chuàng)建特定類型的對象,以便實(shí)現(xiàn)業(yè)務(wù)邏輯和功能的可復(fù)用.

2.2 作用

• 創(chuàng)建特定類型的對象
• 邏輯和業(yè)務(wù)的封裝

2.3 注意事項(xiàng)

• 注意劃分好業(yè)務(wù)邏輯的邊界
• 配合單例實(shí)現(xiàn)初始化等工作
• 構(gòu)造函數(shù)命名規(guī)范,第一個字母大寫
• new對象的成本,把公用方法放到原型鏈上

2.4 實(shí)際案例

構(gòu)造器模式我覺得是代碼的格局,也是用來考驗(yàn)程序員對業(yè)務(wù)代碼的理解程度.它往往用于實(shí)現(xiàn)javascript的工具庫,比如lodash等以及javascript框架. 

2.5 代碼展示

function Tools(){ 
  if(!(this instanceof Tools)){ 
    return new Tools() 
  } 
  this.name = 'js工具庫' 
  // 獲取dom的方法 
  this.getEl = function(elem) { 
    return document.querySelector(elem) 
  } 
  // 判斷是否是數(shù)組 
  this.isArray = function(arr) { 
    return Array.isArray(arr) 
  } 
  // 其他通用方法... 
} 

3. 建造者模式

3.1 概念解讀

建造者模式: 將一個復(fù)雜的邏輯或者功能通過有條理的分工來一步步實(shí)現(xiàn).

3.2 作用

• 分布創(chuàng)建一個復(fù)雜的對象或者實(shí)現(xiàn)一個復(fù)雜的功能
• 解耦封裝過程, 無需關(guān)注具體創(chuàng)建的細(xì)節(jié)

3.3 注意事項(xiàng)

• 需要有可靠算法和邏輯的支持
• 按需暴露一定的接口

3.4 實(shí)際案例

建造者模式其實(shí)在很多領(lǐng)域也有應(yīng)用,筆者之前也寫過很多js插件,大部分都采用了建造者模式, 可以在筆者github地址徐小夕的github學(xué)習(xí)參考. 其他案例如下:

• jquery的ajax的封裝
• jquery插件封裝
• react/vue某一具體組件的設(shè)計(jì)

3.5 代碼展示

筆者就拿之前使用建造者模式實(shí)現(xiàn)的一個案例:Canvas入門實(shí)戰(zhàn)之用javascript面向?qū)ο髮?shí)現(xiàn)一個圖形驗(yàn)證碼, 那讓我們使用建造者模式實(shí)現(xiàn)一個非常常見的驗(yàn)證碼插件吧!

// canvas繪制圖形驗(yàn)證碼 
(function(){ 
    function Gcode(el, option) { 
        this.el = typeof el === 'string' ? document.querySelector(el) : el; 
        this.option = option; 
        this.init(); 
    } 
    Gcode.prototype = { 
        constructor: Gcode, 
        init: function() { 
            if(this.el.getContext) { 
                isSupportCanvas = true; 
                var ctx = this.el.getContext('2d'), 
                // 設(shè)置畫布寬高 
                cw = this.el.width = this.option.width || 200, 
                ch = this.el.height = this.option.height || 40, 
                textLen = this.option.textLen || 4, 
                lineNum = this.option.lineNum || 4; 
                var text = this.randomText(textLen); 
     
                this.onClick(ctx, textLen, lineNum, cw, ch); 
                this.drawLine(ctx, lineNum, cw, ch); 
                this.drawText(ctx, text, ch); 
            } 
        }, 
        onClick: function(ctx, textLen, lineNum, cw, ch) { 
            var _ = this; 
            this.el.addEventListener('click', function(){ 
                text = _.randomText(textLen); 
                _.drawLine(ctx, lineNum, cw, ch); 
                _.drawText(ctx, text, ch); 
            }, false) 
        }, 
        // 畫干擾線 
        drawLine: function(ctx, lineNum, maxW, maxH) { 
            ctx.clearRect(0, 0, maxW, maxH); 
            for(var i=0; i < lineNum; i++) { 
                var dx1 = Math.random()* maxW, 
                    dy1 = Math.random()* maxH, 
                    dx2 = Math.random()* maxW, 
                    dy2 = Math.random()* maxH; 
                ctx.strokeStyle = 'rgb(' + 255*Math.random() + ',' + 255*Math.random() + ',' + 255*Math.random() + ')'; 
                ctx.beginPath(); 
                ctx.moveTo(dx1, dy1); 
                ctx.lineTo(dx2, dy2); 
                ctx.stroke(); 
            } 
        }, 
        // 畫文字 
        drawText: function(ctx, text, maxH) { 
            var len = text.length; 
            for(var i=0; i < len; i++) { 
                var dx = 30 * Math.random() + 30* i, 
                    dy = Math.random()* 5 + maxH/2; 
                ctx.fillStyle = 'rgb(' + 255*Math.random() + ',' + 255*Math.random() + ',' + 255*Math.random() + ')'; 
                ctx.font = '30px Helvetica'; 
                ctx.textBaseline = 'middle'; 
                ctx.fillText(text[i], dx, dy); 
            } 
        }, 
        // 生成指定個數(shù)的隨機(jī)文字 
        randomText: function(len) { 
            var source = ['a', 'b', 'c', 'd', 'e', 
            'f', 'g', 'h', 'i', 'j',  
            'k', 'l', 'm', 'o', 'p', 
            'q', 'r', 's', 't', 'u', 
            'v', 'w', 'x', 'y', 'z']; 
            var result = []; 
            var sourceLen = source.length; 
            for(var i=0; i< len; i++) { 
                var text = this.generateUniqueText(source, result, sourceLen); 
                result.push(text) 
            } 
            return result.join('') 
        }, 
        // 生成唯一文字 
        generateUniqueText: function(source, hasList, limit) { 
            var text = source[Math.floor(Math.random()*limit)]; 
            if(hasList.indexOf(text) > -1) { 
                return this.generateUniqueText(source, hasList, limit) 
            }else { 
                return text 
            }   
        } 
    } 
    new Gcode('#canvas_code', { 
        lineNum: 6 
    }) 
})(); 
// 調(diào)用 
new Gcode('#canvas_code', { 
  lineNum: 6 
}) 

4. 代理模式

4.1 概念解讀

代理模式: 一個對象通過某種代理方式來控制對另一個對象的訪問.

4.2 作用

• 遠(yuǎn)程代理(一個對象對另一個對象的局部代理)
• 虛擬代理(對于需要創(chuàng)建開銷很大的對象如渲染網(wǎng)頁大圖時可以先用縮略圖代替真圖)
• 安全代理(保護(hù)真實(shí)對象的訪問權(quán)限)
• 緩存代理(一些開銷比較大的運(yùn)算提供暫時的存儲，下次運(yùn)算時，如果傳遞進(jìn)來的參數(shù)跟之前相同，則可以直接返回前面存儲的運(yùn)算結(jié)果)

4.3 注意事項(xiàng)

使用代理會增加代碼的復(fù)雜度,所以應(yīng)該有選擇的使用代理.

實(shí)際案例

我們可以使用代理模式實(shí)現(xiàn)如下功能:

• 通過緩存代理來優(yōu)化計(jì)算性能
• 圖片占位符/骨架屏/預(yù)加載等
• 合并請求/資源

4.4 代碼展示

接下來我們通過實(shí)現(xiàn)一個計(jì)算緩存器來說說代理模式的應(yīng)用.

// 緩存代理 
function sum(a, b){ 
  return a + b 
} 
let proxySum = (function(){ 
  let cache = {} 
  return function(){ 
      let args = Array.prototype.join.call(arguments, ','); 
      if(args in cache){ 
          return cache[args]; 
      } 
 
      cache[args] = sum.apply(this, arguments) 
      return cache[args] 
  } 
})() 

5. 外觀模式

5.1 概念解讀

外觀模式(facade): 為子系統(tǒng)中的一組接口提供一個一致的表現(xiàn),使得子系統(tǒng)更容易使用而不需要關(guān)注內(nèi)部復(fù)雜而繁瑣的細(xì)節(jié).

5.2 作用

• 對接口和調(diào)用者進(jìn)行了一定的解耦
• 創(chuàng)造經(jīng)典的三層結(jié)構(gòu)MVC
• 在開發(fā)階段減少不同子系統(tǒng)之間的依賴和耦合,方便各個子系統(tǒng)的迭代和擴(kuò)展
• 為大型復(fù)雜系統(tǒng)提供一個清晰的接口

5.3 注意事項(xiàng)

當(dāng)外觀模式被開發(fā)者連續(xù)調(diào)用時會造成一定的性能損耗,這是由于每次調(diào)用都會進(jìn)行可用性檢測

5.4 實(shí)際案例

我們可以使用外觀模式來設(shè)計(jì)兼容不同瀏覽器的事件綁定的方法以及其他需要統(tǒng)一實(shí)現(xiàn)接口的方法或者抽象類.

5.5 代碼展示

接下來我們通過實(shí)現(xiàn)一個兼容不同瀏覽器的事件監(jiān)聽函數(shù)來讓大家理解外觀模式如何使用.

function on(type, fn){ 
  // 對于支持dom2級事件處理程序 
  if(document.addEventListener){ 
      dom.addEventListener(type,fn,false); 
  }else if(dom.attachEvent){ 
  // 對于IE9一下的ie瀏覽器 
      dom.attachEvent('on'+type,fn); 
  }else { 
      dom['on'+ type] = fn; 
  } 
} 

6. 觀察者模式

6.1 概念解讀

觀察者模式: 定義了一種一對多的關(guān)系, 所有觀察對象同時監(jiān)聽某一主題對象,當(dāng)主題對象狀態(tài)發(fā)生變化時就會通知所有觀察者對象,使得他們能夠自動更新自己.

6.2 作用

• 目標(biāo)對象與觀察者存在一種動態(tài)關(guān)聯(lián),增加了靈活性
• 支持簡單的廣播通信, 自動通知所有已經(jīng)訂閱過的對象
• 目標(biāo)對象和觀察者之間的抽象耦合關(guān)系能夠單獨(dú)擴(kuò)展和重用

6.3 注意事項(xiàng)

觀察者模式一般都要注意要先監(jiān)聽, 再觸發(fā)(特殊情況也可以先發(fā)布,后訂閱,比如QQ的離線模式)

6.4 實(shí)際案例

觀察者模式是非常經(jīng)典的設(shè)計(jì)模式,主要應(yīng)用如下:

• 系統(tǒng)消息通知
• 網(wǎng)站日志記錄
• 內(nèi)容訂閱功能
• javascript事件機(jī)制
• react/vue等的觀察者

6.5 代碼展示

接下來我們我們使用原生javascript實(shí)現(xiàn)一個觀察者模式:

class Subject { 
  constructor() { 
    this.subs = {} 
  } 
 
  addSub(key, fn) { 
    const subArr = this.subs[key] 
    if (!subArr) { 
      this.subs[key] = [] 
    } 
    this.subs[key].push(fn) 
  } 
 
  trigger(key, message) { 
    const subArr = this.subs[key] 
    if (!subArr || subArr.length === 0) { 
      return false 
    } 
    for(let i = 0, len = subArr.length; i < len; i++) { 
      const fn = subArr[i] 
      fn(message) 
    } 
  } 
 
  unSub(key, fn) { 
    const subArr = this.subs[key] 
    if (!subArr) { 
      return false 
    } 
    if (!fn) { 
      this.subs[key] = [] 
    } else { 
      for (let i = 0, len = subArr.length; i < len; i++) { 
        const _fn = subArr[i] 
        if (_fn === fn) { 
          subArr.splice(i, 1) 
        } 
      } 
    } 
  } 
} 
 
// 測試 
// 訂閱 
let subA = new Subject() 
let A = (message) => { 
  console.log('訂閱者收到信息: ' + message) 
} 
subA.addSub('A', A) 
 
// 發(fā)布 
subA.trigger('A', '我是徐小夕')   // A收到信息: --> 我是徐小夕 

7. 策略模式

7.1 概念解讀

策略模式: 策略模式將不同算法進(jìn)行合理的分類和單獨(dú)封裝，讓不同算法之間可以互相替換而不會影響到算法的使用者.

7.2 作用

• 實(shí)現(xiàn)不同, 作用一致
• 調(diào)用方式相同,降低了使用成本以及不同算法之間的耦合
• 單獨(dú)定義算法模型, 方便單元測試
• 避免大量冗余的代碼判斷,比如if else等

7.3 實(shí)際案例

• 實(shí)現(xiàn)更優(yōu)雅的表單驗(yàn)證
• 游戲里的角色計(jì)分器
• 棋牌類游戲的輸贏算法

7.4 代碼展示

接下來我們實(shí)現(xiàn)一個根據(jù)不同類型實(shí)現(xiàn)求和算法的模式來帶大家理解策略模式.

const obj = { 
  A: (num) => num * 4, 
  B: (num) => num * 6, 
  C: (num) => num * 8 
} 
 
const getSum =function(type, num) { 
  return obj[type](num) 
} 

8. 迭代器模式

8.1 概念解讀

迭代器模式: 提供一種方法順序訪問一個聚合對象中的各個元素,使用者并不需要關(guān)心該方法的內(nèi)部表示.

8.2 作用

• 為遍歷不同集合提供統(tǒng)一接口
• 保護(hù)原集合但又提供外部訪問內(nèi)部元素的方式

8.3 實(shí)際案例

迭代器模式模式最常見的案例就是數(shù)組的遍歷方法如forEach, map, reduce.

8.4 代碼展示

接下來筆者使用自己封裝的一個遍歷函數(shù)來讓大家更加理解迭代器模式的使用,該方法不僅可以遍歷數(shù)組和字符串,還能遍歷對象.lodash里的_.forEach(collection, [iteratee=_.identity])方法也是采用策略模式的典型應(yīng)用.

function _each(el, fn = (v, k, el) => {}) { 
  // 判斷數(shù)據(jù)類型 
  function checkType(target){ 
    return Object.prototype.toString.call(target).slice(8,-1) 
  } 
 
  // 數(shù)組或者字符串 
  if(['Array', 'String'].indexOf(checkType(el)) > -1) { 
    for(let i=0, len = el.length; i< len; i++) { 
      fn(el[i], i, el) 
    } 
  }else if(checkType(el) === 'Object') { 
    for(let key in el) { 
      fn(el[key], key, el) 
    } 
  } 
}