復(fù)盤前端工程師必知的Javascript設(shè)計(jì)模式
前言
設(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í)吧。
你將收獲
- 單例模式
- 構(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í)例對(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的工具庫,比如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 概念解讀
建造者模式：將一個(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)行可用性檢測。
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),增加了靈活性。
- 支持簡單的廣播通信, 自動(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)
}
}
}
}
}
// 測試
// 訂閱
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ú)定義算法模型, 方便單元測試。
- 避免大量冗余的代碼判斷,比如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)
}
}
}
