让每一名学员高薪就业
返回列表 发新帖

自己动手来做一个MVVM框架

[复制链接]

118

主题

420

帖子

2665

积分

版主

Rank: 7Rank: 7Rank: 7

积分
2665

版主论坛荣誉内测

发表于 2018-4-11 17:41:10  | 显示全部楼层 | 阅读模式
1. MVVM模式
MVVM 模式是 MV* 模式的一个变种。
图片1.png
相对MVP模式,它采用双向绑定(data-binding):View发生变动,自动反映在 ViewModel上,反之亦然。当下流行的Vue就是采用的这种模式。
2. MVVM具体实现
MVVM框架最常见的特性之一就是数据的双向绑定,效果如下:
图片2.png
代码如下:
图片3.png
常见的数据绑定方式有如下3种:
l 发布者-订阅者模式(Backbone.js) -- 监听
l 脏值检查(Angualr.js)        -- 周期循环检查
l 数据劫持(Vue.js)            -- 数据劫持结合发布者-订阅者模式
图片4.png
2.1. 实现MVVM结构
图片5.png
在原型上提供代理方法,采用Object.defineProperty来胁持值的获取和设值操作:
图片6.png
2.2. 实现属性劫持
创建一个observer.js完成模型数据的胁持。
首先定义一个observe方法,接受模型数据。
图片7.png
定义一个defineReactive方法来完成模型属性的胁持:
图片8.png
2.3. 实现模板解析
首先接MVVM中调用模板解析器。
图片9.png
接下来创建一个templateCompiler.js.
大概思路:
Ø 准备需要的目标模板盒子和vm对象。
Ø 把模板提取到内存fragment中,方便做批量编译
Ø 执行初始化编译方法,逐行对fragment中的节点进行编译。
目前主要针对文本节点。例如:{{message}}
元素节点上的指令。例如:v-model
Ø 最后把结果内容放回到页面。
图片10.png
在原型中实现方法:
图片11.png

使用documentFragment来创建内存代码片段,提高解析效率
图片12.png
初始化方法,逐行提取出模板盒子中每一个节点,根据类型做不同解析
图片13.png
提供2种解析方法,分别把“表达式”内容当成文本指令解析,和元素节点的“指令属性”解析。
图片14.png

提供指令解析对象。
图片15.png

根据不同指令,提供对应的更新规则。
图片16.png
OK,做到这一步,我们初步实现了对模板的解析,实现了初次模型渲染到视图。
图片17.png
但是目前还无法在对一次渲染之后的操作进行相应。所以,我们还需要一个“观察者”,对将来发生的变化进行响应!!
2.4.
实现变化监听
创建观察者构造,收集观察所需信息。
图片18.png
在原型上扩展观察者的获取和更新方法
图片19.png
联通订阅体系,首先回到observer.js中,定义发布对象。
图片20.png
observe逻辑中
图片21.png
一切准备就绪,去为我们的表达式或者指令关注的属性,添加观察者。
图片22.png
一切就绪,双向绑定实现。

感谢源码时代教学讲师提供此文章!
本文为原创文章,转载请注明出处!

“尔康,你现在幸福吗?”“紫薇,你忘了?我一直就姓福啊。”
回复

使用道具 举报

发表回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

最新活动

联系我们

Java培训  |   PHP培训  |   UI培训  |   H5培训  |   Python培训  |   大数据培训  |   如何报名  |   视频下载
快速回复 返回顶部 返回列表