前端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属性与文本节点的{{}}插值表达式,通过解析对应的语法标记生成指定的数据结构提供给之后使用

 

GitHub上会同步更新每章的实现,。。。敬请关注~


本文转自艾伦 Aaron博客园博客,原文链接:http://www.cnblogs.com/aaronjs/p/3617240.html,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章