一、什么是設(shè)計(jì)模式？
設(shè)計(jì)模式是一套被反復(fù)使用、多數(shù)人知曉、經(jīng)過分類編目的、代碼設(shè)計(jì)經(jīng)驗(yàn)的總結(jié)。它是為了可重用代碼，讓代碼更容易的被他人理解并保證代碼的可靠性。
? ? ?設(shè)計(jì)模式實(shí)際上是“拿來主義”在軟件領(lǐng)域的貫徹實(shí)踐，它是一套現(xiàn)成的工具，拿來即用。下面來看一下設(shè)計(jì)模式的設(shè)計(jì)原則。
二、設(shè)計(jì)幾個(gè)原則
? ? ? 單一職責(zé)原則、開放封閉原則、里式替換原則、接口隔離原則?、依賴反轉(zhuǎn)原則?、最少知識(shí)原則。
下面我們一起來看看幾種在前端領(lǐng)域常見的設(shè)計(jì)模式：
單例模式、工廠模式、策略模式、代理模式、適配器模式、觀察者模式/發(fā)布-訂閱模式
三、常見的設(shè)計(jì)模式及實(shí)際案例
單例模式
1. 什么是單例模式？
單例模式 （Singleton Pattern）又稱為單體模式，保證一個(gè)類只有一個(gè)實(shí)例，并提供一個(gè)訪問它的全局訪問點(diǎn)。也就是說，第二次使用同一個(gè)類創(chuàng)建新對(duì)象的時(shí)候，應(yīng)該得到與第一次創(chuàng)建的對(duì)象完全相同的對(duì)象。
Vue中的單例模式
（1）Element UI
Element UI是使用Vue開發(fā)的一個(gè)前端UI框架。ElementUI 中的全屏 Loading 蒙層調(diào)用有兩種形式：
●指令形式：Vue.use(Loading.directive)
●服務(wù)形式：Vue.prototype.$loading = service
指令形式注冊(cè)的使用方式 ：
<div?:v-loading.fullscreen="true">...</div>；
服務(wù)形式注冊(cè)的使用方式 ：
this.$loading({?fullscreen:?true?});用服務(wù)方式使用全屏 Loading 是單例的，即在前一個(gè)全屏 Loading 關(guān)閉前再次調(diào)用全屏 Loading，并不會(huì)創(chuàng)建一個(gè)新的 Loading 實(shí)例，而是返回現(xiàn)有全屏 Loading 的實(shí)例。
下面是 ElementUI 實(shí)現(xiàn)全屏 Loading 的源碼：
import?Vue?from?'vue'
import?loadingVue?from?'./loading.vue'
const?LoadingConstructor?=?Vue.extend(loadingVue)
let?fullscreenLoading
const?Loading?=?(options?=?{})?=>?{
????if?(options.fullscreen?&&?fullscreenLoading)?{
????????return?fullscreenLoading
????}
????let?instance?=?new?LoadingConstructor({
????????el:?document.createElement('div'),
????????data:?options
????})
????if?(options.fullscreen)?{
????????fullscreenLoading?=?instance
????}
????return?instance
}
export?default?Loading
這里的單例是 fullscreenLoading，是存放在閉包中的，如果用戶傳的 options 的 fullscreen 為 true 且已經(jīng)創(chuàng)建了單例，則直接返回之前創(chuàng)建的單例，如果之前沒有創(chuàng)建過，則創(chuàng)建單例并賦值給閉包中的 fullscreenLoading 后返回新創(chuàng)建的單例實(shí)例。
（2）Vuex
Vuex 是一個(gè)專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式。Vuex，它們都實(shí)現(xiàn)了一個(gè)全局的 Store 用于存儲(chǔ)應(yīng)用的所有狀態(tài)。這個(gè) Store 的實(shí)現(xiàn)，正是單例模式的典型應(yīng)用。
Vuex 使用單一狀態(tài)樹，用一個(gè)對(duì)象就包含了全部的應(yīng)用層級(jí)狀態(tài)。至此它便作為一個(gè)“唯一數(shù)據(jù)源 (SSOT)”而存在。這也意味著，每個(gè)應(yīng)用將僅僅包含一個(gè) store 實(shí)例。單一狀態(tài)樹讓我們能夠直接地定位任一特定的狀態(tài)片段，在調(diào)試的過程中也能輕易地取得整個(gè)當(dāng)前應(yīng)用狀態(tài)的快照?！猇uex官方文檔
//?安裝vuex插件
Vue.use(Vuex)
//?將store注入到Vue實(shí)例中
new?Vue({
????el:?'#app',
????store
})
通過調(diào)用Vue.use()方法，安裝了 Vuex 插件。Vuex 插件是一個(gè)對(duì)象，它在內(nèi)部實(shí)現(xiàn)了一個(gè) install 方法，這個(gè)方法會(huì)在插件安裝時(shí)被調(diào)用，從而把 Store 注入到Vue實(shí)例里去。也就是說每 install 一次，都會(huì)嘗試給 Vue 實(shí)例注入一個(gè) Store。
let?Vue?//?這個(gè)Vue的作用和樓上的instance作用一樣
...
export?function?install?(_Vue)?{
??//?判斷傳入的Vue實(shí)例對(duì)象是否已經(jīng)被install過Vuex插件（是否有了唯一的state）
??if?(Vue?&&?_Vue?===?Vue)?{
????if?(process.env.NODE_ENV?!==?'production')?{
??????console.error(
????????'[vuex]?already?installed.?Vue.use(Vuex)?should?be?called?only?once.'
??????)
????}
????return
??}
??//?若沒有，則為這個(gè)Vue實(shí)例對(duì)象install一個(gè)唯一的Vuex
??Vue?=?_Vue
??//?將Vuex的初始化邏輯寫進(jìn)Vue的鉤子函數(shù)里
??applyMixin(Vue)
}
? ? ?可以保證一個(gè) Vue 實(shí)例（即一個(gè) Vue 應(yīng)用）只會(huì)被 install 一次 Vuex 插件，所以每個(gè) Vue 實(shí)例只會(huì)擁有一個(gè)全局的 Store。
工廠模式
1. 什么是工廠模式？
工廠模式就是根據(jù)不用的輸入返回不同的實(shí)例，一般用來創(chuàng)建同一類對(duì)象，它的主要思想就是將對(duì)象的創(chuàng)建與對(duì)象的實(shí)現(xiàn)分離。
在創(chuàng)建對(duì)象時(shí)，不暴露具體的邏輯，而是將邏輯封裝在函數(shù)中，那么這個(gè)函數(shù)就可以被視為一個(gè)工廠。工廠模式根據(jù)抽象程度的不同可以分為：簡(jiǎn)單工廠、工廠方法、抽象工廠。
?Vue中的工廠模式
（1）VNode
和原生的?document.createElement?類似，Vue 這種具有虛擬 DOM 樹（Virtual Dom Tree）機(jī)制的框架在生成虛擬 DOM 的時(shí)候，提供了 createElement 方法用來生成 VNode，用來作為真實(shí) DOM 節(jié)點(diǎn)的映射：
createElement('h3',?{?class:?'main-title'?},?[
????createElement('img',?{?class:?'avatar',?attrs:?{?src:?'../avatar.jpg'?}?}),
????createElement('p',?{?class:?'user-desc'?},?'hello?world')
])createElement 函數(shù)結(jié)構(gòu)大概如下：
class?Vnode?(tag,?data,?children)?{?...?}
function?createElement(tag,?data,?children)?{
??????return?new?Vnode(tag,?data,?children)
}
（2）vue-route
在Vue在路由創(chuàng)建模式中，也多次用到了工廠模式：
export?default?class?VueRouter?{
????constructor(options)?{
????????this.mode?=?mode????//?路由模式
????????
????????switch?(mode)?{???????????//?簡(jiǎn)單工廠
????????????case?'history':???????//?history?方式
????????????????this.history?=?new?HTML5History(this,?options.base)
????????????????break
????????????case?'hash':??????????//?hash?方式
????????????????this.history?=?new?HashHistory(this,?options.base,?this.fallback)
????????????????break
????????????case?'abstract':??????//?abstract?方式
????????????????this.history?=?new?AbstractHistory(this,?options.base)
????????????????break
????????????default:
????????????????//?...?初始化失敗報(bào)錯(cuò)
????????}
????}
}
mode 是路由創(chuàng)建的模式，這里有三種 History、Hash、Abstract，其中，History 是 H5 的路由方式，Hash 是路由中帶 # 的路由方式，Abstract 代表非瀏覽器環(huán)境中路由方式，比如 Node、weex 等；this.history 用來保存路由實(shí)例，vue-router 中使用了工廠模式的思想來獲得響應(yīng)路由控制類的實(shí)例。
策略模式
1. 什么是策略模式？
策略模式?（Strategy Pattern）又稱政策模式，其定義一系列的算法，把它們一個(gè)個(gè)封裝起來，并且使它們可以互相替換。封裝的策略算法一般是獨(dú)立的，策略模式根據(jù)輸入來調(diào)整采用哪個(gè)算法。關(guān)鍵是策略的實(shí)現(xiàn)和使用分離。
策略模式的實(shí)際應(yīng)用
（1）表格?formatter
Element UI 的表格控件的 Column 接受一個(gè) formatter 參數(shù)，用來格式化內(nèi)容，其類型為函數(shù)，并且還可以接受幾個(gè)特定參數(shù)，像這樣：Function(row, column, cellValue, index)。
以文件大小轉(zhuǎn)化為例，后端經(jīng)常會(huì)直接傳 bit 單位的文件大小，那么前端需要根據(jù)后端的數(shù)據(jù)，根據(jù)需求轉(zhuǎn)化為自己需要的單位的文件大小，比如 KB/MB。
首先實(shí)現(xiàn)文件計(jì)算的算法：
export?const?StrategyMap?=?{
????//?Strategy?1:?將文件大?。╞it）轉(zhuǎn)化為?KB?
????bitToKB:?val?=>?{
????????const?num?=?Number(val)
????????return?isNaN(num)???val?:?(num?/?1024).toFixed(0)?+?'KB'
????},
????//?Strategy?2:?將文件大?。╞it）轉(zhuǎn)化為?MB?
????bitToMB:?val?=>?{
????????const?num?=?Number(val)
????????return?isNaN(num)???val?:?(num?/?1024?/?1024).toFixed(1)?+?'MB'
????}
}
//?Context:?生成el表單?formatter?
const?strategyContext?=?function(type,?rowKey){?
??return?function(row,?column,?cellValue,?index){
??????StrategyMap[type](row[rowKey])
??}
}
export?default?strategyContext
在組件中直接使用：
<template>
????<el-table?:data="tableData">
????????<el-table-column?prop="date"?label="日期"></el-table-column>
????????<el-table-column?prop="name"?label="文件名"></el-table-column>
????????<!--?直接調(diào)用?strategyContext?-->
????????<el-table-column?prop="sizeKb"?label="文件大小(KB)"
?????????????????????????:formatter='strategyContext("bitToKB",?"sizeKb")'>
????????</el-table-column>
????????<el-table-column?prop="sizeMb"?label="附件大小(MB)"
?????????????????????????:formatter='strategyContext("bitToMB",?"sizeMb")'>
????????</el-table-column>
????</el-table>
</template>
<script?type='text/javascript'>
????import?strategyContext?from?'./strategyContext.js'
????
????export?default?{
????????name:?'ElTableDemo',
????????data()?{
????????????return?{
????????????????strategyContext,
????????????????tableData:?[
????????????????????{?date:?'2019-05-02',?name:?'文件1',?sizeKb:?1234,?sizeMb:?1234426?},
????????????????????{?date:?'2019-05-04',?name:?'文件2',?sizeKb:?4213,?sizeMb:?8636152?}]
????????????}
????????}
????}
</script>
<style?scoped></style>
運(yùn)行結(jié)果如下圖
（2）表單驗(yàn)證
除了表格中的 formatter 之外，策略模式也經(jīng)常用在表單驗(yàn)證的場(chǎng)景。Element UI 的 Form 表單 具有表單驗(yàn)證功能，用來校驗(yàn)用戶輸入的表單內(nèi)容。實(shí)際需求中表單驗(yàn)證項(xiàng)一般會(huì)比較復(fù)雜，所以需要給每個(gè)表單項(xiàng)增加 validator 自定義校驗(yàn)方法。
實(shí)現(xiàn)通用的表單驗(yàn)證方法：
//?src/utils/validates.js
//?姓名校驗(yàn)?由2-10位漢字組成?
export?function?validateUsername(str)?{
????const?reg?=?/^[\u4e00-\u9fa5]{2,10}$/
????return?reg.test(str)
}
//?手機(jī)號(hào)校驗(yàn)?由以1開頭的11位數(shù)字組成??
export?function?validateMobile(str)?{
????const?reg?=?/^1\d{10}$/
????return?reg.test(str)
}
//?郵箱校驗(yàn)?
export?function?validateEmail(str)?{
????const?reg?=?/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
????return?reg.test(str)
}
增加一個(gè)柯里化方法，用來生成表單驗(yàn)證函數(shù)：
//?src/utils/index.js
import?*?as?Validates?from?'./validates.js'
//?生成表格自定義校驗(yàn)函數(shù)?
export?const?formValidateGene?=?(key,?msg)?=>?(rule,?value,?cb)?=>?{
????if?(Validates[key](value))?{
????????cb()
????}?else?{
????????cb(new?Error(msg))
????}
}
具體使用：
<template>
????<el-form?ref="ruleForm"
?????????????label-width="100px"
?????????????class="demo-ruleForm"
?????????????:rules="rules"
?????????????:model="ruleForm">
????????
????????<el-form-item?label="用戶名"?prop="username">
????????????<el-input?v-model="ruleForm.username"></el-input>
????????</el-form-item>
????????
????????<el-form-item?label="手機(jī)號(hào)"?prop="mobile">
????????????<el-input?v-model="ruleForm.mobile"></el-input>
????????</el-form-item>
????????
????????<el-form-item?label="郵箱"?prop="email">
????????????<el-input?v-model="ruleForm.email"></el-input>
????????</el-form-item>
????</el-form>
</template>
<script?type='text/javascript'>
????import?*?as?Utils?from?'../utils'
????
????export?default?{
????????name:?'ElTableDemo',
????????data()?{
????????????return?{
????????????????ruleForm:?{?pass:?'',?checkPass:?'',?age:?''?},
????????????????rules:?{
????????????????????username:?[{
????????????????????????validator:?Utils.formValidateGene('validateUsername',?'姓名由2-10位漢字組成'),
????????????????????????trigger:?'blur'
????????????????????}],
????????????????????mobile:?[{
????????????????????????validator:?Utils.formValidateGene('validateMobile',?'手機(jī)號(hào)由以1開頭的11位數(shù)字組成'),
????????????????????????trigger:?'blur'
????????????????????}],
????????????????????email:?[{
????????????????????????validator:?Utils.formValidateGene('validateEmail',?'不是正確的郵箱格式'),
????????????????????????trigger:?'blur'
????????????????????}]
????????????????}
????????????}
????????}
????}
</script>
效果如圖：
代理模式
1. 什么是代理模式？
代理模式?（Proxy Pattern）又稱委托模式，它為目標(biāo)對(duì)象創(chuàng)造了一個(gè)代理對(duì)象，以控制對(duì)目標(biāo)對(duì)象的訪問。
代理模式把代理對(duì)象插入到訪問者和目標(biāo)對(duì)象之間，從而為訪問者對(duì)目標(biāo)對(duì)象的訪問引入一定的間接性。正是這種間接性，給了代理對(duì)象很多操作空間，比如在調(diào)用目標(biāo)對(duì)象前和調(diào)用后進(jìn)行一些預(yù)操作和后操作，從而實(shí)現(xiàn)新的功能或者擴(kuò)展目標(biāo)的功能。
代理模式在實(shí)戰(zhàn)中的應(yīng)用
（1）攔截器
在項(xiàng)目中經(jīng)常使用 Axios 的實(shí)例來進(jìn)行 HTTP 的請(qǐng)求，使用攔截器 interceptor 可以提前對(duì) request 請(qǐng)求和 response 返回進(jìn)行一些預(yù)處理，比如：
1、request 請(qǐng)求頭的設(shè)置，和 Cookie 信息的設(shè)置；
2、權(quán)限信息的預(yù)處理，常見的比如驗(yàn)權(quán)操作或者 Token 驗(yàn)證；
3、數(shù)據(jù)格式的格式化，比如對(duì)組件綁定的 Date 類型的數(shù)據(jù)在請(qǐng)求前進(jìn)行一些格式約定好的序列化操作；
4、空字段的格式預(yù)處理，根據(jù)后端進(jìn)行一些過濾操作；
5、response 的一些通用報(bào)錯(cuò)處理，比如使用 Message 控件拋出錯(cuò)誤；
除了 HTTP 相關(guān)的攔截器之外，還有路由跳轉(zhuǎn)的攔截器，可以進(jìn)行一些路由跳轉(zhuǎn)的預(yù)處理等操作。
（2）前端框架的數(shù)據(jù)響應(yīng)式化
Vue 2.x 中通過 Object.defineProperty 來劫持各個(gè)屬性的?setter/getter，在數(shù)據(jù)變動(dòng)時(shí)，通過發(fā)布-訂閱模式發(fā)布消息給訂閱者，觸發(fā)相應(yīng)的監(jiān)聽回調(diào)，從而實(shí)現(xiàn)數(shù)據(jù)的響應(yīng)式化，也就是數(shù)據(jù)到視圖的雙向綁定。
為什么 Vue 2.x 到 3.x 要從?Object.defineProperty?改用 Proxy 呢，是因?yàn)榍罢叩囊恍┚窒扌?，?dǎo)致的以下缺陷：
1、無法監(jiān)聽利用索引直接設(shè)置數(shù)組的一個(gè)項(xiàng)，例如：vm.items[indexOfItem] = newValue；
2、無法監(jiān)聽數(shù)組的長度的修改，例如：vm.items.length = newLength；
3、無法監(jiān)聽 ES6 的 Set、WeakSet、Map、WeakMap 的變化；
4、無法監(jiān)聽 Class 類型的數(shù)據(jù)；
5、無法監(jiān)聽對(duì)象屬性的新加或者刪除；
適配器模式
1. 什么是適配器模式？
適配器模式（Adapter Pattern）又稱包裝器模式，將一個(gè)類（對(duì)象）的接口（方法、屬性）轉(zhuǎn)化為用戶需要的另一個(gè)接口，解決類（對(duì)象）之間接口不兼容的問題。
主要功能是進(jìn)行轉(zhuǎn)換匹配，目的是復(fù)用已有的功能，而不是來實(shí)現(xiàn)新的接口。也就是說，訪問者需要的功能應(yīng)該是已經(jīng)實(shí)現(xiàn)好了的，不需要適配器模式來實(shí)現(xiàn)，適配器模式主要是負(fù)責(zé)把不兼容的接口轉(zhuǎn)換成訪問者期望的格式而已。
適配器的實(shí)際案例
（1）Vue 計(jì)算屬性
Vue 中的計(jì)算屬性也是一個(gè)適配器模式的實(shí)例，以官網(wǎng)的例子為例：
<template>
????<div?id="example">
????????<p>Original?message:?"{{?message?}}"</p>??<!--?Hello?-->
????????<p>Computed?reversed?message:?"{{?reversedMessage?}}"</p>??<!--?olleH?-->
????</div>
</template>
<script?type='text/javascript'>
????export?default?{
????????name:?'demo',
????????data()?{
????????????return?{
????????????????message:?'Hello'
????????????}
????????},
????????computed:?{
????????????reversedMessage:?function()?{
????????????????return?this.message.split('').reverse().join('')
????????????}
????????}
????}
</script>對(duì)原有數(shù)據(jù)并沒有改變，只改變了原有數(shù)據(jù)的表現(xiàn)形式。
（2）?源碼中的適配器模式
Axios 的用來發(fā)送請(qǐng)求的 adapter 本質(zhì)上是封裝瀏覽器提供的 API XMLHttpRequest。
module.exports?=?function?xhrAdapter(config)?{
????return?new?Promise(function?dispatchXhrRequest(resolve,?reject)?{
????????var?requestData?=?config.data
????????var?requestHeaders?=?config.headers
????????
????????var?request?=?new?XMLHttpRequest()
????????
????????//?初始化一個(gè)請(qǐng)求
????????request.open(config.method.toUpperCase(),
??????????buildURL(config.url,?config.params,?config.paramsSerializer),?true)
????????
????????//?設(shè)置最大超時(shí)時(shí)間
????????request.timeout?=?config.timeout
????????
????????//?readyState?屬性發(fā)生變化時(shí)的回調(diào)
????????request.onreadystatechange?=?function?handleLoad()?{?...?}
????????
????????//?瀏覽器請(qǐng)求退出時(shí)的回調(diào)
????????request.onabort?=?function?handleAbort()?{?...?}
????????
????????//?當(dāng)請(qǐng)求報(bào)錯(cuò)時(shí)的回調(diào)
????????request.onerror?=?function?handleError()?{?...?}
????????
????????//?當(dāng)請(qǐng)求超時(shí)調(diào)用的回調(diào)
????????request.ontimeout?=?function?handleTimeout()?{?...?}
????????
????????//?設(shè)置HTTP請(qǐng)求頭的值
????????if?('setRequestHeader'?in?request)?{
????????????request.setRequestHeader(key,?val)
????????}
????????
????????//?跨域的請(qǐng)求是否應(yīng)該使用證書
????????if?(config.withCredentials)?{
????????????request.withCredentials?=?true
????????}
????????
????????//?響應(yīng)類型
????????if?(config.responseType)?{
????????????request.responseType?=?config.responseType
????????}
????????
????????//?發(fā)送請(qǐng)求
????????request.send(requestData)
????})
}
這個(gè)模塊主要是對(duì)請(qǐng)求頭、請(qǐng)求配置和一些回調(diào)的設(shè)置，并沒有對(duì)原生的 API 有改動(dòng)，所以也可以在其他地方正常使用。這個(gè)適配器可以看作是對(duì) XMLHttpRequest 的適配，是用戶對(duì) Axios 調(diào)用層到原生 XMLHttpRequest 這個(gè) API 之間的適配層。
觀察者模式/發(fā)布-訂閱模式
1. 什么是觀察者模式？
觀察者模式（Observer Pattern）定義了一種一對(duì)多的關(guān)系，讓多個(gè)訂閱者對(duì)象同時(shí)監(jiān)聽某一個(gè)發(fā)布者，或者叫主題對(duì)象，這個(gè)主題對(duì)象的狀態(tài)發(fā)生變化時(shí)就會(huì)通知所有訂閱自己的訂閱者對(duì)象，使得它們能夠自動(dòng)更新自己。
2. 什么是發(fā)布-訂閱模式？
其實(shí)它是發(fā)布訂閱模式的一個(gè)別名，但兩者又有所不同。這個(gè)別名非常形象地詮釋了觀察者模式里兩個(gè)核心的角色要素——發(fā)布者和訂閱者。
發(fā)布-訂閱模式有一個(gè)調(diào)度中心
觀察者模式是由具體目標(biāo)調(diào)度的，而發(fā)布-訂閱模式是統(tǒng)一由調(diào)度中心調(diào)的
Vue中的發(fā)布-訂閱模式
（1）EventBus
在Vue中有一套事件機(jī)制，其中一個(gè)用法是 EventBus?？梢允褂?EventBus 來解決組件間的數(shù)據(jù)通信問題。
1.創(chuàng)建事件中心管理組件之間的通信
//?event-bus.js
import?Vue?from?'vue'
export?const?EventBus?=?new?Vue()2.發(fā)送事件
<template>
??<div>
????<first-com></first-com>
????<second-com></second-com>
??</div>
</template>
<script>
import?firstCom?from?'./firstCom.vue'
import?secondCom?from?'./secondCom.vue'
export?default?{
??components:?{?firstCom,?secondCom?}
}
</script>
firstCom組件中發(fā)送事件：
<template>
??<div>
????<button?@click="add">加法</button>????
??</div>
</template>
<script>
import?{EventBus}?from?'./event-bus.js'?//?引入事件中心
export?default?{
??data(){
????return{
??????num:0
????}
??},
??methods:{
????add(){
??????EventBus.$emit('addition',?{
????????num:this.num++
??????})
????}
??}
}
</script>3.接收事件
在secondCom組件中發(fā)送事件：
<template>
??<div>求和:?{{count}}</div>
</template>
<script>
import?{?EventBus?}?from?'./event-bus.js'
export?default?{
??data()?{
????return?{
??????count:?0
????}
??},
??mounted()?{
????EventBus.$on('addition',?param?=>?{
??????this.count?=?this.count?+?param.num;
????})
??}
}
</script>
（2）Vue源碼
發(fā)布-訂閱模式在源碼中應(yīng)用很多，比如雙向綁定機(jī)制的場(chǎng)景
響應(yīng)式化大致就是使用 Object.defineProperty 把數(shù)據(jù)轉(zhuǎn)為 getter/setter，并為每個(gè)數(shù)據(jù)添加一個(gè)訂閱者列表的過程。這個(gè)列表是 getter 閉包中的屬性，將會(huì)記錄所有依賴這個(gè)數(shù)據(jù)的組件。也就是說，響應(yīng)式化后的數(shù)據(jù)相當(dāng)于發(fā)布者。
每個(gè)組件都對(duì)應(yīng)一個(gè) Watcher 訂閱者。當(dāng)每個(gè)組件的渲染函數(shù)被執(zhí)行時(shí)，都會(huì)將本組件的 Watcher 放到自己所依賴的響應(yīng)式數(shù)據(jù)的訂閱者列表里，這就相當(dāng)于完成了訂閱，一般這個(gè)過程被稱為依賴收集（Dependency Collect）。
組件渲染函數(shù)執(zhí)行的結(jié)果是生成虛擬 DOM 樹（Virtual DOM Tree），這個(gè)樹生成后將被映射為瀏覽器上的真實(shí)的 DOM樹，也就是用戶所看到的頁面視圖。
當(dāng)響應(yīng)式數(shù)據(jù)發(fā)生變化的時(shí)候，也就是觸發(fā)了 setter 時(shí)，setter 會(huì)負(fù)責(zé)通知（Notify）該數(shù)據(jù)的訂閱者列表里的 Watcher，Watcher 會(huì)觸發(fā)組件重渲染（Trigger re-render）來更新（update）視圖。文章來源：http://www.zghlxwxcb.cn/news/detail-471502.html
Vue 的源碼：文章來源地址http://www.zghlxwxcb.cn/news/detail-471502.html
//?src/core/observer/index.js?響應(yīng)式化過程
Object.defineProperty(obj,?key,?{
????enumerable:?true,
????configurable:?true,
????get:?function?reactiveGetter()?{
????????//?...
????????const?value?=?getter???getter.call(obj)?:?val?//?如果原本對(duì)象擁有g(shù)etter方法則執(zhí)行
????????dep.depend()?????????????????????//?進(jìn)行依賴收集，dep.addSub
????????return?value
????},
????set:?function?reactiveSetter(newVal)?{
????????//?...
????????if?(setter)?{?setter.call(obj,?newVal)?}????//?如果原本對(duì)象擁有setter方法則執(zhí)行
????????dep.notify()???????????????//?如果發(fā)生變更，則通知更新
????}
})
到了這里，關(guān)于Vue 設(shè)計(jì)模式的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
