MVVM 雙向綁定的實(shí)現(xiàn)代碼

// Manual trigger
let elems = [document.getElementById('el'), document.getElementById('input')]
// 數(shù)據(jù) 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() {
 // 掃描帶指令的節(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);

// 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
 }
}

// 定義對象屬性設(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);

// 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
 }
}

// 設(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);

// 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
 }
}

// 臟數(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);