溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要記錄學習 JS 雙向綁定過程中的一些概念與具體的實現
MVVM 具體概念
MVVM 中有一些概念是通用的，具體如下
Directive （指令）
自定義的執行函數，例如 Vue 中的 v-click、v-bind 等。這些函數封裝了 DOM 的一些基本可復用函數API。
Filter （過濾器）
用戶希望對傳入的初始數據進行處理，然后將處理結果交給 Directive 或者下一個 Filter。例如：v-bind="time | formatTime"。formatTime 是將 time 轉換成指定格式的 Filter 函數。
表達式
類似前端普通的頁面模板表達式，作用是控制頁面內容安裝具體的條件顯示。例如：if...else 等
ViewModel
傳入的 Model 數據在內存中存放，提供一些基本的操作 API 給開發者，使其能夠對數據進行讀取與修改
雙向綁定（數據變更檢測）
View 層的變化改變 Model：通過給元素添加 onchange 事件來觸發對 Model 數據進行修改
Model 層的變化改變 View：
實現方式
手動觸發綁定
即 Model 對象改變之后，需要顯示的去觸發 View 的更新
首先編寫 HTML 頁面
Two way binding
編寫實現 MVVM 的 代碼
// Manual trigger
let elems = [document.getElementById('el'), document.getElementById('input')]
// 數據 Model
let data = {
value: 'hello'
}
// 定義 Directive
let directive = {
text: function(text) {
this.innerHTML = text
},
value: function(value) {
this.setAttribute('value', value)
this.value = value
}
}
// 掃描所有的元素
function scan() {
// 掃描帶指令的節點屬性
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 更新函數
function ViewModelSet(key, value) {
// 修改數據對象后
data[key] = value
// 手動地去觸發 View 的修改
scan()
}
// View 綁定監聽
elems[1].addEventListener('keyup', function(e) {
ViewModelSet('value', e.target.value)
}, false)
// -------- 程序執行 -------
scan()
setTimeout(() => {
ViewModelSet('value', 'hello world')
}, 1000);
數據劫持
數據劫持是目前比較廣泛的方式，Vue 的雙向綁定就是通過數據劫持實現。實現方式是通過 Object.defineProperty 和 Object.defineProperies 方法對 Model 對象的 get 和 set 函數進行監聽。當有數據讀取或賦值操作時，掃描（或者通知）對應的元素執行 Directive 函數，實現 View 的刷新。
HTML 的代碼不變，js 代碼如下
// Hijacking
let elems = [document.getElementById('el'), document.getElementById('input')]
let data = {
value: 'hello'
}
// 定義 Directive
let directive = {
text: function(text) {
this.innerHTML = text
},
value: function(value) {
this.setAttribute('value', value)
this.value = value
}
}
// 定義對象屬性設置劫持
// obj: 指定的 Model 數據對象
// propName: 指定的屬性名稱
function defineGetAndSet(obj, propName) {
let bValue
// 使用 Object.defineProperty 做數據劫持
Object.defineProperty(obj, propName, {
get: function() {
return bValue
},
set: function(value) {
bValue = value
// 在 vue 中，這里不會去掃描所有的元素，而是通過訂閱發布模式，通知那些訂閱了該數據的 view 進行更新
scan()
},
enumerable: true,
configurable: true
})
}
// View 綁定監聽
elems[1].addEventListener('keyup', function(e) {
data.value = e.target.value
}, false)
// 掃描所有的元素
function scan() {
// 掃描帶指令的節點屬性
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))
}
}
}
}
// -------- 程序執行 -------
scan()
defineGetAndSet(data, 'value')
setTimeout(() => {
// 這里為數據設置新值之后，在 set 方法中會去更新 view
data.value = 'Hello world'
}, 1000);
基于 Proxy 的實現
Proxy 是 ES6 中的新特性。可以在已有的對象基礎上定義一個新對象，并重新定義對象原型上的方法。例如 get 和 set 方法。
// Hijacking
let elems = [document.getElementById('el'), document.getElementById('input')]
// 定義 Directive
let directive = {
text: function(text) {
this.innerHTML = text
},
value: function(value) {
this.setAttribute('value', value)
this.value = value
}
}
// 設置對象的代理
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 綁定監聽
elems[1].addEventListener('keyup', function(e) {
data.value = e.target.value
}, false)
// 掃描所有的元素
function scan() {
// 掃描帶指令的節點屬性
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))
}
}
}
}
// -------- 程序執行 -------
data['value'] = 'Hello'
scan()
setTimeout(() => {
data.value = 'Hello world'
}, 1000);
臟數據監測
基本原理是在 Model 對象的屬性值發生變化的時候找到與該屬性值相關的所有元素，然后判斷數據是否發生變化，若變化則更新 View。
編寫頁面代碼如下：Two way binding
js 代碼如下：
// Dirty detection
let elems = [document.getElementById('el'), document.getElementById('input')]
let data = {
value: 'hello'
}
// 定義 Directive
let directive = {
text: function(text) {
this.innerHTML = text
},
value: function(value) {
this.setAttribute('value', value)
this.value = value
}
}
// 臟數據循環檢測
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
// 進行臟數據檢測，如果數據改變，則重新執行命令
if (elem.directive[attr.nodeValue] !== data[dataKey]) {
directive[attr.nodeValue].call(elem, data[dataKey])
elem.directive[attr.nodeValue] = data[dataKey]
}
}
}
}
}
// 數據監聽
function $digest(value) {
let list = document.querySelectorAll('[q-bind=' + value + ']')
digest(list)
}
// View 綁定監聽
elems[1].addEventListener('keyup', function(e) {
data.value = e.target.value
$digest(e.target.getAttribute('q-bind'))
}, false)
// -------- 程序執行 -------
$digest('value')
setTimeout(() => {
data.value = "Hello world"
$digest('value')
}, 1000);
總結
上面只是簡單地實現了雙向綁定，但實際上一個完整的 MVVM 框架要考慮很多東西。在上面的實現中數據劫持的方法更新View 是使用了 Scan 函數，但實際的實現中（比如 Vue）是使用了發布訂閱的模式。它只會去更新那些與該 Model 數據綁定的元素，而不會去掃描所有元素。而在臟數據檢測中，它去找到了所有綁定的元素，然后判斷數據是否發生變化，這種方式只有一定的性能開銷的。
參考
《現代前端技術解析》
代碼下載：https://github.com/OreChou/twowaybinding
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
