js架构设计模式——前端MVVM框架设计及实现（二）

前端MVVM框架设计及实现（二）

在前端MVVM框架设计及实现（一）中有一个博友提出一个看法：

“html中使用mvvm徒增开发成本”

我想这位朋友要表达的意思应该是HTML定义了大量的语法标记，HTML中放入了太多的逻辑，从而增加了复杂度

将逻辑放入HTML是一个不好的做法，也不建议这么做，即便从复用的角度来讲，因为HTML与代码紧密耦合，要想重新组成一个应用程序非常困难

当然，在构建一个应用程序时，你也可以不使用框架，但不可否认，使用框架将使得你的开发工作变得更容易

框架都不是万能的，但是在某一种特定的项目中，用最方便快捷的方式达到同样的目的又何乐而不为呢？

---

指令

在第一节前端MVVM框架设计及实现（一）中，展示了用最简单的代码实现了一个双向绑定的原理以及运作流程，但是如果是作为框架来说那是远远不够的，所以我们需要慢慢的完善每一个细节，如果要做到操作数据即操作行为，那么就意味着框架要在内部帮你做一大堆额外的事情，这里面涉及的知识面足够让你跨入一个新的层次

我们先来初步完善第一个功能点：指令

如果用过 Angular，那么你就会知道directive 是什么

简单点：利用声明式的结构来控制布局与行为

<div id='box' ao-controller="box">
    <div ao-css-width="w" ao-click='click' ></div>
    <p> {{ w }}  {{ h }} {{ z }}  </p>
</div>

如图ao-controller,ao-css-width等等HTML本身是没有这语法结构的，那么如何让你将行为关联到HTML元素或者属性上，甚至能让你创造具有自定义行为的新元素

为了实现这种关联，AngularJS取了一个高大上的名字通过引入HTML编译器抽取这些标示能让浏览器识别新的HTML语法，咋一看很高级仔细一想不就是一个模版引擎么？

模版

此与彼同,此非彼也，一说模版就跑出来一个概念，占位与变量替换，几乎所有静态模板的实现原理都是一样的，将这个模板变成一个函数，然后里面分成静 态部分与动态部分，静态部分就是上面的HTNMl部分，转换为一个个字符串，动态部分就是插入的JS代码， 它们基本上原封不动地成为函数体的逻辑。然后我们传入一个对象给这个函数，最后得到一个符合HTML格式的字符串，最后用它贴到页面上某个位置就行了。

静态模板有几个缺点，首先它容易混入大量的JS逻辑，对于菜鸟来说，他们特别喜欢在里面放入越来越多JS代码。这个在JSP年代，已经证明是bad practice。为此出现了logic-less的 mustache。 其次，它更新视图总是一大片一大片地处理，改动太大。最后，是由于第2点引发的问题，它对事件绑定等不友好，因为一更新，原来的节点都被消灭了，需要重新 绑定。幸好，jQuery普及了事件代理，这问题才没有 暴露出来。

再次，字符串模块没有对样式的操作，流程的操作进行封装，没有计算属性，监控数组的东西，很容易诱导用户在页面上写大量业务逻辑，导致代码无法维护。

MVVM引入一种叫DOM模块，像knockout, avalon, angular就是用它们实现双向绑定了，可维护性更高

可见

绑定属性与插值表达式就是对应静态模板中的JS逻辑部分，由于只允许为表达式或单个属性值，复杂度被控制了，强制用户将它们转移到VM中。 VM作为一个数据源，对应静态模板的数据包，并且多了一个自动触发功能，进化成一个消息中心。

---

实现细节

avalon通过scan执行dom的扫描，其实就是通过遍历指定的节点树拿到对应的HTML语法标记

我们可以通过controller划分作用域，换句话说就是controller为根节点是往内部层层遍历检测每个元素上的语法标记

值得注意的细节，在IE67下，在循环绑定中，一个节点如果是通过cloneNode得到，自定义属性的specified为false，无法进入里面的分支，

但如果我们去掉scanAttr中的attr.specified检测，一个元素会有80+个特性节点（因为它不区分固有属性与自定义属性），很容易卡死页面

本章的代码主要是实现简单的HTML指令的解析，涉及到元素节点的attr属性与文本节点的{{}}插值表达式，通过解析对应的语法标记生成指定的数据结构提供给之后使用