奔三路 - 你30岁前的学习路!

奔三路学习网

当前位置: 主页 > vue面试通 > vue项目作品 >

自己动手来做一个MVVM框架

时间:2018-04-12 20:44来源: 作者:Vuez
MVVM采用双向绑定(data-binding):View发生变动,自动反映在 ViewModel上,反之亦然。当下流行的Vue就是采用的这种模式。

1.MVVM模式

MVVM 模式是 MV* 模式的一个变种。

自己动手来做一个MVVM框架

相对MVP模式,它采用双向绑定(data-binding):View发生变动,自动反映在 ViewModel上,反之亦然。当下流行的Vue就是采用的这种模式。

2.MVVM具体实现

MVVM框架最常见的特性之一就是数据的双向绑定,效果如下:

自己动手来做一个MVVM框架

代码如下:

自己动手来做一个MVVM框架

常见的数据绑定方式有如下3种:

l发布者-订阅者模式(Backbone.js)--监听

l脏值检查(Angualr.js) --周期循环检查

l数据劫持(Vue.js) -- 数据劫持结合发布者-订阅者模式

自己动手来做一个MVVM框架

2.1.实现MVVM结构

自己动手来做一个MVVM框架

在原型上提供代理方法,采用Object.defineProperty来胁持值的获取和设值操作:

自己动手来做一个MVVM框架

2.2.实现属性劫持

创建一个observer.js完成模型数据的胁持。

首先定义一个observe方法,接受模型数据。

自己动手来做一个MVVM框架

定义一个defineReactive方法来完成模型属性的胁持:

自己动手来做一个MVVM框架

2.3.实现模板解析

首先接MVVM中调用模板解析器。

自己动手来做一个MVVM框架

接下来创建一个templateCompiler.js.

大概思路:

Ø准备需要的目标模板盒子和vm对象。

Ø把模板提取到内存fragment中,方便做批量编译

Ø执行初始化编译方法,逐行对fragment中的节点进行编译。

目前主要针对文本节点。例如:{{message}}

元素节点上的指令。例如:v-model

Ø最后把结果内容放回到页面。

自己动手来做一个MVVM框架

在原型中实现方法:

自己动手来做一个MVVM框架


使用documentFragment来创建内存代码片段,提高解析效率

自己动手来做一个MVVM框架

初始化方法,逐行提取出模板盒子中每一个节点,根据类型做不同解析

自己动手来做一个MVVM框架

提供2种解析方法,分别把“表达式”内容当成文本指令解析,和元素节点的“指令属性”解析。

自己动手来做一个MVVM框架


提供指令解析对象。

自己动手来做一个MVVM框架


根据不同指令,提供对应的更新规则。

自己动手来做一个MVVM框架

OK,做到这一步,我们初步实现了对模板的解析,实现了初次模型渲染到视图。

自己动手来做一个MVVM框架

但是目前还无法在对一次渲染之后的操作进行相应。所以,我们还需要一个“观察者”,对将来发生的变化进行响应!!

2.4.
实现变化监听

创建观察者构造,收集观察所需信息。

自己动手来做一个MVVM框架

在原型上扩展观察者的获取和更新方法

自己动手来做一个MVVM框架

联通订阅体系,首先回到observer.js中,定义发布对象。

自己动手来做一个MVVM框架

在observe逻辑中

自己动手来做一个MVVM框架

一切准备就绪,去为我们的表达式或者指令关注的属性,添加观察者。

自己动手来做一个MVVM框架

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

(责任编辑:admin)
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 验证码:点击我更换图片
发布者资料
Vuez 查看详细资料 发送留言 加为好友 用户等级:注册会员 注册时间:2018-03-30 22:03 最后登录:2018-04-14 20:04

关注奔三路小程序,方便你我他