mini mvvm 简单实现版,代码有待改进
<html> <head> <title>mini-mvvm</title> </head> <body> <div id='app'> <p> My name is {{firstName + ' ' + lastName}}, I am {{age}} years old. </p> </div> <script type="text/javascript"> const bindViewToData = ((el, data) => { let source = el.innerHTML; let updateTextArray = []; let updateText = (el) => { el._textContent = el._textContent || el.textContent; el.textContent = el._textContent.replace(/\{\{([^\{\}]+)\}\}/gm, ($0, $1) => { return new Function('data','with(data){return ' + $1+'}')(data); }); }; let update = () => { let findChild = (el) => { var childs = el.childNodes; if(childs){ childs = Array.prototype.slice.apply(childs); for (var i = childs.length - 1; i >= 0; i--) { if(childs[i].nodeType === 3){ updateText(childs[i]); }else if(childs[i].childNodes){ findChild(childs[i]); } }; } }; findChild(el); }; update(); for(var k in data){ data._data = data._data || {}; if(data.hasOwnProperty(k)){ data._data[k] = data[k]; Object.defineProperty(data, k, { get: (function(k){ return function(){ return this._data[k]; } })(k), set: (function(k){ return function(val){ if(this._data[k] !== val){ this._data[k] = val; update(); } }; })(k) }); } } }); const appData = { firstName: 'Lucy', lastName: 'Green', age: 13 } bindViewToData(document.getElementById('app'), appData) // div 里面的 p 元素的内容为 // My name is Lucy Green, I am 13 years old. appData.firstName = 'Jerry' appData.age = 16 // div 里面的 p 元素的内容自动变为 // My name is Jerry Green, I am 16 years old. </script> </body> </html>