avalon教程-简介
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教程-简介的更多相关文章
- GBDT(MART) 迭代决策树入门教程 | 简介
GBDT(MART) 迭代决策树入门教程 | 简介 http://blog.csdn.net/w28971023/article/details/8240756
- CMake 构建项目教程-简介
CMake 构建项目教程-简介 Linux 平台构建项目,选择了CLion作为C++的IDE,而CLion默认就是使用CMake构建项目,所以这里记录了CMake在构建项目过程的一些小知识. 1. 项 ...
- lucene教程简介
1 lucene简介 1.1 什么是lucene Lucene是一个全文搜索框架,而不是应用产品.因此它并不像www.baidu.com 或者google Desktop那么拿来就能用,它只是 ...
- Nginx入门教程-简介、安装、反向代理、负载均衡、动静分离使用实例
场景 Nginx入门简介和反向代理.负载均衡.动静分离理解 https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/102790862 Ub ...
- 20181019-JSP 教程/简介
JSP 教程 这是第一篇JSP JSP与PHP.ASP.ASP.NET等语言类似,运行在服务端的语言. JSP(全称Java Server Pages)是由Sun Microsystems公司倡导和许 ...
- 【转载】GBDT(MART) 迭代决策树入门教程 | 简介
转载地址:http://blog.csdn.net/w28971023/article/details/8240756 GBDT(Gradient Boosting Decision Tree) 又叫 ...
- 转:GBDT(MART) 迭代决策树入门教程 | 简介
在网上看到一篇对从代码层面理解gbdt比较好的文章,转载记录一下: GBDT(Gradient Boosting Decision Tree) 又 叫 MART(Multiple Additive R ...
- css系列教程--简介及基础语法和注意事项
css简介:css指的是层叠样式表,cascading style sheets.用来定义html中的dom节点如何展示在页面中的问题.解决了内容与表现形式的分离问题.常见的样式表有外部链接样式表和内 ...
- 16-GDBT(MART) 迭代决策树入门教程 | 简介
转载:http://blog.csdn.net/w28971023/article/details/8240756 GBDT(Gradient Boosting Decision Tree) 又叫 M ...
随机推荐
- 温故而知新_C语言_递归
递归. 是的,差不多就是这种感觉.上面就是类似递归的显示表现. 2017 10 24更新: 递归这个问题放了很久.也没有写.大概是自己还没有好好理解吧. 在这里写下自己理解的全部. 一 何为递归. 字 ...
- jest+vue-test-utils初步实践
一.起步 1. jest Jest是 Facebook 的一套开源的 JavaScript 测试框架, 它自动集成了断言.JSDom.覆盖率报告等开发者所需要的所有测试工具,配置较少,对vue框架友好 ...
- ABAP F4使用总结!!
PARAMETERS: p_werks LIKE t001l-werks , p_lgort LIKE t001l-lgort . SELECTION-SCREEN SKIP. ...
- P4559 [JSOI2018]列队
\(\color{#0066ff}{ 题目描述 }\) 作为一名大学生,九条可怜在去年参加了她人生中的最后一次军训. 军训中的一个重要项目是练习列队,为了训练学生,教官给每一个学生分配了一个休息位置. ...
- 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 ...
- apache 压缩 gzip
配置 编辑httpd.conf文件 去掉 #LoadModule headers_module modules/mod_headers.so 前面的注释# 去掉 #LoadModule deflate ...
- svg path 路径
许多字母命令(例如:M m)(但不是全部)成对.有一个大写和一个小写版本.大写版本是绝对版本,小写是相对版本.让我们继续以M为例: M 100,100 意思是“拿起笔并将其移动到确切的坐标100,10 ...
- BZOJ 3631 松鼠的新家 树上差分
我猜会有智障说直接链剖+线段树…(希望没有) From RYC's 课件 然鹅我并不反对树剖...我是智障...QAQ 好吧还是树上差分:设 a[i]=u.a[i+1]=v ++w[u],++w[v] ...
- D - Frogger
Freddy Frog is sitting on a stone in the middle of a lake. Suddenly he notices Fiona Frog who is sit ...
- P3193 [HNOI2008]GT考试
传送门 容易看出是道DP 考虑一位一位填数字 设 f [ i ] [ j ] 表示填到第 i 位,在不吉利串上匹配到第 j 位时不出现不吉利数字的方案数 设 g [ i ] [ j ] 表示不吉利串匹 ...