自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

15分鐘帶你了解前端工程師必知的Javascript設(shè)計(jì)模式(附詳細(xì)思維導(dǎo)圖和源碼)

作者：徐小夕
開發(fā) 前端
筆者結(jié)合多年的工作經(jīng)驗(yàn)和學(xué)習(xí)探索, 總結(jié)并畫出了針對javascript設(shè)計(jì)模式的思維導(dǎo)圖和實(shí)際案例,接下來就來讓我們一起來探索習(xí)吧！

[[431984]]

前言

設(shè)計(jì)模式是一個(gè)程序員進(jìn)階高級的必備技巧,也是評判一個(gè)工程師工作經(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è)架構(gòu)師,設(shè)計(jì)模式是必須掌握的.在中高級前端工程師的面試的過程中,面試官也會(huì)適當(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的第一個(gè)設(shè)計(jì)模式.

1. 單例模式

1.1 概念解讀

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

1.2 作用

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

1.3 注意事項(xiàng)

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

1.4 實(shí)際案例

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

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

  1. (function(){ 
  2.   // 養(yǎng)魚游戲 
  3.   let fish = null 
  4.   function catchFish() { 
  5.     // 如果魚存在,則直接返回 
  6.     if(fish) { 
  7.       return fish 
  8.     }else { 
  9.       // 如果魚不存在,則獲取魚再返回 
  10.       fish = document.querySelector('#cat') 
  11.       return { 
  12.         fish, 
  13.         water: function() { 
  14.           let water = this.fish.getAttribute('weight') 
  15.           this.fish.setAttribute('weight', ++water) 
  16.         } 
  17.       } 
  18.     } 
  19.   } 
  20.  
  21.   // 每隔3小時(shí)喂一次水 
  22.   setInterval(() => { 
  23.     catchFish().water() 
  24.   }, 3*60*60*1000) 
  25. })() 

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ī)范,第一個(gè)字母大寫
  • new對象的成本,把公用方法放到原型鏈上

2.4 實(shí)際案例

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

2.5 代碼展示

  1. function Tools(){ 
  2.   if(!(this instanceof Tools)){ 
  3.     return new Tools() 
  4.   } 
  5.   this.name = 'js工具庫' 
  6.   // 獲取dom的方法 
  7.   this.getEl = function(elem) { 
  8.     return document.querySelector(elem) 
  9.   } 
  10.   // 判斷是否是數(shù)組 
  11.   this.isArray = function(arr) { 
  12.     return Array.isArray(arr) 
  13.   } 
  14.   // 其他通用方法... 
  15. } 

3. 建造者模式

3.1 概念解讀

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

3.2 作用

  • 分布創(chuàng)建一個(gè)復(fù)雜的對象或者實(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)證碼插件吧!

  1. // canvas繪制圖形驗(yàn)證碼 
  2. (function(){ 
  3.     function Gcode(el, option) { 
  4.         this.el = typeof el === 'string' ? document.querySelector(el) : el; 
  5.         this.option = option; 
  6.         this.init(); 
  7.     } 
  8.     Gcode.prototype = { 
  9.         constructor: Gcode, 
  10.         init: function() { 
  11.             if(this.el.getContext) { 
  12.                 isSupportCanvas = true; 
  13.                 var ctx = this.el.getContext('2d'), 
  14.                 // 設(shè)置畫布寬高 
  15.                 cw = this.el.width = this.option.width || 200, 
  16.                 ch = this.el.height = this.option.height || 40, 
  17.                 textLen = this.option.textLen || 4, 
  18.                 lineNum = this.option.lineNum || 4; 
  19.                 var text = this.randomText(textLen); 
  20.      
  21.                 this.onClick(ctx, textLen, lineNum, cw, ch); 
  22.                 this.drawLine(ctx, lineNum, cw, ch); 
  23.                 this.drawText(ctx, text, ch); 
  24.             } 
  25.         }, 
  26.         onClick: function(ctx, textLen, lineNum, cw, ch) { 
  27.             var _ = this; 
  28.             this.el.addEventListener('click', function(){ 
  29.                 text = _.randomText(textLen); 
  30.                 _.drawLine(ctx, lineNum, cw, ch); 
  31.                 _.drawText(ctx, text, ch); 
  32.             }, false) 
  33.         }, 
  34.         // 畫干擾線 
  35.         drawLine: function(ctx, lineNum, maxW, maxH) { 
  36.             ctx.clearRect(0, 0, maxW, maxH); 
  37.             for(var i=0; i < lineNum; i++) { 
  38.                 var dx1 = Math.random()* maxW, 
  39.                     dy1 = Math.random()* maxH, 
  40.                     dx2 = Math.random()* maxW, 
  41.                     dy2 = Math.random()* maxH; 
  42.                 ctx.strokeStyle = 'rgb(' + 255*Math.random() + ',' + 255*Math.random() + ',' + 255*Math.random() + ')'; 
  43.                 ctx.beginPath(); 
  44.                 ctx.moveTo(dx1, dy1); 
  45.                 ctx.lineTo(dx2, dy2); 
  46.                 ctx.stroke(); 
  47.             } 
  48.         }, 
  49.         // 畫文字 
  50.         drawText: function(ctx, text, maxH) { 
  51.             var len = text.length; 
  52.             for(var i=0; i < len; i++) { 
  53.                 var dx = 30 * Math.random() + 30* i, 
  54.                     dy = Math.random()* 5 + maxH/2; 
  55.                 ctx.fillStyle = 'rgb(' + 255*Math.random() + ',' + 255*Math.random() + ',' + 255*Math.random() + ')'; 
  56.                 ctx.font = '30px Helvetica'; 
  57.                 ctx.textBaseline = 'middle'; 
  58.                 ctx.fillText(text[i], dx, dy); 
  59.             } 
  60.         }, 
  61.         // 生成指定個(gè)數(shù)的隨機(jī)文字 
  62.         randomText: function(len) { 
  63.             var source = ['a', 'b', 'c', 'd', 'e', 
  64.             'f', 'g', 'h', 'i', 'j',  
  65.             'k', 'l', 'm', 'o', 'p', 
  66.             'q', 'r', 's', 't', 'u', 
  67.             'v', 'w', 'x', 'y', 'z']; 
  68.             var result = []; 
  69.             var sourceLen = source.length; 
  70.             for(var i=0; i< len; i++) { 
  71.                 var text = this.generateUniqueText(source, result, sourceLen); 
  72.                 result.push(text) 
  73.             } 
  74.             return result.join('') 
  75.         }, 
  76.         // 生成唯一文字 
  77.         generateUniqueText: function(source, hasList, limit) { 
  78.             var text = source[Math.floor(Math.random()*limit)]; 
  79.             if(hasList.indexOf(text) > -1) { 
  80.                 return this.generateUniqueText(source, hasList, limit) 
  81.             }else { 
  82.                 return text 
  83.             }   
  84.         } 
  85.     } 
  86.     new Gcode('#canvas_code', { 
  87.         lineNum: 6 
  88.     }) 
  89. })(); 
  90. // 調(diào)用 
  91. new Gcode('#canvas_code', { 
  92.   lineNum: 6 
  93. }) 

4. 代理模式

4.1 概念解讀

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

4.2 作用

  • 遠(yuǎn)程代理(一個(gè)對象對另一個(gè)對象的局部代理)
  • 虛擬代理(對于需要?jiǎng)?chuàng)建開銷很大的對象如渲染網(wǎng)頁大圖時(shí)可以先用縮略圖代替真圖)
  • 安全代理(保護(hù)真實(shí)對象的訪問權(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ù)加載等
  • 合并請求/資源

4.4 代碼展示

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

  1. // 緩存代理 
  2. function sum(a, b){ 
  3.   return a + b 
  4. } 
  5. let proxySum = (function(){ 
  6.   let cache = {} 
  7.   return function(){ 
  8.       let args = Array.prototype.join.call(arguments, ','); 
  9.       if(args in cache){ 
  10.           return cache[args]; 
  11.       } 
  12.  
  13.       cache[args] = sum.apply(this, arguments) 
  14.       return cache[args] 
  15.   } 
  16. })() 

5. 外觀模式

5.1 概念解讀

外觀模式(facade): 為子系統(tǒng)中的一組接口提供一個(gè)一致的表現(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)之間的依賴和耦合,方便各個(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)行可用性檢測

5.4 實(shí)際案例

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

5.5 代碼展示

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

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

6. 觀察者模式 

6.1 概念解讀

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

6.2 作用

  • 目標(biāo)對象與觀察者存在一種動(dòng)態(tài)關(guān)聯(lián),增加了靈活性
  • 支持簡單的廣播通信, 自動(dòng)通知所有已經(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)一個(gè)觀察者模式:

  1. class Subject { 
  2.   constructor() { 
  3.     this.subs = {} 
  4.   } 
  5.  
  6.   addSub(key, fn) { 
  7.     const subArr = this.subs[key] 
  8.     if (!subArr) { 
  9.       this.subs[key] = [] 
  10.     } 
  11.     this.subs[key].push(fn) 
  12.   } 
  13.  
  14.   trigger(key, message) { 
  15.     const subArr = this.subs[key] 
  16.     if (!subArr || subArr.length === 0) { 
  17.       return false 
  18.     } 
  19.     for(let i = 0, len = subArr.length; i < len; i++) { 
  20.       const fn = subArr[i] 
  21.       fn(message) 
  22.     } 
  23.   } 
  24.  
  25.   unSub(key, fn) { 
  26.     const subArr = this.subs[key] 
  27.     if (!subArr) { 
  28.       return false 
  29.     } 
  30.     if (!fn) { 
  31.       this.subs[key] = [] 
  32.     } else { 
  33.       for (let i = 0, len = subArr.length; i < len; i++) { 
  34.         const _fn = subArr[i] 
  35.         if (_fn === fn) { 
  36.           subArr.splice(i, 1) 
  37.         } 
  38.       } 
  39.     } 
  40.   } 
  41. } 
  42.  
  43. // 測試 
  44. // 訂閱 
  45. let subA = new Subject() 
  46. let A = (message) => { 
  47.   console.log('訂閱者收到信息: ' + message) 
  48. } 
  49. subA.addSub('A', A) 
  50.  
  51. // 發(fā)布 
  52. subA.trigger('A', '我是徐小夕')   // A收到信息: --> 我是徐小夕 

7. 策略模式

7.1 概念解讀

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

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)一個(gè)根據(jù)不同類型實(shí)現(xiàn)求和算法的模式來帶大家理解策略模式.

  1. const obj = { 
  2.   A: (num) => num * 4, 
  3.   B: (num) => num * 6, 
  4.   C: (num) => num * 8 
  5. } 
  6.  
  7. const getSum =function(type, num) { 
  8.   return obj[type](num) 
  9. } 

8. 迭代器模式

8.1 概念解讀

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

8.2 作用

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

8.3 實(shí)際案例

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

8.4 代碼展示

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

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

本文轉(zhuǎn)載自微信公眾號「趣談前端」

 

責(zé)任編輯：姜華 來源： 趣談前端
前端設(shè)計(jì)模式javascript
相關(guān)推薦

2022-04-05 13:56:48

設(shè)計(jì)模式javascript

2020-11-09 09:10:31

javascript設(shè)

2022-06-17 08:05:28

Grafana監(jiān)控儀表盤系統(tǒng)

2021-10-19 07:27:08

HTTP代理網(wǎng)絡(luò)

2020-10-13 18:22:58

DevOps工具開發(fā)

2024-05-07 10:19:25

前端裝飾器計(jì)算

2021-01-06 05:23:15

ServiceMesh網(wǎng)絡(luò)阿帕網(wǎng)

2024-08-13 11:13:18

2020-09-11 09:35:18

前端JavaScript策略模式

2020-02-19 19:26:27

K8S開源平臺(tái)容器技術(shù)

2019-12-23 16:42:44

JavaScript前端開發(fā)

2024-02-22 07:37:37

對象JVM內(nèi)存

2024-11-07 16:09:53

2020-03-08 16:45:58

數(shù)據(jù)挖掘學(xué)習(xí)數(shù)據(jù)量

2015-03-16 16:01:40

Web前端前端工程師Web

2019-07-18 17:08:56

物聯(lián)網(wǎng)技術(shù)軟件

2024-09-23 17:05:44

2021-01-13 09:23:23

優(yōu)先隊(duì)列React二叉堆

2020-12-09 16:41:22

LinuxIT開發(fā)

2025-03-13 06:22:59

點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號