15分鐘帶你瞭解前端工程師必知的javascript設計模式(附詳細思維導圖和原始碼)
前言
設計模式是一個程式設計師進階高階的必備技巧,也是評判一個工程師工作經驗和能力的試金石.設計模式是程式設計師多年工作經驗的凝練和總結,能更大限度的優化程式碼以及對已有程式碼的合理重構.作為一名合格的前端工程師,學習設計模式是對自己工作經驗的另一種方式的總結和反思,也是開發高質量,高可維護性,可擴充套件性程式碼的重要手段.
我們所熟知的金典的幾大框架,比如jquery, react, vue內部也大量應用了設計模式, 比如觀察者模式, 代理模式, 單例模式等.所以作為一個架構師,設計模式是必須掌握的.
在中高階前端工程師的面試的過程中,面試官也會適當考察求職者對設計模式的瞭解,所以筆者結合多年的工作經驗和學習探索, 總結並畫出了針對javascript設計模式的思維導圖和實際案例,接下來就來讓我們一起來探索習吧.
你將收穫
- 單例模式
- 構造器模式
- 建造者模式
- 代理模式
- 外觀模式
- 觀察者模式
- 策略模式
- 迭代器模式
正文
我們先來看看總覽.設計模式到底可以給我們帶來什麼呢?
以上筆者主要總結了幾點使用設計模式能給工程帶來的好處, 如程式碼可解耦, 可擴充套件性,可靠性, 條理性, 可複用性. 接下來來看看我們javascript的第一個設計模式.
1. 單例模式
1.1 概念解讀
單例模式: 保證一個類只有一個例項, 一般先判斷例項是否存在,如果存在直接返回, 不存在則先建立再返回,這樣就可以保證一個類只有一個例項物件.
1.2 作用
- 模組間通訊
- 保證某個類的物件的唯一性
- 防止變數汙染
1.3 注意事項
- 正確使用this
- 閉包容易造成記憶體洩漏,所以要及時清除不需要的變數
- 建立一個新物件的成本較高
1.4 實際案例
單例模式廣泛應用於不同程式語言中, 在實際軟體應用中應用比較多的比如電腦的工作管理員,回收站, 網站的計數器, 多執行緒的執行緒池的設計等.
1.5 程式碼實現
(function(){ // 養魚遊戲 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. 構造器模式
2.1 概念解讀
構造器模式: 用於建立特定型別的物件,以便實現業務邏輯和功能的可複用.
2.2 作用
- 建立特定型別的物件
- 邏輯和業務的封裝
2.3 注意事項
- 注意劃分好業務邏輯的邊界
- 配合單例實現初始化等工作
- 建構函式命名規範,第一個字母大寫
- new物件的成本,把公用方法放到原型鏈上
2.4 實際案例
構造器模式我覺得是程式碼的格局,也是用來考驗程式設計師對業務程式碼的理解程度.它往往用於實現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)
}
// 判斷是否是陣列
this.isArray = function(arr) {
return Array.isArray(arr)
}
// 其他通用方法...
}
3. 建造者模式
3.1 概念解讀
建造者模式: 將一個複雜的邏輯或者功能通過有條理的分工來一步步實現.
3.2 作用
- 分佈建立一個複雜的物件或者實現一個複雜的功能
- 解耦封裝過程, 無需關注具體建立的細節
3.3 注意事項
- 需要有可靠演算法和邏輯的支援
- 按需暴露一定的介面
3.4 實際案例
建造者模式其實在很多領域也有應用,筆者之前也寫過很多js外掛,大部分都採用了建造者模式, 可以在筆者github地址徐小夕的github學習參考. 其他案例如下:
- jquery的ajax的封裝
- jquery外掛封裝
- react/vue某一具體元件的設計
3.5 程式碼展示
筆者就拿之前使用建造者模式實現的一個案例:Canvas入門實戰之用javascript面向物件實現一個圖形驗證碼, 那讓我們使用建造者模式實現一個非常常見的驗證碼外掛吧!
// canvas繪製圖形驗證碼
(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'),
// 設定畫布寬高
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);
}
},
// 生成指定個數的隨機文字
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
})
})();
// 呼叫
new Gcode('#canvas_code', {
lineNum: 6
})
4. 代理模式
4.1 概念解讀
代理模式: 一個物件通過某種代理方式來控制對另一個物件的訪問.
4.2 作用
- 遠端代理(一個物件對另一個物件的區域性代理)
- 虛擬代理(對於需要建立開銷很大的物件如渲染網頁大圖時可以先用縮圖代替真圖)
- 安全代理(保護真實物件的訪問許可權)
- 快取代理(一些開銷比較大的運算提供暫時的儲存，下次運算時，如果傳遞進來的引數跟之前相同，則可以直接返回前面儲存的運算結果)
4.3 注意事項
使用代理會增加程式碼的複雜度,所以應該有選擇的使用代理.
實際案例
我們可以使用代理模式實現如下功能:
- 通過快取代理來優化計算效能
- 圖片佔位符/骨架屏/預載入等
- 合併請求/資源
4.4 程式碼展示
接下來我們通過實現一個計算快取器來說說代理模式的應用.
// 快取代理
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): 為子系統中的一組介面提供一個一致的表現,使得子系統更容易使用而不需要關注內部複雜而繁瑣的細節.
5.2 作用
- 對介面和呼叫者進行了一定的解耦
- 創造經典的三層結構MVC
- 在開發階段減少不同子系統之間的依賴和耦合,方便各個子系統的迭代和擴充套件
- 為大型複雜系統提供一個清晰的介面
5.3 注意事項
當外觀模式被開發者連續呼叫時會造成一定的效能損耗,這是由於每次呼叫都會進行可用性檢測
5.4 實際案例
我們可以使用外觀模式來設計相容不同瀏覽器的事件繫結的方法以及其他需要統一實現介面的方法或者抽象類.
5.5 程式碼展示
接下來我們通過實現一個相容不同瀏覽器的事件監聽函式來讓大家理解外觀模式如何使用.
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 概念解讀
觀察者模式: 定義了一種一對多的關係, 所有觀察物件同時監聽某一主題物件,當主題物件狀態發生變化時就會通知所有觀察者物件,使得他們能夠自動更新自己.
6.2 作用
- 目標物件與觀察者存在一種動態關聯,增加了靈活性
- 支援簡單的廣播通訊, 自動通知所有已經訂閱過的物件
- 目標物件和觀察者之間的抽象耦合關係能夠單獨擴充套件和重用
6.3 注意事項
觀察者模式一般都要注意要先監聽, 再觸發(特殊情況也可以先發布,後訂閱,比如QQ的離線模式)
6.4 實際案例
觀察者模式是非常經典的設計模式,主要應用如下:
- 系統訊息通知
- 網站日誌記錄
- 內容訂閱功能
- javascript事件機制
- react/vue等的觀察者
6.5 程式碼展示
接下來我們我們使用原生javascript實現一個觀察者模式:
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)
// 釋出
subA.trigger('A', '我是徐小夕') // A收到資訊: --> 我是徐小夕
7. 策略模式
7.1 概念解讀
策略模式: 策略模式將不同演算法進行合理的分類和單獨封裝，讓不同演算法之間可以互相替換而不會影響到演算法的使用者.
7.2 作用
- 實現不同, 作用一致
- 呼叫方式相同,降低了使用成本以及不同演算法之間的耦合
- 單獨定義演算法模型, 方便單元測試
- 避免大量冗餘的程式碼判斷,比如if else等
7.3 實際案例
- 實現更優雅的表單驗證
- 遊戲裡的角色計分器
- 棋牌類遊戲的輸贏演算法
7.4 程式碼展示
接下來我們實現一個根據不同型別實現求和演算法的模式來帶大家理解策略模式.
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 概念解讀
迭代器模式: 提供一種方法順序訪問一個聚合物件中的各個元素,使用者並不需要關心該方法的內部表示.
8.2 作用
- 為遍歷不同集合提供統一介面
- 保護原集合但又提供外部訪問內部元素的方式
8.3 實際案例
迭代器模式模式最常見的案例就是陣列的遍歷方法如forEach, map, reduce.
8.4 程式碼展示
接下來筆者使用自己封裝的一個遍歷函式來讓大家更加理解迭代器模式的使用,該方法不僅可以遍歷陣列和字串,還能遍歷物件.lodash裡的_.forEach(collection, [iteratee=_.identity])方法也是採用策略模式的典型應用.
function _each(el, fn = (v, k, el) => {}) {
// 判斷資料型別
function checkType(target){
return Object.prototype.toString.call(target).slice(8,-1)
}
// 陣列或者字串
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設計模式(附詳細思維導圖和原始碼)： https://mp.weixin.qq.com/s/S35f6nV-LxRv-DXG5l7tXQ