{"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:function() {\n                            return value\n                        },\n                        set:function(newVal) {\n                            if(value !== newVal) {\n                                value = newVal\n                                _render()\n                            }\n                        }\n                    })\n                }\n            }\n            observe(person)\n            inp.oninput = function() {\n                person.weight = this.value\n            }\n        </script>\n    </body>\n</html>","libs":[]}