avalon是什么?
avalon是一个MVVM框架, Modle-模型层,即为js中从后台接口中取出的数据,例如一个对象或者对象数组,并对这些数据进行一定的格式化。常见的返回数据是这样的{id : 1, name: "%E5%BC%A0%E4%B8%89", birthday : "1467646548"},我们需要把数据转化成为比较规则的数据,像这样{id : 1, name : "张三", birthday : "2016-07-03"},这些数据和处理这些数据的逻辑统称为M层。View-视图层就比较好理解了,即为HTML标签和DOM元素。VM-视图模型层:ViewModel,为连接M和V的一个桥梁,单独有M和V是不能做出什么功能的,需要把M和V连接起来,像在avalon中定义一个数组:userArr = ["zs", "lisi"],在HTML中我们这样写<li ms-repeat="userArr">{{el}}</li>,即可。
我们为什么需要MVVM框架?
MVVM框架做的最主要的功能就是逻辑和显示分离,即M和V的分离。不管我们用原生的js还是jQuery,业务中混合大量的DOM操作,例如js中拼接HTML,id选择器,层级选择器,下级拼接的DOM依赖上次拼接的DOM……这样做的坏处很明显,1.使业务逻辑不专注,不易管理,例如在写代码的时候,处理一会数据,接着又需要拼接一堆HTML代码,写起来可能还容易些,但是供人读或者后期维护带来非常多的困难;2.业务逻辑和视图层高度耦合,例如这样的代码:$("#div .ul_class li"),实现的功能是id为div的下面的class为.ul_class下面的所有li,这样一层一层的定位DOM,如果其中层级关系改变了呢?某一个元素的id或者class改变了呢?我们是不是需要需要修改我们的DOM元素的查找方式,如果多处我们还需要全局查找id或者class,全局替换,维护成本非常高;尤其现在网站改版已经生了家常便饭,完全使用这种方式,你的代码可能80%都需要重写,这是事实。
为什么选择avalon?
除了可以使视图和显示完全分离这个最大的好处之外,还有如下好处
1.和angularjs相比,avalon支持老版本的IE浏览器,如IE6、7。
2.入门简单,快速上手,减少学习成本
3.使用avalon之后,可以不用requirejs了,因为avalon自带加载器(当然也可禁用)
4.可以和jQuery和平同处,现在我的项目中,jQuery只负责Ajax操作和Animation实现,其他功能都不用