前端工程師必知的Javascript設(shè)計(jì)模式有哪些

本篇文章給大家分享的是有關(guān)前端工程師必知的Javascript設(shè)計(jì)模式有哪些，小編覺得挺實(shí)用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

 前言

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

正文

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

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

1. 單例模式

1.1 概念解讀

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

1.2 作用

• 模塊間通信

• 保證某個(gè)類的對(duì)象的唯一性

• 防止變量污染

1.3 注意事項(xiàng)

• 正確使用this

• 閉包容易造成內(nèi)存泄漏,所以要及時(shí)清除不需要的變量

• 創(chuàng)建一個(gè)新對(duì)象的成本較高

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小時(shí)喂一次水   setInterval(() => {     catchFish().water()   }, 3*60*60*1000) })()

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

2.1 概念解讀

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

2.2 作用

• 創(chuàng)建特定類型的對(duì)象

• 邏輯和業(yè)務(wù)的封裝

2.3 注意事項(xiàng)

• 注意劃分好業(yè)務(wù)邏輯的邊界

• 配合單例實(shí)現(xiàn)初始化等工作

• 構(gòu)造函數(shù)命名規(guī)范,第一個(gè)字母大寫

• new對(duì)象的成本,把公用方法放到原型鏈上

2.4 實(shí)際案例

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

2.5 代碼展示

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

3. 建造者模式

3.1 概念解讀

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

3.2 作用

• 分布創(chuàng)建一個(gè)復(fù)雜的對(duì)象或者實(shí)現(xiàn)一個(gè)復(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)的一個(gè)案例:Canvas入門實(shí)戰(zhàn)之用javascript面向?qū)ο髮?shí)現(xiàn)一個(gè)圖形驗(yàn)證碼,  那讓我們使用建造者模式實(shí)現(xiàn)一個(gè)非常常見的驗(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);             }         },         // 生成指定個(gè)數(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 概念解讀

代理模式: 一個(gè)對(duì)象通過某種代理方式來控制對(duì)另一個(gè)對(duì)象的訪問.

4.2 作用

• 遠(yuǎn)程代理(一個(gè)對(duì)象對(duì)另一個(gè)對(duì)象的局部代理)

• 虛擬代理(對(duì)于需要?jiǎng)?chuàng)建開銷很大的對(duì)象如渲染網(wǎng)頁大圖時(shí)可以先用縮略圖代替真圖)

• 安全代理(保護(hù)真實(shí)對(duì)象的訪問權(quán)限)

• 緩存代理(一些開銷比較大的運(yùn)算提供暫時(shí)的存儲(chǔ)，下次運(yùn)算時(shí)，如果傳遞進(jìn)來的參數(shù)跟之前相同，則可以直接返回前面存儲(chǔ)的運(yùn)算結(jié)果)

4.3 注意事項(xiàng)

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

實(shí)際案例

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

• 通過緩存代理來優(yōu)化計(jì)算性能

• 圖片占位符/骨架屏/預(yù)加載等

• 合并請(qǐng)求/資源

4.4 代碼展示

接下來我們通過實(shí)現(xiàn)一個(gè)計(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)中的一組接口提供一個(gè)一致的表現(xiàn),使得子系統(tǒng)更容易使用而不需要關(guān)注內(nèi)部復(fù)雜而繁瑣的細(xì)節(jié).

5.2 作用

• 對(duì)接口和調(diào)用者進(jìn)行了一定的解耦

• 創(chuàng)造經(jīng)典的三層結(jié)構(gòu)MVC

• 在開發(fā)階段減少不同子系統(tǒng)之間的依賴和耦合,方便各個(gè)子系統(tǒng)的迭代和擴(kuò)展

• 為大型復(fù)雜系統(tǒng)提供一個(gè)清晰的接口

5.3 注意事項(xiàng)

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

5.4 實(shí)際案例

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

5.5 代碼展示

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

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

6. 觀察者模式

6.1 概念解讀

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

6.2 作用

• 目標(biāo)對(duì)象與觀察者存在一種動(dòng)態(tài)關(guān)聯(lián),增加了靈活性

• 支持簡(jiǎn)單的廣播通信, 自動(dòng)通知所有已經(jīng)訂閱過的對(duì)象

• 目標(biāo)對(duì)象和觀察者之間的抽象耦合關(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)一個(gè)觀察者模式:

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)         }       }     }   } }  // 測(cè)試 // 訂閱 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ú)封裝，讓不同算法之間可以互相替換而不會(huì)影響到算法的使用者.

7.2 作用

• 實(shí)現(xiàn)不同, 作用一致

• 調(diào)用方式相同,降低了使用成本以及不同算法之間的耦合

• 單獨(dú)定義算法模型, 方便單元測(cè)試

• 避免大量冗余的代碼判斷,比如if else等

7.3 實(shí)際案例

• 實(shí)現(xiàn)更優(yōu)雅的表單驗(yàn)證

• 游戲里的角色計(jì)分器

• 棋牌類游戲的輸贏算法

7.4 代碼展示

接下來我們實(shí)現(xiàn)一個(gè)根據(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 概念解讀

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

8.2 作用

• 為遍歷不同集合提供統(tǒng)一接口

• 保護(hù)原集合但又提供外部訪問內(nèi)部元素的方式

8.3 實(shí)際案例

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

8.4 代碼展示

接下來筆者使用自己封裝的一個(gè)遍歷函數(shù)來讓大家更加理解迭代器模式的使用,該方法不僅可以遍歷數(shù)組和字符串,還能遍歷對(duì)象.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)     }   } }以上就是前端工程師必知的Javascript設(shè)計(jì)模式有哪些，小編相信有部分知識(shí)點(diǎn)可能是我們?nèi)粘９ぷ鲿?huì)見到或用到的。希望你能通過這篇文章學(xué)到更多知識(shí)。更多詳情敬請(qǐng)關(guān)注億速云行業(yè)資訊頻道。