一套代码小程序&Web&Native运行的探索06——组件系统
接上文:一套代码小程序&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——组件系统的更多相关文章
- 一套代码小程序&Web&Native运行的探索05——snabbdom
接上文:一套代码小程序&Web&Native运行的探索04——数据更新 对应Git代码地址请见:https://github.com/yexiaochai/wxdemo/tree/ma ...
- 一套代码小程序&Web&Native运行的探索04——数据更新
接上文:一套代码小程序&Web&Native运行的探索03 对应Git代码地址请见:https://github.com/yexiaochai/wxdemo/tree/master/m ...
- 一套代码小程序&Web&Native运行的探索03——处理模板及属性
接上文:一套代码小程序&Web&Native运行的探索02 对应Git代码地址请见:https://github.com/yexiaochai/wxdemo/tree/master/m ...
- 一套代码小程序&Web&Native运行的探索02
接上文:一套代码小程序&Web&Native运行的探索01,本文都是一些探索性为目的的研究学习,在最终版输出前,内中的内容可能会有点乱 参考: https://github.com/f ...
- 一套代码小程序&Web&Native运行的探索07——mpvue简单调研
前言 接上文:[一套代码小程序&Native&Web阶段总结篇]可以这样阅读Vue源码 最近工作比较忙,加之上个月生了小孩,小情人是各种折腾他爸妈,我们可以使用的独立时间片不多,虽然这 ...
- 一套代码小程序&Web&Native运行的探索01
前言 前面我们对微信小程序进行了研究:[微信小程序项目实践总结]30分钟从陌生到熟悉 并且用小程序翻写了之前一个demo:[组件化开发]前端进阶篇之如何编写可维护可升级的代码 之前一直在跟业务方打交道 ...
- 【一套代码小程序&Native&Web阶段总结篇】可以这样阅读Vue源码
前言 前面我们对微信小程序进行了研究:[微信小程序项目实践总结]30分钟从陌生到熟悉 在实际代码过程中我们发现,我们可能又要做H5站又要做小程序同时还要做个APP,这里会造成很大的资源浪费,如果设定一 ...
- 小程序 web 端实时运行工具
微信小程序 web 端实时运行工具 https://chemzqm.github.io/wept/
- 微信小程序-基于高德地图API实现天气组件(动态效果)
微信小程序-基于高德地图API实现天气组件(动态效果) 在社区翻腾了许久,没有找到合适的天气插件.迫不得已,只好借鉴互联网上的web项目,手动迁移到小程序中使用.现在分享到互联网社区中,帮助后续有 ...
随机推荐
- [Usaco2015 Jan]Grass Cownoisseur 图论 tarjan spfa
先缩点,对于缩点后的DAG,正反跑spfa,枚举每条边进行翻转即可 #include<cstdio> #include<cstring> #include<iostrea ...
- BZOJ_2039_[2009国家集训队]employ人员雇佣_ 最小割
BZOJ_2039_[2009国家集训队]employ人员雇佣_ 最小割 Description 作为一个富有经营头脑的富翁,小L决定从本国最优秀的经理中雇佣一些来经营自己的公司.这些经理相互之间合作 ...
- BZOJ_2588_Spoj 10628. Count on a tree_树剖+主席树
BZOJ_2588_Spoj 10628. Count on a tree_树剖+主席树 题意: 给定一棵N个节点的树,每个点有一个权值,对于M个询问(u,v,k),你需要回答u xor lastan ...
- HttpClient4 TIME_WAIT和CLOSE_WAIT
最近,公司的接口服务器(客户端,向外发送数据)频繁出现了connect timeout 以及readtime out 的情况,经过运维平台检测,并没有网络延时的情况.于是,开始怀疑连接池出了问题. 使 ...
- MVC动态绑定下拉框
Controller: //获取下拉信息表 //_vendorsAppService.GetAllObj() 是获取下拉列表结果集 ViewData["vendlist"] = n ...
- 前端ps实用小技巧
下面总结了几个日常使用PS的小技巧,希望对大家有所帮助(重点推荐第一个小技巧) 场景一:用ps测量PSD图中的元素宽高间距时,一般是手动使用 测量,但其实是有快捷键的,如下图 首先选中元素相应图层,然 ...
- asp.net core系列 42 Web 应用 分部视图
一.分部视图 对于MVC 视图和 Razor Pages 页面,都有分部视图功能.通常将 MVC 视图和 Razor Pages 页面统称为“标记文件”,下面会常提到该名词.使用分部视图的优势包括:( ...
- EF Core in Action 中文翻译 第一部分导航
Entityframework Core in action Entityframework Core in action是 Jon P smith 所著的关于Entityframework Core ...
- ajax分页借鉴
大家好这是我分页是用的代码希望大家可以相互交流ajax局部刷新 var pageindex = 1; var where = ""; var Pname = "" ...
- maven 依赖中scope标签的配置范围详解
在创建Maven项目时,需要在pom.xml 文件中添加相应的依赖,其中有一个scope标签,该标签是设置该依赖范围 (maven项目包含三种classpath{编译classpath,测试class ...