当前位置:

首页> 技术文档

自己动手来做一个MVVM框架

发布时间: 2018-04-12 05:53:04

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

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

提供指令解析对象。

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

图片22.png (77.62 KB, 下载次数: 0)

下载附件

昨天 17:39 上传

一切就绪,双向绑定实现。


联系我们

电话:0335-3295533

手机:13930329994(微信同步)

Q Q:1062336882

地址:河北省秦皇岛市海港区金龙景园