15分鐘帶你瞭解前端工程師必知的javascript設計模式(附詳細思惟導圖和源碼)
前言
設計模式是一個程序員進階高級的必備技巧,也是評判一個工程師工做經驗和能力的試金石.設計模式是程序員多年工做經驗的凝練和總結,能更大限度的優化代碼以及對已有代碼的合理重構.做爲一名合格的前端工程師,學習設計模式是對本身工做經驗的另外一種方式的總結和反思,也是開發高質量,高可維護性,可擴展性代碼的重要手段.javascript
咱們所熟知的金典的幾大框架,好比jquery, react, vue內部也大量應用了設計模式, 好比觀察者模式, 代理模式, 單例模式等.因此做爲一個架構師,設計模式是必須掌握的.css
在中高級前端工程師的面試的過程當中,面試官也會適當考察求職者對設計模式的瞭解,因此筆者結合多年的工做經驗和學習探索, 總結並畫出了針對javascript設計模式的思惟導圖和實際案例,接下來就來讓咱們一塊兒來探索習吧.前端
你將收穫
- 單例模式
- 構造器模式
- 建造者模式
- 代理模式
- 外觀模式
- 觀察者模式
- 策略模式
- 迭代器模式
正文
咱們先來看看總覽.設計模式到底能夠給咱們帶來什麼呢?vue
1. 單例模式
1.1 概念解讀
單例模式: 保證一個類只有一個實例, 通常先判斷實例是否存在,若是存在直接返回, 不存在則先建立再返回,這樣就能夠保證一個類只有一個實例對象.java
1.2 做用
- 模塊間通訊
- 保證某個類的對象的惟一性
- 防止變量污染
1.3 注意事項
- 正確使用this
- 閉包容易形成內存泄漏,因此要及時清除不須要的變量
- 建立一個新對象的成本較高
1.4 實際案例
單例模式普遍應用於不一樣程序語言中, 在實際軟件應用中應用比較多的好比電腦的任務管理器,回收站, 網站的計數器, 多線程的線程池的設計等.node
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. 構造器模式
概念解讀
構造器模式: 用於建立特定類型的對象,以便實現業務邏輯和功能的可複用.react
做用
- 建立特定類型的對象
- 邏輯和業務的封裝
注意事項
- 注意劃分好業務邏輯的邊界
- 配合單例實現初始化等工做
- 構造函數命名規範,第一個字母大寫
- new對象的成本,把公用方法放到原型鏈上
實際案例
構造器模式我以爲是代碼的格局,也是用來考驗程序員對業務代碼的理解程度.它每每用於實現javascript的工具庫,好比lodash等以及javascript框架.jquery
代碼展現
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. 建造者模式
概念解讀
建造者模式: 將一個複雜的邏輯或者功能經過有條理的分工來一步步實現.webpack
做用
- 分佈建立一個複雜的對象或者實現一個複雜的功能
- 解耦封裝過程, 無需關注具體建立的細節
注意事項
- 須要有可靠算法和邏輯的支持
- 按需暴露必定的接口
實際案例
建造者模式其實在不少領域也有應用,筆者以前也寫過不少js插件,大部分都採用了建造者模式, 能夠在筆者github地址徐小夕的github學習參考. 其餘案例以下:css3
- jquery的ajax的封裝
- jquery插件封裝
- react/vue某一具體組件的設計
代碼展現
筆者就拿以前使用建造者模式實現的一個案例: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. 代理模式
概念解讀
代理模式: 一個對象經過某種代理方式來控制對另外一個對象的訪問.
做用
- 遠程代理(一個對象對另外一個對象的局部代理)
- 虛擬代理(對於須要建立開銷很大的對象如渲染網頁大圖時能夠先用縮略圖代替真圖)
- 安全代理(保護真實對象的訪問權限)
- 緩存代理(一些開銷比較大的運算提供暫時的存儲，下次運算時，若是傳遞進來的參數跟以前相同，則能夠直接返回前面存儲的運算結果)
注意事項
使用代理會增長代碼的複雜度,因此應該有選擇的使用代理.
實際案例
咱們可使用代理模式實現以下功能:
- 經過緩存代理來優化計算性能
- 圖片佔位符/骨架屏/預加載等
- 合併請求/資源
代碼展現
接下來咱們經過實現一個計算緩存器來講說代理模式的應用.
// 緩存代理
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. 外觀模式
概念解讀
外觀模式(facade): 爲子系統中的一組接口提供一個一致的表現,使得子系統更容易使用而不須要關注內部複雜而繁瑣的細節.好比下圖就是一個很好形象的說明外觀模式的設計思路:
做用
- 對接口和調用者進行了必定的解耦
- 創造經典的三層結構MVC
- 在開發階段減小不一樣子系統之間的依賴和耦合,方便各個子系統的迭代和擴展
- 爲大型複雜系統提供一個清晰的接口
注意事項
當外觀模式被開發者連續調用時會形成必定的性能損耗,這是因爲每次調用都會進行可用性檢測
實際案例
咱們可使用外觀模式來設計兼容不一樣瀏覽器的事件綁定的方法以及其餘須要統一實現接口的方法或者抽象類.
代碼展現
接下來咱們經過實現一個兼容不一樣瀏覽器的事件監聽函數來讓你們理解外觀模式如何使用.
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. 觀察者模式
概念解讀
觀察者模式: 定義了一種一對多的關係, 全部觀察對象同時監聽某一主題對象,當主題對象狀態發生變化時就會通知全部觀察者對象,使得他們可以自動更新本身.
做用
- 目標對象與觀察者存在一種動態關聯,增長了靈活性
- 支持簡單的廣播通訊, 自動通知全部已經訂閱過的對象
- 目標對象和觀察者之間的抽象耦合關係可以單獨擴展和重用
注意事項
觀察者模式通常都要注意要先監聽, 再觸發(特殊狀況也能夠先發布,後訂閱,好比QQ的離線模式)
實際案例
觀察者模式是很是經典的設計模式,主要應用以下:
- 系統消息通知
- 網站日誌記錄
- 內容訂閱功能
- javascript事件機制
- react/vue等的觀察者
代碼展現
接下來咱們咱們使用原生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. 策略模式
概念解讀
策略模式: 策略模式將不一樣算法進行合理的分類和單獨封裝，讓不一樣算法之間能夠互相替換而不會影響到算法的使用者.
做用
- 實現不一樣, 做用一致
- 調用方式相同,下降了使用成本以及不一樣算法之間的耦合
- 單獨定義算法模型, 方便單元測試
- 避免大量冗餘的代碼判斷,好比if else等
實際案例
- 實現更優雅的表單驗證
- 遊戲裏的角色計分器
- 棋牌類遊戲的輸贏算法
代碼展現
接下來咱們實現一個根據不一樣類型實現求和算法的模式來帶你們理解策略模式.
const obj = {
A: (num) => num * 4,
B: (num) => num * 6,
C: (num) => num * 8
}
const getSum =function(type, num) {
return obj[type](num)
}
複製代碼
8. 迭代器模式
概念解讀
迭代器模式: 提供一種方法順序訪問一個聚合對象中的各個元素,使用者並不須要關心該方法的內部表示.
做用
- 爲遍歷不一樣集合提供統一接口
- 保護原集合但又提供外部訪問內部元素的方式
實際案例
迭代器模式模式最多見的案例就是數組的遍歷方法如forEach, map, reduce.
代碼展現
接下來筆者使用本身封裝的一個遍歷函數來讓你們更加理解迭代器模式的使用,該方法不只能夠遍歷數組和字符串,還能遍歷對象.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)
}
}
}
複製代碼
最後
若是想了解本文完整的思惟導圖, 更多H5遊戲, webpack，node，gulp，css3，javascript，nodeJS，canvas數據可視化等前端知識和實戰，歡迎在公號《趣談前端》加入咱們一塊兒學習討論，共同探索前端的邊界。
更多推薦
- 2019年,盤點一些我出過的前端面試題以及對求職者的建議
- 基於jsoneditor二次封裝一個可實時預覽的json編輯器組件(react版)
- 《前端實戰總結》之使用純css實現網站換膚和焦點圖切換動畫
- 《前端實戰總結》之使用CSS3實現酷炫的3D旋轉透視
- 《前端實戰總結》之使用pace.js爲你的網站添加加載進度條
- 《前端實戰總結》之設計模式的應用——備忘錄模式
- 《前端實戰總結》之使用postMessage實現可插拔的跨域聊天機器人
- 《前端實戰總結》之變量提高，函數聲明提高及變量做用域詳解
- 《前端實戰總結》如何在不刷新頁面的狀況下改變URL
- 一張圖教你快速玩轉vue-cli3
- vue高級進階系列——用typescript玩轉vue和vuex
- 基於nodeJS從0到1實現一個CMS全棧項目（上）
- 基於nodeJS從0到1實現一個CMS全棧項目（中）
- 基於nodeJS從0到1實現一個CMS全棧項目（下）
- 5分鐘教你用nodeJS手寫一個mock數據服務器
- 用css3實現驚豔面試官的背景即背景動畫（高級附源碼）
- 教你用200行代碼寫一個愛豆拼拼樂H5小遊戲（附源碼）
- 笛卡爾乘積的javascript版實現和應用
- 1. 30分鐘帶你瞭解Web工程師必知的Docker知識
- 2. 一文帶你學C/C++，詳細知識點思惟導圖！
- 3. C/C++工程師必備知識的思惟導圖
- 4. 前端工程師必備的前端思惟
- 5. 設計模式思惟導圖整理
- 6. 設計模式：思惟導圖
- 7. 設計模式思惟導圖
- 8. 5分鐘帶你瞭解微前端
- 9. 最新軟件設計師知識點分析（思惟導圖）
- 10. 前端工程師必須掌握的設計模式
- 更多相關文章...
- • ARP協議的工作機制詳解 - TCP/IP教程
- • Java操作Neo4j數據庫（附帶源碼） - NoSQL教程
- • Git五分鐘教程
- • 爲了進字節跳動，我精選了29道Java經典算法題，帶詳細講解
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 30分鐘帶你瞭解Web工程師必知的Docker知識
- 2. 一文帶你學C/C++，詳細知識點思惟導圖！
- 3. C/C++工程師必備知識的思惟導圖
- 4. 前端工程師必備的前端思惟
- 5. 設計模式思惟導圖整理
- 6. 設計模式：思惟導圖
- 7. 設計模式思惟導圖
- 8. 5分鐘帶你瞭解微前端
- 9. 最新軟件設計師知識點分析（思惟導圖）
- 10. 前端工程師必須掌握的設計模式