在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
接上文:一套代码小程序&Web&Native运行的探索05——snabbdom 对应Git代码地址请见:https://github.com/yexiaochai/wxdemo/tree/master/mvvm https://github.com/fastCreator/MVVM(极度参考,十分感谢该作者,直接看Vue会比较吃力的,但是看完这个作者的代码便会轻易很多,可惜这个作者没有对应博客说明,不然就爽了) https://www.tangshuang.net/3756.html https://www.cnblogs.com/kidney/p/8018226.html http://www.cnblogs.com/kidney/p/6052935.html https://github.com/livoras/blog/issues/13 通过之前的学习,我们断断续续的了解到了一套MVVM框架需要了解的精华(我觉得的精华): ① 模板解析,由模板生成框架element ② 生成渲染函数,由element生成render匿名函数,这里便涉及到了指令的解析,render函数执行后生成了最终Vnode需要的数据字典,这里完成了HTML->Vnode的全部工作 ③ 使用snabbdom进行页面渲染,后续数据更新调用发布订阅系统更新数据 而MVVM系统还有个比较关键的点是组件系统,一般认为MVVM的量大特点其实是响应式数据更新(Vnode相关),然后就是组件体系,这两者需要完成的工作都是让我们更搞笑的开发代码,一个为了解决纷乱的dom操作,一个为了解决负责的业务逻辑结构,所以我们今天便来学习组件体系相关逻辑 其实组件体系的实例化事实上跟new MVVM是一致的,只不过需要一点特殊处理,这里我们看其渲染时候的变化: 1 if (typeof tag == 'string') { 2 let Ctor = resolveAsset(this.$options, 'components', tag) 3 if (Ctor) { 4 return this._createComponent(Ctor, data, children, tag) 5 } 6 } 这里对tag做了判断,如果是字符串,并且我们参数里面传递了components参数,这里便会拿出来执行createComponent逻辑: 1 //创建组件 2 //子组件option,属性,子元素,tag 3 _createComponent(Ctor, data, children, sel) { 4 Ctor.data = mergeOptions(Ctor.data); 5 let componentVm; 6 let Factory = this.constructor 7 let parentData = this.$data 8 data.hook.insert = (vnode) => { 9 //... 10 } 11 Ctor._vnode = new VNode(sel,null,data, [], undefined, createElement(sel)); 12 return Ctor._vnode 13 } 这里创建vnode的时候没有做什么特殊处理,所以我们的会形成这样的dom结构: <my-component></my-component> <div m-for="(val, key, index) in arr">索引 1 :叶小钗</div> <div m-for="(val, key, index) in arr">索引 2 :素还真</div> <div m-for="(val, key, index) in arr">索引 3 :一页书</div> 但是这里有一个hook,在my-component作为dom插入的时候回被调用: 1 _createComponent(Ctor, data, children, sel) { 2 Ctor.data = mergeOptions(Ctor.data); 3 let componentVm; 4 let Factory = this.constructor 5 let parentData = this.$data 6 data.hook.insert = (vnode) => { 7 Ctor.data = Ctor.data || {}; 8 var el =createElement('sel') 9 vnode.elm.append(el) 10 Ctor.el = el; 11 componentVm = new Factory(Ctor); 12 vnode.key = componentVm.uid; 13 componentVm._isComponent = true 14 componentVm.$parent = this; 15 (this.$children || (this.$children = [])).push(componentVm); 16 //写在调用父组件值 17 for (let key in data.attrs) { 18 if (Ctor.data[key]) { 19 warn(`data:${key},已存在`); 20 continue; 21 } 22 } 23 } 24 Ctor._vnode = new VNode(sel,null,data, [], undefined, createElement(sel)); 25 return Ctor._vnode 26 } 这里先创建了一个空标签(sel)直接插入my-component中,然后执行与之前一样的实例化流程: componentVm = new Factory(Ctor);
这个会在patch后将实际的dom节点更新上去: this.$el = patch(this.$el, vnode); //$el现在为sel标签(dom标签) 这个就是snabbdom hook所干的工作,可以看到组件系统这里有这些特点: ① 组件是一个独立的mvvm实例,通过parent可以找到其父亲mvvm实例,可能跟实例,也可能是另一个组件 ② 跟实例可以根据$children参数找到其下面所有的组件 ③ 组件与跟实例通过data做交流,原则不允许在组件内部改变属性值,需要使用事件进行通信,事件通信就是在组件中的点击事件不做具体的工作,而是释放$emit(),这种东西让跟实例调用,最终还是以setData的方式改变基本数据,从而引发组件同步更新 所以只要把之前的内容搞懂了,组件一块会比较轻松,我们之前没涉及到属性,这里我们来试试数据传递: html = ` <div ontap="onclick"> <my-component name="{{name}}"></my-component> <div m-for="(val, key, index) in arr">索引 {{key + 1}} :{{val}}</div> </div> ` let vm = new MVVM({ el: '#app', template: html, components: { 'my-component': { props: ['name'], template: '<div>{{name}}-children component!</div>' } }, data: { name: '叶小钗', age: 30, arr: [ '叶小钗', '素还真', '一页书' ] }, methods: { onclick: function(e) { this.setData({ name: '素还真', age: this.age + 1 }); } } }) 具体代码各位看这里吧:https://github.com/yexiaochai/wxdemo/tree/master/mvvm 经过简单的学习,我们大概了解了组件的流程,接下来我们做下阶段的整理,把之前学的东西连起来 |
请发表评论