<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv ...
<!DOCTYPE html> <html lang="en">
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head>
<body> <h1 class="disp"></h1> <h2 class="disp"></h2> <h3 id="d3" class='disp'></h3>
<input type="text" id="inp1"></input> <input type="text" id='inp2'></input> <input type="text" id='inp3'></input> <script> var man = { name: 'zhang' , age: 1 }; function bind(obj, key, selector, prop, event = undefined) { debugger var els = document.querySelectorAll(selector); var value_1 = obj[key]; Array.prototype.slice.call(els).forEach(function (el) { if (event) { el.addEventListener(event, function () { obj[key] = el[prop]; }) } if (!obj.__ep__) obj.__ep__ = {}; Object.defineProperty(obj, "__ep__", { enumerable: true }); if (!obj.__ep__[key]) { obj.__ep__[key] = []; obj.__ep__[key].push({ el: el, prop: prop }); Object.defineProperty(obj, key, { get: function () { return obj.__ep__[key].value }, set: function (value) { obj.__ep__[key].value = value; obj.__ep__[key].forEach(ep => { ep.el[ep.prop] = value }); } }) } else { obj.__ep__[key].push({ el: el, prop: prop }); } Object.defineProperty(obj, "__ep__", { enumerable: false }); }) obj[key] = value_1; } bind(man, 'name', '#inp1', 'value', 'input'); bind(man, 'name', '#inp2', 'value', 'change'); bind(man, 'name', '.disp', 'innerHTML'); bind(man,'age','#inp3','value','input') bind(man,'age','#d3','innerHTML') //document.body.removeChild(document.querySelector('#inp1')) </script> </body>
</html>
