【教学向】150行代码教你实现一个低配版的MVVM库(1)- 原理篇


适读人群

本文适合对MVVM有一定了解(如有主流框架ng,vue等使用经验配合本文服用则效果更佳),虽然会用这类框架,但是对框架底层核心实现又不太清楚,或者能说出个所以然,但是让他自己动手写又没有头绪的码友。如果还没听说过MVVM,不妨先收藏着。。。
【教学向】150行代码教你实现一个低配版的MVVM库(1)- 原理篇

名词定义

  • 先给低配版的库起一个响亮的名字,以便于开展教学,入乡随俗我们就叫ta — SegmentFault.js 吧 (以下简称sf.js
    【教学向】150行代码教你实现一个低配版的MVVM库(1)- 原理篇

  • 设置在DOM Element上的自定义属性前缀统一以 sf- 开头 (如 <input type=”text” sf-value=”xxx”>)

为什么是低配版?

1. 没有sf-repeat
2. 不支持select,checkbox,radio等控件的双向绑定
3. 没有sf-if
4. 很多都没有

【教学向】150行代码教你实现一个低配版的MVVM库(1)- 原理篇

由于是教学向,力图用最简短易读的代码来实现MVVM最主要最基本的功能,故砍掉了部分实现。

先看演示图,图中就是使用sf.js写得DEMO
【教学向】150行代码教你实现一个低配版的MVVM库(1)- 原理篇

100多行的低配版不能要求太多,如果看不上低配版的库,请关闭本教程。
【教学向】150行代码教你实现一个低配版的MVVM库(1)- 原理篇

老生常谈

什么是双向绑定

首先明白一个概念,什么是双向绑定?在说双向绑定之前,我们先说说单向显示
单向显示 说白了就是view动态地显示变量。比如在ng或其它一些主流框架里类似这种写法

    //scope.message= "segmentfault"; 
    <h3 ng-bind="message"></h3> 
    <!-- 运行时生成 -->
    <h3>segmentfault</h3>

为什么说是单向呢,因为都是 viewModel上某个变量(message) -> view (h3)的一个过程,viewModel上的变量被view所呈现。

再来看看 逆向修改
前面说了单向是viewMode->view的过程,那逆向就是 viewModel <- view的过程,换句话说就是viewModel被view修改的过程。例如angular中

<input type="text" ng-model="message">

一旦用户在input控件中输入值,便会实时地改变viewModel中message这个变量的值。这是一个view -> viewModel 的过程。

所谓的双向绑定就是一个 viewMode ->(显示) view ->(修改)viewModel 的过程。

双向绑定 = 单向显示 + 逆向修改
注意: 单向显示可能发生在所有的类型DOM节点上,而逆向修改只可能发生在INPUT,SELECT,TEXTAREA等交互型控件上。

如果整明白什么是双向绑定了,我们就来谈谈设计思路,没有整明白的同学请再阅读一遍.

单向显示的设计思路(viewModel -> view)

先看看API的设计

<!-- view -->
<div>
    <h3 sf-text="vm.message"></h3>
</div>

<script>
    // --- viewModel ---
    function ViewModel(){
        this.message = "segmentfault";
    }
    var vm = new ViewModel();
</script>

要实现这个功能,我们的sf库应该需要哪几步操作呢?(先自己想想,独立思考下)

1. 注册ViewModel,我们的库需要知道哪些object是viewModel
2. 扫描整个DOM Tree找到有哪些DOM节点上被配置了sf-xxxx这个attribute
3. 纪录这些被单向绑定的DOM节点和viewModel之间的映射关系
4. 使用DOM API, element.innerText = vm.prop, element.value = vm.prop, element.xxxx = vm.prop 来显示数据

思考题1

Q:如果我们要单向绑定不是innerText,value 而是作为样式的class,style呢?
A:没错,使用sf-class=”vm.myClass” sf-style=”vm.myStyle”就好了,其它原生属性也以此类推
“sf-” + native attribute is good!

逆向修改的设计思路(viewModel <- view)

主流的一些mvvm框架上一般这么设计API,还是拿angular举例子

<input type="text" ng-model="message">

这里我个人并不认同这种xx-model的命名方式来作为双向绑定的一种标识,比如angular的ng-model,或Vue的v-model,撇开前缀不说,这个model很让人困惑,我们知道input控件是本身就有value这个native的属性的,这个属性就是代表着input输入和输出的值,如果要给一个input进行双向绑定我们应该很自然而然地使用一个 *-value就可以了,完全没有必要弄出一个新的attribute叫做*-model的,从而增加学习成本。

所以,我们就设计一个叫做sf-value的attribute来做API

<input type="text" sf-value="vm.message">

拍脑袋想想,view要改变数据只可能发生在可以和用户交互的一些html控件上,比如input家族(text, radio, checkbox), select, textarea上。 像h1~hn家族,这辈子是没有机会的。
【教学向】150行代码教你实现一个低配版的MVVM库(1)- 原理篇

要实现view改写viewModel,我们的库应该需要哪几步操作呢?(也先自己想想,千万不要丢掉独立思考能力)

1.扫描整个DOM Tree,找到哪些INPUT,SELECT,TEXTAREA节点上被配置了sf-value这个attribute
2.纪录这些被双向绑定的DOM节点和viewModel之间的映射关系
3.sf.js库自动给这个写DOM加上onchange或者oninput的事件监听
4.一旦监听到change/input事件,立即获取这个DOM的value值,把这个element.value赋给与之绑定的viewModel的变量上。

思考题2

Q:那么问题来了,vm.message被input修改了,谁去通知其它同样绑定了vm.message的view呢?
A:请看下一段

同步机制

【教学向】150行代码教你实现一个低配版的MVVM库(1)- 原理篇

脏检查大法 这三个字想必大家已经如雷贯耳,我2年多前出去面试的时候被问及最多的就是angular的脏检查,什么是脏检查?angular脏检查的时机是什么?

脏检查的原理就是,拷贝一份copy_viewModel在内存中,一旦有用户点击,输入操作,或ajax请求,setInterval,setTimeout等这些可能导致viewModel发生改变的行为,框架都会把copy_viewModel和最新的viewModel进行深度比较,一旦发现有属性(如vm.message)发生变化,则重新渲染与message绑定的DOM节点。

这也是为什么,一旦你没有使用ng自带的$http,$interval,$timeout,ng-click这些angular自己封装的API去操作viewModel,angular都不会自动去同步view,因为已经超出他的管辖范围了,你必须手动调用apply函数去强制执行一次脏检查,以同步view。

setter大法
听说VUE是使用的这种同步机制,其核心原理就是使用Object.defineProperty(obj, prop, descriptor)(不了解defineProperty的请戳)这个API,在setter中加点料,一旦有任何地方执行 vm.message = “new value”语句,则setter都会被调用,由setter去触发重新渲染view的逻辑。

相较这两种同步机制,似乎setter更加轻便,性能更好。所以本文使用了setter的方式来实现同步机制(关键是实现setter机制使用的代码较少)。

设计思路

给setter加点料
【教学向】150行代码教你实现一个低配版的MVVM库(1)- 原理篇
http://jsbin.com/gosigoh/edit…

总体设计图

所以归纳来说一个MVVM库主要由3块组成
MVVM库 = 单向显示 + 逆向修改 + 同步机制
下图为SegmentFault.js的实现机制
其中Renderer负责单向显示和逆向修改,Watcher负责监视viewModel为同步机制的核心模块,
Scanner负责sf.js初始化时扫描DOM Tree生成view和viewModel的映射关系。
SegmentFault模块则负责维护view-viewModel Map,以及各个模块间的调度

【教学向】150行代码教你实现一个低配版的MVVM库(1)- 原理篇

思考题3

Q:了解了MVVM的实现机制,你能否自己动手也试着用百来行代码实现一个MVVM库呢?

好了!本教程第一部分设计篇就写到这里,(下一篇代码篇正在整理中,也将会在本周内发布)
我会用Typescript给出一版实现。

写在最后

这篇文章的目的

2年前写了我受够了angular的笨重,学习曲线陡峭等缺点,自己一怒之下写下一个轻量的MVVM库,给她起名叫【Ukulele.js】(跟我一起念『尤克里里.杰爱死』,当然本文不是这个库的安利文,请安心服用),一开始写这个库出于好玩,后来也加入了越来越多的功能,诸如web component的支持,我渐渐发现,其实要写一个MVVM库也并不是很难,难的是你有没有决心敲下第一行代码。后来我把她和【精通angularjs】一起写在里简历里,然后就去找工作了。面试的时候被问及最多的问题就是:”说说MVVM的实现机制”。

我今天写下此文,1是希望有机会看到这篇文章的码友能真正掌握MVVM的核心机制,2是鼓励下大家能静下心来,自己动手写写库,写写框架,有些你现在觉得蛮高大上的东西,你仔细一分析,动动脑,真的没有那么高大上,普通的码农也能自己实现


发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>