這篇文章主要記錄學(xué)習(xí) JS 雙向綁定過程中的一些概念與具體的實現(xiàn)
MVVM 具體概念
MVVM 中有一些概念是通用的，具體如下
Directive （指令）
自定義的執(zhí)行函數(shù)，例如 Vue 中的 v-click、v-bind 等。這些函數(shù)封裝了 DOM 的一些基本可復(fù)用函數(shù)API。
Filter （過濾器）
用戶希望對傳入的初始數(shù)據(jù)進(jìn)行處理，然后將處理結(jié)果交給 Directive 或者下一個 Filter。例如：v-bind="time | formatTime"。formatTime 是將 time 轉(zhuǎn)換成指定格式的 Filter 函數(shù)。
表達(dá)式
類似前端普通的頁面模板表達(dá)式，作用是控制頁面內(nèi)容安裝具體的條件顯示。例如：if...else 等
ViewModel
傳入的 Model 數(shù)據(jù)在內(nèi)存中存放，提供一些基本的操作 API 給開發(fā)者，使其能夠?qū)?shù)據(jù)進(jìn)行讀取與修改
雙向綁定（數(shù)據(jù)變更檢測）
View 層的變化改變 Model：通過給元素添加 onchange 事件來觸發(fā)對 Model 數(shù)據(jù)進(jìn)行修改
Model 層的變化改變 View：
實現(xiàn)方式
手動觸發(fā)綁定
即 Model 對象改變之后，需要顯示的去觸發(fā) View 的更新
首先編寫 HTML 頁面
Two way binding
編寫實現(xiàn) MVVM 的 代碼
// Manual triggerlet elems = [document.getElementById('el'), document.getElementById('input')]// 數(shù)據(jù) Modellet data = { value: 'hello'}// 定義 Directivelet directive = { text: function(text) { this.innerHTML = text }, value: function(value) { this.setAttribute('value', value) this.value = value }}// 掃描所有的元素function scan() { // 掃描帶指令的節(jié)點(diǎn)屬性 for (let elem of elems) { elem.directive = [] for (let attr of elem.attributes) { if (attr.nodeName.indexOf('q-') >= 0) { directive[attr.nodeName.slice(2)].call(elem, data[attr.nodeValue]) elem.directive.push(attr.nodeName.slice(2)) } } }}// ViewModel 更新函數(shù)function ViewModelSet(key, value) { // 修改數(shù)據(jù)對象后 data[key] = value // 手動地去觸發(fā) View 的修改 scan()}// View 綁定監(jiān)聽elems[1].addEventListener('keyup', function(e) { ViewModelSet('value', e.target.value)}, false)// -------- 程序執(zhí)行 -------scan()setTimeout(() => { ViewModelSet('value', 'hello world')}, 1000);數(shù)據(jù)劫持
數(shù)據(jù)劫持是目前比較廣泛的方式，Vue 的雙向綁定就是通過數(shù)據(jù)劫持實現(xiàn)。實現(xiàn)方式是通過 Object.defineProperty 和 Object.defineProperies 方法對 Model 對象的 get 和 set 函數(shù)進(jìn)行監(jiān)聽。當(dāng)有數(shù)據(jù)讀取或賦值操作時，掃描（或者通知）對應(yīng)的元素執(zhí)行 Directive 函數(shù)，實現(xiàn) View 的刷新。
HTML 的代碼不變，js 代碼如下
// Hijackinglet elems = [document.getElementById('el'), document.getElementById('input')]let data = { value: 'hello'}// 定義 Directivelet directive = { text: function(text) { this.innerHTML = text }, value: function(value) { this.setAttribute('value', value) this.value = value }}// 定義對象屬性設(shè)置劫持// obj: 指定的 Model 數(shù)據(jù)對象// propName: 指定的屬性名稱function defineGetAndSet(obj, propName) { let bValue // 使用 Object.defineProperty 做數(shù)據(jù)劫持 Object.defineProperty(obj, propName, { get: function() { return bValue }, set: function(value) { bValue = value // 在 vue 中，這里不會去掃描所有的元素，而是通過訂閱發(fā)布模式，通知那些訂閱了該數(shù)據(jù)的 view 進(jìn)行更新 scan() }, enumerable: true, configurable: true })}// View 綁定監(jiān)聽elems[1].addEventListener('keyup', function(e) { data.value = e.target.value}, false)// 掃描所有的元素function scan() { // 掃描帶指令的節(jié)點(diǎn)屬性 for (let elem of elems) { elem.directive = [] for (let attr of elem.attributes) { if (attr.nodeName.indexOf('q-') >= 0) { directive[attr.nodeName.slice(2)].call(elem, data[attr.nodeValue]) elem.directive.push(attr.nodeName.slice(2)) } } }}// -------- 程序執(zhí)行 -------scan()defineGetAndSet(data, 'value')setTimeout(() => { // 這里為數(shù)據(jù)設(shè)置新值之后，在 set 方法中會去更新 view data.value = 'Hello world'}, 1000);基于 Proxy 的實現(xiàn)
Proxy 是 ES6 中的新特性。可以在已有的對象基礎(chǔ)上定義一個新對象，并重新定義對象原型上的方法。例如 get 和 set 方法。
// Hijackinglet elems = [document.getElementById('el'), document.getElementById('input')]// 定義 Directivelet directive = { text: function(text) { this.innerHTML = text }, value: function(value) { this.setAttribute('value', value) this.value = value }}// 設(shè)置對象的代理let data = new Proxy({}, { get: function(target, key, receiver) { return target.value }, set: function (target, key, value, receiver) { target.value = value scan() return target.value }})// View 綁定監(jiān)聽elems[1].addEventListener('keyup', function(e) { data.value = e.target.value}, false)// 掃描所有的元素function scan() { // 掃描帶指令的節(jié)點(diǎn)屬性 for (let elem of elems) { elem.directive = [] for (let attr of elem.attributes) { if (attr.nodeName.indexOf('q-') >= 0) { directive[attr.nodeName.slice(2)].call(elem, data[attr.nodeValue]) elem.directive.push(attr.nodeName.slice(2)) } } }}// -------- 程序執(zhí)行 -------data['value'] = 'Hello'scan()setTimeout(() => { data.value = 'Hello world'}, 1000);臟數(shù)據(jù)監(jiān)測
基本原理是在 Model 對象的屬性值發(fā)生變化的時候找到與該屬性值相關(guān)的所有元素，然后判斷數(shù)據(jù)是否發(fā)生變化，若變化則更新 View。
編寫頁面代碼如下：Two way binding
js 代碼如下：
// Dirty detectionlet elems = [document.getElementById('el'), document.getElementById('input')]let data = { value: 'hello'}// 定義 Directivelet directive = { text: function(text) { this.innerHTML = text }, value: function(value) { this.setAttribute('value', value) this.value = value }}// 臟數(shù)據(jù)循環(huán)檢測function digest(elems) { for (let elem of elems) { if (elem.directive === undefined) { elem.directive = {} } for (let attr of elem.attributes) { if (attr.nodeName.indexOf('q-event') >= 0) { let dataKey = elem.getAttribute('q-bind') || undefined // 進(jìn)行臟數(shù)據(jù)檢測，如果數(shù)據(jù)改變，則重新執(zhí)行命令 if (elem.directive[attr.nodeValue] !== data[dataKey]) { directive[attr.nodeValue].call(elem, data[dataKey]) elem.directive[attr.nodeValue] = data[dataKey] } } } }}// 數(shù)據(jù)監(jiān)聽function $digest(value) { let list = document.querySelectorAll('[q-bind=' + value + ']') digest(list)}// View 綁定監(jiān)聽elems[1].addEventListener('keyup', function(e) { data.value = e.target.value $digest(e.target.getAttribute('q-bind'))}, false)// -------- 程序執(zhí)行 -------$digest('value')setTimeout(() => { data.value = "Hello world" $digest('value')}, 1000);總結(jié)
上面只是簡單地實現(xiàn)了雙向綁定，但實際上一個完整的 MVVM 框架要考慮很多東西。在上面的實現(xiàn)中數(shù)據(jù)劫持的方法更新View 是使用了 Scan 函數(shù)，但實際的實現(xiàn)中（比如 Vue）是使用了發(fā)布訂閱的模式。它只會去更新那些與該 Model 數(shù)據(jù)綁定的元素，而不會去掃描所有元素。而在臟數(shù)據(jù)檢測中，它去找到了所有綁定的元素，然后判斷數(shù)據(jù)是否發(fā)生變化，這種方式只有一定的性能開銷的。
參考
代碼下載：https://github.com/OreChou/twowaybinding
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
