avalon教程-简介

Posted 2020-08-03 孙海阔-前端工程师

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实现，其他功能都不用