[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_11":-5},"routes/user.$name.collections",{"_9":10,"_11":12,"_13":14,"_15":16,"_17":18,"_19":16},"topics",[35],"user",{"_20":21,"_13":14,"_22":23,"_24":14,"_25":26,"_27":28,"_29":30,"_31":32,"_33":34},"loginname","ly525","page",1,"limit",20,"total","id","21143","avatar_url","https://avatars3.githubusercontent.com/u/12668546?v=4","githubUsername","create_at","2016-02-29 10:16:18.755","score",50,"topic_count",2,"reply_count",8,"is_star",false,{"_20":36,"_37":38,"_39":40,"_41":42,"_43":44,"_45":46,"_47":34,"_48":34,"_31":49,"_50":51,"_25":52,"_53":54},"21489","author_id","20144","tab","share","content","Online demo:[http://yangxiaofu.com/deep-in-vue/src/the-super-tiny-vue.html](http://yangxiaofu.com/deep-in-vue/src/the-super-tiny-vue.html)\r\ngithub: [https://github.com/xiaofuzi/deep-in-vue/blob/master/src/the-super-tiny-vue.js](https://github.com/xiaofuzi/deep-in-vue/blob/master/src/the-super-tiny-vue.js)\r\nes6版本：[https://github.com/xiaofuzi/re-vue](https://github.com/xiaofuzi/re-vue)\r\n/**\r\n * the super tiny vue.js.\r\n * 代码总共200行左右(去掉注释)\r\n*/\r\n 简介：一个迷你vue库，虽然小但功能全面，可以作为想了解vue背后思想以及想学习vue源码而又不知如何入手的入门学习资料。\r\n \r\n 特性：\r\n * 数据响应式更新\r\n * 指令模板\r\n * MVVM\r\n * 轻量级\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```js\r\nvar vm = new Vue({\r\n id: 'counter',\r\n data: {\r\n counter: 1\r\n },\r\n methods: {\r\n add: function () {\r\n this.counter += 1;\r\n }\r\n }\r\n })\r\n ```\r\n \r\n 如上为一段模板以及js脚本，我们所要实现的目标就是将 vm 实例与id为app的DOM节点关联起来，当更改vm data 的counter属性的时候，\r\n input的值和p标签的文本会响应式的改变，method中的add方法则和button的click事件绑定。\r\n 简单的说就是, 当点击button按钮的时候，触发button的点击事件回调函数add,在add方法中使counter加1，counter变化后模板中的input\r\n 和p标签会自动更新。vm与模板之间是如何关联的则是通过 v-model、v-on-click、v-text这样的指令声明的。 \r\n\r\n### 实现思路详解\r\n\r\n * 查找含指令的节点\r\n * 对查找所得的节点进行指令解析、指令所对应的实现与节点绑定、节点指令值所对应的data属性与前一步关联的指令实现绑定、data属性值通过setter通知关联的指令进行更新操作\r\n * 含指令的每一个节点单独执行第二步\r\n * 绑定操作完成后，初始化vm实例属性值\r\n\r\n#### 指令节点查找\r\n\r\n 首先来看第一步，含指令节点的查找，因为指令声明是以属性的形式，所以可以通过属性选择器来进行查找，如下所示：\r\n\r\n ``\r\n 则可通过 querySelectorAll('[v-model]') 查找即可。\r\n```js\r\n root = this.$el = document.getElementById(opts.el),\r\n els = this.$els = root.querySelectorAll(getDirSelectors(Directives))\r\n ```\r\n root对于根节点，els对应于模板内含指令的节点。\r\n\r\n #### 指令解析，绑定\r\n \r\n * 1.指令解析\r\n 同样以``为例，解析即得到\r\n ```js\r\n var directive = {\r\n name: 'v-model',\r\n value: 'counter'\r\n }\r\n ```\r\n name对应指令名，value对应指令值。\r\n\r\n * 2.指令对应实现与当前节点的绑定(bindDirective)\r\n 指令实现可简单分为函数或是包含update函数的对象，如下便是`v-text`指令的实现代码：\r\n\r\n ```js\r\n text: function (el, value) {\r\n el.textContent = value || '';\r\n }\r\n ```\r\n 指令与节点的绑定即将该函数与节点绑定起来，即该函数负责该节点的更新操作，`v-text`的功能是更新文本值，所以如上所示\r\n 更改节点的textContent属性值。\r\n\r\n * 3. 响应式数据与节点的绑定(bindAccessors)\r\n 响应式数据这里拆分为 data 和 methods 对象，分别用来存储数据值和方法。\r\n ```js\r\n var vm = new Vue({\r\n id: 'counter',\r\n data: {\r\n counter: 1\r\n },\r\n methods: {\r\n add: function () {\r\n this.counter += 1;\r\n }\r\n }\r\n })\r\n ```\r\n 我们上面解析得到 v-model 对于的指令值为 counter,所以这里将data中的counter与当前节点绑定。\r\n \r\n 通过2、3两步实现了类型与 textDirective->el<-data.counter 的关联，当data.counter发生set(具体查看defineProperty set 用法)操作时，\r\n data.counter得知自己被改变了，所以通知el元素需要进行更新操作，el则使用与其关联的指令(textDirective)对自身进行更新操作，从而实现了数据的\r\n 响应式。\r\n\r\n * textDirective\r\n * el\r\n * data.counter\r\n 这三个是绑定的主体，数据发生更改，通知节点需要更新，节点通过指令更新自己。\r\n\r\n * 4.其它相关操作\r\n \r\n\r\n\r\n```js\r\nvar prefix = 'v';\r\n /**\r\n * Directives\r\n */\r\n\r\nvar Directives = {\r\n /**\r\n * 对应于 v-text 指令\r\n */\r\n text: function (el, value) {\r\n el.textContent = value || '';\r\n },\r\n /**\r\n * 对应于 v-model 指令\r\n */\r\n model: function (el, value, dirAgr, dir, vm, key) {\r\n let eventName = 'keyup';\r\n el.value = value || '';\r\n\r\n /**\r\n * 事件绑定控制\r\n */\r\n if (el.handlers && el.handlers[eventName]) {\r\n el.removeEventListener(eventName, el.handlers[eventName]);\r\n } else {\r\n el.handlers = {};\r\n }\r\n\r\n el.handlers[eventName] = function (e) {\r\n vm[key] = e.target.value;\r\n }\r\n\r\n el.addEventListener(eventName, el.handlers[eventName]);\r\n },\r\n on: {\r\n update: function (el, handler, eventName, directive) {\r\n if (!directive.handlers) {\r\n directive.handlers = {}\r\n }\r\n\r\n var handlers = directive.handlers;\r\n\r\n if (handlers[eventName]) {\r\n //绑定新的事件前移除原绑定的事件函数\r\n el.removeEventListener(eventName, handlers[eventName]);\r\n }\r\n //绑定新的事件函数\r\n if (handler) {\r\n handler = handler.bind(el);\r\n el.addEventListener(eventName, handler);\r\n handlers[eventName] = handler;\r\n }\r\n }\r\n }\r\n}\r\n\r\n\r\n/**\r\n * MiniVue \r\n */\r\nfunction TinyVue (opts) {\r\n /**\r\n * root/this.$el: 根节点\r\n * els: 指令节点\r\n * bindings: 指令与data关联的桥梁\r\n */\r\n var self = this,\r\n root = this.$el = document.getElementById(opts.el),\r\n els = this.$els = root.querySelectorAll(getDirSelectors(Directives)),\r\n bindings = {};\r\n\r\n /**\r\n * 指令处理\r\n */\r\n [].forEach.call(els, processNode);\r\n processNode(root);\r\n\r\n /**\r\n * vm响应式数据初始化\r\n */\r\n\r\n let _data = extend(opts.data, opts.methods);\r\n for (var key in bindings) {\r\n if (bindings.hasOwnProperty(key)) {\r\n self[key] = _data[key];\r\n }\r\n }\r\n\t/**\r\n * ready methods\r\n */\r\n if (opts.ready && typeof opts.ready == 'function') {\r\n this.ready = opts.ready;\r\n this.ready();\r\n }\r\n\t\r\n function processNode (el) {\r\n getAttributes(el.attributes).forEach(function (attr) {\r\n var directive = parseDirective(attr);\r\n if (directive) {\r\n bindDirective(self, el, bindings, directive);\r\n }\r\n })\r\n }\r\n}\r\n\r\n/**************************************************************\r\n * @privete\r\n * helper methods\r\n */\r\n\r\n/**\r\n * 获取节点属性\r\n * 'v-text'='counter' => {name: v-text, value: 'counter'}\r\n */\r\nfunction getAttributes (attributes) {\r\n return [].map.call(attributes, function (attr) {\r\n return {\r\n name: attr.name,\r\n value: attr.value\r\n }\r\n })\r\n}\r\n\r\n/**\r\n * 返回指令选择器，便于指令节点的查找\r\n */\r\nfunction getDirSelectors (directives) {\r\n /**\r\n * 支持的事件指令\r\n */\r\n let eventArr = ['click', 'change', 'blur']; \r\n\r\n\r\n return Object.keys(directives).map(function (directive) {\r\n /**\r\n * text => 'v-text'\r\n */\r\n return '[' + prefix + '-' + directive + ']';\r\n }).join() + ',' + eventArr.map(function (eventName) {\r\n return '[' + prefix + '-on-' + eventName + ']';\r\n }).join();\r\n}\r\n\r\n/**\r\n * 节点指令绑定\r\n */\r\nfunction bindDirective (vm, el, bindings, directive) {\r\n //从节点属性中移除指令声明\r\n el.removeAttribute(directive.attr.value);\r\n \r\n /**\r\n * v-text='counter'\r\n * v-model='counter'\r\n * data = { \r\n counter: 1 \r\n } \r\n * 这里的 counter 即指令的 key\r\n */\r\n var key = directive.key,\r\n binding = bindings[key];\r\n\r\n if (!binding) {\r\n /**\r\n * value 即 counter 对应的值\r\n * directives 即 key 所绑定的相关指令\r\n 如：\r\n bindings['counter'] = {\r\n value: 1,\r\n directives: [textDirective, modelDirective]\r\n }\r\n */\r\n bindings[key] = binding = {\r\n value: '',\r\n directives: []\r\n }\r\n }\r\n directive.el = el;\r\n binding.directives.push(directive);\r\n\r\n //避免重复定义\r\n if (!vm.hasOwnProperty(key)) {\r\n /**\r\n * get/set 操作绑定\r\n */\r\n bindAccessors(vm, key, binding);\r\n }\r\n}\r\n\r\n/**\r\n * get/set 绑定指令更新操作\r\n */\r\nfunction bindAccessors (vm, key, binding) {\r\n Object.defineProperty(vm, key, {\r\n get: function () {\r\n return binding.value;\r\n },\r\n set: function (value) {\r\n binding.value = value;\r\n binding.directives.forEach(function (directive) {\r\n directive.update(\r\n directive.el,\r\n value,\r\n directive.argument,\r\n directive,\r\n vm,\r\n key\r\n )\r\n })\r\n }\r\n })\r\n}\r\n\r\nfunction parseDirective (attr) {\r\n if (attr.name.indexOf(prefix) === -1) return ;\r\n\r\n /**\r\n * 指令解析\r\n v-on-click='onClick'\r\n 这里的指令名称为 'on', 'click'为指令的参数，onClick 为key\r\n */\r\n\r\n //移除 'v-' 前缀, 提取指令名称、指令参数\r\n var directiveStr = attr.name.slice(prefix.length + 1),\r\n argIndex = directiveStr.indexOf('-'),\r\n directiveName = argIndex === -1\r\n ? directiveStr\r\n : directiveStr.slice(0, argIndex),\r\n directiveDef = Directives[directiveName],\r\n arg = argIndex === -1\r\n ? null\r\n : directiveStr.slice(argIndex + 1);\r\n\r\n /**\r\n * 指令表达式解析，即 v-text='counter' counter的解析\r\n * 这里暂时只考虑包含key的情况\r\n */\r\n var key = attr.value;\r\n return directiveDef\r\n ? {\r\n attr: attr,\r\n key: key,\r\n dirname: directiveName,\r\n definition: directiveDef,\r\n argument: arg,\r\n /**\r\n * 指令本身是一个函数的情况下，更新函数即它本身，否则调用它的update方法\r\n */\r\n update: typeof directiveDef === 'function'\r\n ? directiveDef\r\n : directiveDef.update\r\n }\r\n : null;\r\n}\r\n\r\n/**\r\n * 对象合并\r\n */\r\nfunction extend (child, parent) {\r\n parent = parent || {};\r\n child = child || {};\r\n for(var key in parent) {\r\n if (parent.hasOwnProperty(key)) {\r\n child[key] = parent[key];\r\n }\r\n }\r\n return child;\r\n}\r\n```","title","the super tiny vue.js(添加es6版本)","last_reply_at","2016-11-14 04:07:47.236","good","top",9,"visit_count",6273,"2016-11-10 09:56:16.542","author",{"_13":55,"_22":56},"xiaofuzi","https://avatars2.githubusercontent.com/u/4171913?v=4"]