正文

一套代码小程序&Web&Native运行的探索06——组件系统

IP云
IP云V管理员/7 阅读
08/02
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

接上文：一套代码小程序&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是一致的，只不过需要一点特殊处理，这里我们看其渲染时候的变化：

if (typeof tag == 'string') {
let Ctor = resolveAsset(this.$options, 'components', tag)
if (Ctor) {
return this._createComponent(Ctor, data, children, tag)
}
}

这里对tag做了判断，如果是字符串，并且我们参数里面传递了components参数，这里便会拿出来执行createComponent逻辑：

//创建组件
//子组件option,属性,子元素,tag
_createComponent(Ctor, data, children, sel) {
Ctor.data = mergeOptions(Ctor.data);
let componentVm;
let Factory = this.constructor
let parentData = this.$data
data.hook.insert = (vnode) => {
//...
}
Ctor._vnode = new VNode(sel,null,data, [], undefined, createElement(sel));
return Ctor._vnode
}

这里创建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插入的时候回被调用：

_createComponent(Ctor, data, children, sel) {
Ctor.data = mergeOptions(Ctor.data);
let componentVm;
let Factory = this.constructor
let parentData = this.$data
data.hook.insert = (vnode) => {
Ctor.data = Ctor.data || {};
var el =createElement('sel')
vnode.elm.append(el)
Ctor.el = el;
componentVm = new Factory(Ctor);
vnode.key = componentVm.uid;
componentVm._isComponent = true
componentVm.$parent = this;
(this.$children || (this.$children = [])).push(componentVm);
//写在调用父组件值
for (let key in data.attrs) {
if (Ctor.data[key]) {
warn(`data:${key},已存在`);
continue;
}
}
}
 Ctor._vnode = new VNode(sel,null,data, [], undefined, createElement(sel));
return Ctor._vnode
}

这里先创建了一个空标签（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

经过简单的学习，我们大概了解了组件的流程，接下来我们做下阶段的整理，把之前学的东西连起来

一套代码小程序&Web&Native运行的探索06——组件系统的更多相关文章

  1. 一套代码小程序&amp&semi;Web&amp&semi;Native运行的探索05——snabbdom

    接上文:一套代码小程序&Web&Native运行的探索04——数据更新 对应Git代码地址请见:https://github.com/yexiaochai/wxdemo/tree/ma ...

  2. 一套代码小程序&amp&semi;Web&amp&semi;Native运行的探索04——数据更新

    接上文:一套代码小程序&Web&Native运行的探索03 对应Git代码地址请见:https://github.com/yexiaochai/wxdemo/tree/master/m ...

  3. 一套代码小程序&amp&semi;Web&amp&semi;Native运行的探索03——处理模板及属性

    接上文:一套代码小程序&Web&Native运行的探索02 对应Git代码地址请见:https://github.com/yexiaochai/wxdemo/tree/master/m ...

  4. 一套代码小程序&amp&semi;Web&amp&semi;Native运行的探索02

    接上文:一套代码小程序&Web&Native运行的探索01,本文都是一些探索性为目的的研究学习,在最终版输出前,内中的内容可能会有点乱 参考: https://github.com/f ...

  5. 一套代码小程序&amp&semi;Web&amp&semi;Native运行的探索07——mpvue简单调研

    前言 接上文:[一套代码小程序&Native&Web阶段总结篇]可以这样阅读Vue源码 最近工作比较忙,加之上个月生了小孩,小情人是各种折腾他爸妈,我们可以使用的独立时间片不多,虽然这 ...

  6. 一套代码小程序&amp&semi;Web&amp&semi;Native运行的探索01

    前言 前面我们对微信小程序进行了研究:[微信小程序项目实践总结]30分钟从陌生到熟悉 并且用小程序翻写了之前一个demo:[组件化开发]前端进阶篇之如何编写可维护可升级的代码 之前一直在跟业务方打交道 ...

  7. 【一套代码小程序&amp&semi;Native&amp&semi;Web阶段总结篇】可以这样阅读Vue源码

    前言 前面我们对微信小程序进行了研究:[微信小程序项目实践总结]30分钟从陌生到熟悉 在实际代码过程中我们发现,我们可能又要做H5站又要做小程序同时还要做个APP,这里会造成很大的资源浪费,如果设定一 ...

  8. 小程序 web 端实时运行工具

    微信小程序 web 端实时运行工具 https://chemzqm.github.io/wept/

  9. 微信小程序-基于高德地图API实现天气组件&lpar;动态效果&rpar;

    微信小程序-基于高德地图API实现天气组件(动态效果) ​ 在社区翻腾了许久,没有找到合适的天气插件.迫不得已,只好借鉴互联网上的web项目,手动迁移到小程序中使用.现在分享到互联网社区中,帮助后续有 ...

随机推荐

  1. C&num;：Md5和Sha1两种加密方式

    1.新建控制台应用程序 2.新建类 EncryptHelper.cs public static class EncryptHelper { /// <summary> /// 基于Md5 ...

  2. iOS添加自定义字体方法

    1:获取字体文件 从各种渠道下载字体文件ttf, 网站或者从别的ipa里扣出来.(以fzltxh.ttf为例) 2:将fzltxh.ttf文件拷贝到工程中 3:在Info.plist中添加项: Fon ...

  3. 详解Makefile 函数的语法与使用

    使用函数: 在Makefile中可以使用函数来处理变量,从而让我们的命令或是规则更为的灵活和具有智能.make所支持的函数也不算很多,不过已经足够我们的操作了.函数调用后,函数的返回值可以当做变量来使 ...

  4. HDU 3037&lpar;Lucas定理&rpar;

    对于很大的组合数不能用C(n, m) = C(n - 1, m) + C(n-1, m -1)来求,这里就用到Lucas定理. 模板题: hdu3037:模板如下: #include <cstd ...

  5. android 解析json数据格式

    json数据格式解析我自己分为两种: 一种是普通的,一种是带有数组形式的: 普通形式的:服务器端返回的json数据格式如下: {"userbean":{"Uid&quot ...

  6. C结构体中位域

    C结构体中位域的一点小知识,最近在看资料时遇到结构体中的一种特殊操作——位域,在下面的程序中我将根据自己的理解进行简单介绍.程序只是为了了解位域的一些性质,运行时有些编译器可能会报错. 程序代码如下( ...

  7. Element DOM Tree jQuery plugin – Firebug like functionality &vert; RockingCode

    Element DOM Tree jQuery plugin – Firebug like functionality | RockingCode Element DOM Tree jQuery pl ...

  8. MongoDB复制集之将现有的单节点服务器转换为复制集

    服务器情况:   现有的单节点 Primary     192.168.126.9:27017   新增的节点    Secondry  192.168.126.8:27017    仲裁节点     ...

  9. Linux chown

    在学习 兄弟连 linux教学视频 的时候,我将所学的 linux 命令记录在我的博客中,方便自己查阅. 权限管理命令: chown 基础的命令 命令名称:chown 命令英文原意:change fi ...

  10. 简单对比git pull和git pull --rebase的使用

    使用下面的关系区别这两个操作:git pull = git fetch + git mergegit pull --rebase = git fetch + git rebase 现在来看看git m ...