JS33. 监听对象
描述
请补全JavaScript代码，要求如下：HTML/CSS/JavaScript 解法, 执行用时: 1755ms, 内存消耗: 77900KB, 提交时间: 2021-12-08
{"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 <ul></ul>\n\n <script>\n var ul = document.querySelector('ul');\n var person = { sex: '男', age: '25', name: '王大锤', height: 28, weight: 32 };\n const _render = element => {\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 element.innerHTML = str;\n }\n _render(ul);\n // 补全代码\n function Oberserve(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 }\n function 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(ul)\n }\n }\n })\n }\n Oberserve(person)\n </script>\n </body>\n</html>","libs":[]}
HTML/CSS/JavaScript 解法, 执行用时: 1759ms, 内存消耗: 77900KB, 提交时间: 2021-12-05
{"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 <ul></ul>\n\n <script>\n var ul = document.querySelector('ul');\n var person = { sex: '男', age: '25', name: '王大锤', height: 28, weight: 32 };\n const _render = element => {\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 element.innerHTML = str;\n }\n \n // 补全代码\n for (let key in person) {\n let value=person[key];\n Object.defineProperty(person,key,{\n get(){\n return value\n },\n set(newVal){\n value=newVal;\n _render(ul);\n }\n })\n \n }\n </script>\n </body>\n</html>","libs":[]}
HTML/CSS/JavaScript 解法, 执行用时: 1760ms, 内存消耗: 77864KB, 提交时间: 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 <ul></ul>\n\n <script>\n var ul = document.querySelector('ul');\n var person = { sex: '男', age: '25', name: '王大锤', height: 28, weight: 32 };\n const _render = element => {\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 element.innerHTML = str;\n }\n _render(ul);\n // 补全代码\n Object.keys(person).forEach(key=>{\n // 先获取值\n let value = person[key];\n Object.defineProperty(person,key,{\n //监听拿到的是新值\n set(newValue){\n if(newValue!=value){\n // 为什么不直接更新person[key] = newValue //直接更新陷入死循环\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 解法, 执行用时: 1760ms, 内存消耗: 77900KB, 提交时间: 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 <ul></ul>\n\n <script>\n var ul = document.querySelector('ul');\n var person = { sex: '男', age: '25', name: '王大锤', height: 28, weight: 32 };\n const _render = element => {\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 element.innerHTML = str;\n }\n // _render(ul);\n // 补全代码\n for (let key in person) {\n let value = person[key]\n Object.defineProperty(person, key, {\n get () { return value },\n set (newVal) {\n value = newVal;\n _render(ul)\n }\n })\n }\n </script>\n </body>\n</html>","libs":[]}
HTML/CSS/JavaScript 解法, 执行用时: 1762ms, 内存消耗: 77900KB, 提交时间: 2021-12-20
{"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 <ul></ul>\n\n <script>\n var ul = document.querySelector('ul');\n var person = { sex: '男', age: '25', name: '王大锤', height: 28, weight: 32 };\n const _render = element => {\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 element.innerHTML = str;\n }\n _render(ul);\n // 补全代码\n Object.keys(person).forEach(key=>{\n let value=person[key]\n Object.defineProperty(person,key,{\n get(){\n return value\n },\n set(newVal){\n if(newVal!=value){\n value=newVal\n _render(ul)\n }\n }\n })\n})\n </script>\n </body>\n</html>","libs":[]}