[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_11":-5},"routes/user.$name.topics",{"_9":10,"_11":12,"_13":14,"_15":16,"_17":18,"_19":16},"topics",[34],"user",{"_20":21,"_13":14,"_22":23,"_24":14,"_25":26,"_27":28,"_29":16,"_30":31,"_32":33},"loginname","fsx950223","page",1,"limit",20,"total","id","30482","avatar_url","https://avatars0.githubusercontent.com/u/17592563?v=4","githubUsername","create_at","2017-10-20 15:48:40.342","score",5,"topic_count","reply_count",0,"is_star",false,{"_20":35,"_36":21,"_37":38,"_39":40,"_41":42,"_43":44,"_45":33,"_46":33,"_30":47,"_48":49,"_25":50,"_51":52},"28584","author_id","tab","share","content","今天面试nodejs被双向数据绑定考蒙了，感觉智商收到了严重的侮辱，特写一个极单的双向绑定安慰下自己\r\n```js\r\nclass Bind {\r\n constructor(type, element) {\r\n this.type = type;\r\n this.element = element;\r\n }\r\n get prop() {\r\n if (this.type === 'html') {\r\n return this.element.innerHTML;\r\n } else if (this.type === 'value') {\r\n return this.element.value\r\n }\r\n }\r\n set prop(value) {\r\n if (this.type === 'html') {\r\n this.element.innerHTML = value;\r\n } else if (this.type === 'value') {\r\n this.element.value = value;\r\n }\r\n }\r\n}\r\n\r\nclass Data {\r\n constructor(data) {\r\n this.data = data;\r\n this.map = new Map();\r\n const doms = document.querySelectorAll(\"body *\");\r\n for (const dom of doms) {\r\n let prop;\r\n let bind;\r\n if (dom.dataset.html) {\r\n prop = dom.dataset.html;\r\n bind = new Bind('html', dom);\r\n } else if (dom.dataset.value) {\r\n prop = dom.dataset.value;\r\n bind = new Bind('value', dom);\r\n }\r\n if (prop) {\r\n this.map.set(`${prop}`, bind);\r\n }\r\n }\r\n }\r\n change(prop, value) {\r\n const bind = this.map.get(prop);\r\n bind.prop = value;\r\n this.map.set(prop, bind);\r\n }\r\n}\r\n\r\nconst bind = (data) => {\r\n const databind = new Data(data);\r\n const proxy=new Proxy(data,{\r\n set(target,key,value){\r\n databind.change(key, value);\r\n }\r\n })\r\n return proxy;\r\n}\r\n```\r\n测试页：\r\n```html\r\n\r\n\r\n\r\n \r\n\r\n\r\n\r\n

\r\n \r\n \r\n\r\n\r\n\r\n```","title","今天突发奇想的极简双向数据绑定","last_reply_at","2017-10-21 04:37:25.292","good","top",2,"visit_count",3736,"2017-10-20 15:51:23.671","author",{"_13":14,"_22":23}]