content.json

{"meta":{"title":"J Blog","subtitle":null,"description":null,"author":"J","url":"https://noobjexception.github.io/blog"},"pages":[],"posts":[{"title":"vue源码阅读-实现数据绑定","slug":"vue源码阅读-实现数据渲染","date":"2019-04-02T09:09:50.000Z","updated":"2019-04-03T05:07:40.553Z","comments":true,"path":"2019/04/02/vue源码阅读-实现数据渲染/","link":"","permalink":"https://noobjexception.github.io/blog/2019/04/02/vue源码阅读-实现数据渲染/","excerpt":"需求\n能解析{ { } }并渲染出值, 如果值为空渲染为空\nvm.data.msg 后值会改变","text":"需求 能解析{ { } }并渲染出值, 如果值为空渲染为空 vm.data.msg 后值会改变 1234567891011121314151617181920212223<div id=\"app\"> <p>{{ msg }}</p> <p>{{ msg }}</p> <p>{{ msg }}</p> <p>{{ why }}</p> <p>{{ what }}</p></div><script> const vm = new Vue({ el: \"#app\", data: { msg: \"hello\" } }); console.log(vm.data.msg); // hello setTimeout(() => { vm.data.msg = \"hi\"; console.log(vm.data.msg); // hi }, 3000);</script> 实现 获取根节点, 遍历其子节点, 用正则匹配出{ { } }语法 利用 Object.defineProperty 绑定并重写属性的 getter/setter 方法, 在 set 的时候重新渲染 dom 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475<div id=\"app\"> <p>{{msg}}</p> <p>{{ msg }}</p> <p>{{ msg }}</p> <p>{{ why }}</p> <p>{{ what }}</p></div><script> // 实现 const bindingMark = \"data-element-binding\"; function Vue(options) { const el = document.getElementById(options.el); const bindings = {}; const data = this.data = {}; // 替换{{}} el.innerHTML = el.innerHTML.replace(/\\{\\{(.*)\\}\\}/g, markToken); for (let variable in bindings) { bind(variable); } // 根据传入的data初始化数据, 此处重新赋值. 即会触发setter方法, 更新dom if (options.data) { for (let variable in options.data) { data[variable] = options.data[variable]; } } // 生成一个文本值的标签容器. 并标记绑定标签 function markToken(match, variable) { variable = variable.trim(); bindings[variable] = {}; return \"<span \" + bindingMark + '=\"' + variable + '\"></span>'; } function bind(variable) { bindings[variable].els = el.querySelectorAll( \"[\" + bindingMark + '=\"' + variable + '\"]' ); [].forEach.call(bindings[variable].els, function(e) { e.removeAttribute(bindingMark); }); // 关键 Object.defineProperty(data, variable, { set: function(newVal) { [].forEach.call(bindings[variable].els, function(e) { bindings[variable].value = newVal; e.textContent = newVal; // 重新渲染 }); }, get: function() { return bindings[variable].value; } }); } } // 测试 const vm = new Vue({ el: \"app\", data: { msg: \"hello\" } }); console.log(vm.data.msg); // hello setTimeout(() => { vm.data.msg = \"hi\"; console.log(vm.data.msg); // hi }, 3000);</script>","raw":null,"content":null,"categories":[],"tags":[]},{"title":"Vue源码阅读, 逐步实现一个Vue","slug":"vue源码阅读","date":"2019-04-02T08:04:48.000Z","updated":"2019-04-02T09:18:28.255Z","comments":true,"path":"2019/04/02/vue源码阅读/","link":"","permalink":"https://noobjexception.github.io/blog/2019/04/02/vue源码阅读/","excerpt":"","text":"前言尝试阅读vue的源码 目录 最初的Vue 最初的Vue","raw":null,"content":null,"categories":[],"tags":[]},{"title":"js骚操作总结","slug":"js骚操作总结","date":"2019-04-02T07:53:15.000Z","updated":"2019-04-02T08:01:51.410Z","comments":true,"path":"2019/04/02/js骚操作总结/","link":"","permalink":"https://noobjexception.github.io/blog/2019/04/02/js骚操作总结/","excerpt":"","text":"","raw":null,"content":null,"categories":[],"tags":[]},{"title":"Hello World","slug":"hello-world","date":"2019-04-02T07:51:14.957Z","updated":"2019-04-02T07:51:14.957Z","comments":true,"path":"2019/04/02/hello-world/","link":"","permalink":"https://noobjexception.github.io/blog/2019/04/02/hello-world/","excerpt":"","text":"Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub. Quick StartCreate a new post1$ hexo new \"My New Post\" More info: Writing Run server1$ hexo server More info: Server Generate static files1$ hexo generate More info: Generating Deploy to remote sites1$ hexo deploy More info: Deployment","raw":null,"content":null,"categories":[],"tags":[]}]}