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. 温故而知新_C语言_递归

    递归. 是的,差不多就是这种感觉.上面就是类似递归的显示表现. 2017 10 24更新: 递归这个问题放了很久.也没有写.大概是自己还没有好好理解吧. 在这里写下自己理解的全部. 一 何为递归. 字 ...

  2. jest+vue-test-utils初步实践

    一.起步 1. jest Jest是 Facebook 的一套开源的 JavaScript 测试框架, 它自动集成了断言.JSDom.覆盖率报告等开发者所需要的所有测试工具,配置较少,对vue框架友好 ...

  3. ABAP F4使用总结!!

    PARAMETERS: p_werks LIKE t001l-werks ,             p_lgort LIKE t001l-lgort . SELECTION-SCREEN SKIP. ...

  4. P4559 [JSOI2018]列队

    \(\color{#0066ff}{ 题目描述 }\) 作为一名大学生,九条可怜在去年参加了她人生中的最后一次军训. 军训中的一个重要项目是练习列队,为了训练学生,教官给每一个学生分配了一个休息位置. ...

  5. error : Could not load UI satellite dll 'TrackerUI.dll'. Make sure it exists in an LCID subdirectory of 'C:\Program Files (x86)\MSBuild\12.0\bin\'.

    原因  VS2013 + QT环境部署好后, 又安装了VS2015\ 解决方案:  在另一台电脑里重装VS2013, 并将  C:\Program Files (x86)\MSBuild\12.0\B ...

  6. apache 压缩 gzip

    配置 编辑httpd.conf文件 去掉 #LoadModule headers_module modules/mod_headers.so 前面的注释# 去掉 #LoadModule deflate ...

  7. svg path 路径

    许多字母命令(例如:M m)(但不是全部)成对.有一个大写和一个小写版本.大写版本是绝对版本,小写是相对版本.让我们继续以M为例: M 100,100 意思是“拿起笔并将其移动到确切的坐标100,10 ...

  8. BZOJ 3631 松鼠的新家 树上差分

    我猜会有智障说直接链剖+线段树…(希望没有) From RYC's 课件 然鹅我并不反对树剖...我是智障...QAQ 好吧还是树上差分:设 a[i]=u.a[i+1]=v ++w[u],++w[v] ...

  9. D - Frogger

    Freddy Frog is sitting on a stone in the middle of a lake. Suddenly he notices Fiona Frog who is sit ...

  10. P3193 [HNOI2008]GT考试

    传送门 容易看出是道DP 考虑一位一位填数字 设 f [ i ] [ j ] 表示填到第 i 位,在不吉利串上匹配到第 j 位时不出现不吉利数字的方案数 设 g [ i ] [ j ] 表示不吉利串匹 ...