<!DOCTYPE html> <html> <head> <title>defineProperty</title> </head> <body> name:<input type="text" id="name"> age:<input type="number" id="age"> <br /> <br /> name:<span id="namep"></span> <br /> age:<span id="agep"></span> <script type="text/javascript"> function Obj() { } Obj.prototype.data = { name: "mvvm", age: 18 } let dataObj = new Obj(); Object.keys(dataObj.data).forEach(key => { Object.defineProperty(dataObj, key, { get: function() { return dataObj[key]; }, set: function(newValue) { document.getElementById(`${key}p`).innerHTML = newValue; dataObj.data[key] = newValue; } }); }); document.getElementById("name").addEventListener('keyup', function(e) { dataObj["name"] = e.target.value; }); document.getElementById("age").addEventListener('keyup', function(e) { dataObj["age"] = e.target.value; }); </script> </body> </html>
<!DOCTYPE html> <html> <head> <title>KOA</title> </head> <body> <input type="text" k-value="value" id="input" /> <div k-text="value" id="el"></div> <script type="text/javascript"> /**基本思路是使用Object.defineProperty对数据对象做属性get和set的监听，当有数据读取和赋值操作时则调用节点的指令，这样使用最通用的=等号赋值就可以了。*/ var elems = [document.getElementById('el'), document.getElementById('input')]; var data = { value: "hello" }; var command = { text: function(str) { this.innerHTML = str; }, value: function(str) { this.setAttribute('value', str); } } let scan = function() { for (let i = 0, len = elems.length; i < len; i++) { let elem = elems[i]; elem.command = []; for (let j = 0, len1 = elem.attributes.length; j < len1; j++) { let attr = elem.attributes[j]; if (attr.nodeName.indexOf('k-') >= 0) { //调用属性指令 command[attr.nodeName.slice(2)].call(elem, data[attr.nodeValue]); elem.command.push(attr.nodeName.slice(2)); } } } } let bValue; /** * 定义属性劫持 */ let defineGetAndSet = function(obj, propName) { try { Object.defineProperty(obj, propName, { get: function() { return bValue; }, set: function(newValue) { bValue = newValue; scan(); }, enumerable: true, configurable: true }); } catch (err) { console.log("browser not supported"); } } //初始化数据 scan(); defineGetAndSet(data, 'value'); if (document.addEventListener) { elems[1].addEventListener('keyup', function(e) { data.value = e.target.value; }, false); } else { elems[1].attachEvent('onkeyup', function(e) { data.value = e.target.value; }, false); } setTimeout(function(){ data.value = 'hello kruce'; }, 2000) </script> </body> </html>