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

avalon教程-简介的更多相关文章

  1. GBDT(MART) 迭代决策树入门教程 | 简介

    GBDT(MART) 迭代决策树入门教程 | 简介  http://blog.csdn.net/w28971023/article/details/8240756

  2. CMake 构建项目教程-简介

    CMake 构建项目教程-简介 Linux 平台构建项目,选择了CLion作为C++的IDE,而CLion默认就是使用CMake构建项目,所以这里记录了CMake在构建项目过程的一些小知识. 1. 项 ...

  3. lucene教程简介

    1 lucene简介 1.1 什么是lucene     Lucene是一个全文搜索框架,而不是应用产品.因此它并不像www.baidu.com 或者google Desktop那么拿来就能用,它只是 ...

  4. Nginx入门教程-简介、安装、反向代理、负载均衡、动静分离使用实例

    场景 Nginx入门简介和反向代理.负载均衡.动静分离理解 https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/102790862 Ub ...

  5. 20181019-JSP 教程/简介

    JSP 教程 这是第一篇JSP JSP与PHP.ASP.ASP.NET等语言类似,运行在服务端的语言. JSP(全称Java Server Pages)是由Sun Microsystems公司倡导和许 ...

  6. 【转载】GBDT(MART) 迭代决策树入门教程 | 简介

    转载地址:http://blog.csdn.net/w28971023/article/details/8240756 GBDT(Gradient Boosting Decision Tree) 又叫 ...

  7. 转:GBDT(MART) 迭代决策树入门教程 | 简介

    在网上看到一篇对从代码层面理解gbdt比较好的文章,转载记录一下: GBDT(Gradient Boosting Decision Tree) 又 叫 MART(Multiple Additive R ...

  8. css系列教程--简介及基础语法和注意事项

    css简介:css指的是层叠样式表,cascading style sheets.用来定义html中的dom节点如何展示在页面中的问题.解决了内容与表现形式的分离问题.常见的样式表有外部链接样式表和内 ...

  9. 16-GDBT(MART) 迭代决策树入门教程 | 简介

    转载:http://blog.csdn.net/w28971023/article/details/8240756 GBDT(Gradient Boosting Decision Tree) 又叫 M ...

随机推荐

  1. CENTOS 7 和 JDK 添加中文字体

    写在前面的话 当运维总是遇到各种奇奇怪怪的问题,比如新的 JAVA 项目上线,login 界面有个验证码,结果部署后发现,要么显示的奇奇怪怪,要么压根不显示. 或者在使用一些开源的 JAVA 项目的时 ...

  2. A Plug for UNIX UVA - 753(网络流)

    题意:n个插座,m个设备及其插头类型,k种转换器,没有转换器的情况下插头只能插到类型名称相同的插座中,问最少剩几个不匹配的设备 lrj紫书里面讲得挺好的. 先跑一遍floyd,看看插头类型a能否转换为 ...

  3. 【bzoj4939】【YNOI2016】掉进兔子洞(莫队)

    题目描述 您正在打galgame,然后突然发现您今天太颓了,于是想写个数据结构题练练手: 一个长为 n 的序列 a. 有 m 个询问,每次询问三个区间,把三个区间中同时出现的数一个一个删掉,问最后三个 ...

  4. Set去掉重复的元素

    String[] uids= request.getParameterValues("dxus");获取页面传过来的id //--------------------------- ...

  5. BestCoder Round #66 1001

    GTW likes math Accepts: 472      Submissions: 2140  Time Limit: 2000/1000 MS (Java/Others)  Memory L ...

  6. Linux进程控制理论及几种常见进程间通信机制

    1. Linux进程控制理论 ① 进程是一个具有一定独立功能的程序的一次运行活动(动态性.并发性.独立性.异步性). 进程的四要素: (1)有一段程序供其执行(不一定是一个进程所专有的),就像一场戏必 ...

  7. Install ElasticSearch plugin for head

    git clone git://github.com/mobz/elasticsearch-head.git yum install git npm cd elasticsearch-head npm ...

  8. 基于Visual Studio .NET2015的单元测试 OpenCover

    https://www.cnblogs.com/XiaoRuLiang/p/10095723.html 基于Visual Studio .NET2015的单元测试 1.    在Visual Stud ...

  9. JS 打乱数组顺序

    function rand(arr) { var len = arr.length //首先从最大的数开始遍历,之后递减 for(var i = arr.length - 1; i >= 0; ...

  10. vue混入(mixins)

    混入(mixins)是一种分发vue组件中可复用功能的非常灵活的方式.混入对象可以包含任意组件选项. 当组件使用混入对象时,所以混入对象的选项将被混入该组件本身选项,当组件和混入对象含有同名选项时,这 ...