JS37. 双向绑定
描述
请补全JavaScript代码，要求如下：HTML/CSS/JavaScript 解法, 执行用时: 1689ms, 内存消耗: 77820KB, 提交时间: 2022-02-09
{"css":"","js":"","html":"<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\">\n </head>\n <body>\n <style>\n ul {\n list-style: none;\n }\n </style>\n <input type=\"text\">\n <ul></ul>\n\n <script>\n var ul = document.querySelector('ul');\n var person = { sex: '男', age: '25', name: '王大锤', height: 28, weight: 32 };\n var inp = document.querySelector('input');\n inp.value = person.weight;\n const _render = () => {\n var str = `<li>姓名：<span>${person.name}</span></li>\n <li>性别：<span>${person.sex}</span></li>\n <li>年龄：<span>${person.age}</span></li>\n <li>身高：<span>${person.height}</span></li>\n <li>体重：<span>${person.weight}</span></li>`\n ul.innerHTML = str;\n inp.value = person.weight;\n }\n _render(ul);\n // 补全代码\n const personData = Object.keys(person).reduce((o, k) => {\n o[k] = person[k];\n return o;\n }, {});\n \n const props = Object.keys(person).reduce((o, k) => {\n o[k] = {\n set(v) {\n personData[k] = v;\n _render();\n },\n get() {\n return personData[k];\n },\n };\n return o;\n }, {});\n \n Object.defineProperties(person, props);\n \n inp.oninput = function() {\n person.weight = this.value;\n }\n </script>\n </body>\n</html>","libs":[]}
HTML/CSS/JavaScript 解法, 执行用时: 1778ms, 内存消耗: 77988KB, 提交时间: 2021-12-21
{"css":"","js":"","html":"<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\">\n </head>\n <body>\n <style>\n ul {\n list-style: none;\n }\n </style>\n <input type=\"text\">\n <ul></ul>\n\n <script>\n var ul = document.querySelector('ul');\n var person = { sex: '男', age: '25', name: '王大锤', height: 28, weight: 32 };\n var inp = document.querySelector('input');\n inp.value = person.weight;\n const _render = () => {\n var str = `<li>姓名：<span>${person.name}</span></li>\n <li>性别：<span>${person.sex}</span></li>\n <li>年龄：<span>${person.age}</span></li>\n <li>身高：<span>${person.height}</span></li>\n <li>体重：<span>${person.weight}</span></li>`\n ul.innerHTML = str;\n inp.value = person.weight;\n }\n _render(ul);\n // 补全代码\n let source = person;\n person ={}\n Object.keys(source).forEach(key=>{\n Object.defineProperty(person,key,{\n get(){\n return source[key]\n },\n set(v){\n source[key] = v;\n _render()\n }\n })\n })\n inp.oninput = function(){\n person.weight= this.value\n }\n </script>\n </body>\n</html>","libs":[]}
HTML/CSS/JavaScript 解法, 执行用时: 1779ms, 内存消耗: 77932KB, 提交时间: 2022-01-25
{"css":"","js":"","html":"<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\">\n </head>\n <body>\n <style>\n ul {\n list-style: none;\n }\n </style>\n <input type=\"text\">\n <ul></ul>\n\n <script>\n var ul = document.querySelector('ul');\n var person = { sex: '男', age: '25', name: '王大锤', height: 28, weight: 32 };\n var inp = document.querySelector('input');\n inp.value = person.weight;\n const _render = () => {\n var str = `<li>姓名：<span>${person.name}</span></li>\n <li>性别：<span>${person.sex}</span></li>\n <li>年龄：<span>${person.age}</span></li>\n <li>身高：<span>${person.height}</span></li>\n <li>体重：<span>${person.weight}</span></li>`\n ul.innerHTML = str;\n inp.value = person.weight;\n }\n _render(ul);\n // 补全代码\n inp.oninput =function(e){\n person.weight = this.value;\n }\n \n Object.keys(person).forEach(key=>{\n let value = person[key];\n Object.defineProperty(person,key,{\n set(newValue){\n if(newValue != value){\n value = newValue\n _render(ul);\n }\n },\n get(){\n return value\n }\n })\n })\n </script>\n </body>\n</html>","libs":[]}
HTML/CSS/JavaScript 解法, 执行用时: 1784ms, 内存消耗: 77876KB, 提交时间: 2021-12-16
{"css":"","js":"","html":"<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\">\n </head>\n <body>\n <style>\n ul {\n list-style: none;\n }\n </style>\n <input type=\"text\">\n <ul></ul>\n\n <script>\n var ul = document.querySelector('ul');\n var person = { sex: '男', age: '25', name: '王大锤', height: 28, weight: 32 };\n var inp = document.querySelector('input');\n inp.value = person.weight;\n const _render = () => {\n var str = `<li>姓名：<span>${person.name}</span></li>\n <li>性别：<span>${person.sex}</span></li>\n <li>年龄：<span>${person.age}</span></li>\n <li>身高：<span>${person.height}</span></li>\n <li>体重：<span>${person.weight}</span></li>`\n ul.innerHTML = str;\n inp.value = person.weight;\n }\n _render(ul);\n // 补全代码\n function observe(target) {\n for (let key in target){\n let value = target[key]\n Object.defineProperty(target, key,{\n get(){\n return value\n },\n set(nv){\n value = nv\n _render()\n }\n })\n }\n }\n observe(person)\n\n inp.oninput = function(e){\n person.weight = this.value\n }\n </script>\n </body>\n</html>","libs":[]}
HTML/CSS/JavaScript 解法, 执行用时: 1788ms, 内存消耗: 77872KB, 提交时间: 2021-12-07
{"css":"","js":"","html":"<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\">\n </head>\n <body>\n <style>\n ul {\n list-style: none;\n }\n </style>\n <input type=\"text\">\n <ul></ul>\n\n <script>\n var ul = document.querySelector('ul');\n var person = { sex: '男', age: '25', name: '王大锤', height: 28, weight: 32 };\n var inp = document.querySelector('input');\n inp.value = person.weight;\n const _render = () => {\n var str = `<li>姓名：<span>${person.name}</span></li>\n <li>性别：<span>${person.sex}</span></li>\n <li>年龄：<span>${person.age}</span></li>\n <li>身高：<span>${person.height}</span></li>\n <li>体重：<span>${person.weight}</span></li>`\n ul.innerHTML = str;\n inp.value = person.weight;\n }\n _render(ul);\n // 补全代码\n function Observe(target) {\n if (typeof target !== 'object' || target == null) {\n return target\n }\n for (var key in target) {\n defineReactive(target, key, target[key])\n }\n}\nfunction defineReactive(target, key, value) {\n Object.defineProperty(target, key, {\n get: function () {\n return value\n },\n set: function (newVal) {\n if (newVal !== value) {\n value = newVal\n _render()\n }\n\n }\n\n })\n}\nObserve(person);\n\ninp.oninput = function(){\n person.weight = this.value\n}\n\n </script>\n </body>\n</html>","libs":[]}