迷你MVVM框架 avalonjs 学习教程1、引入avalon
avalon是国内最强大的MVVM框架，没有之一，虽然淘宝KISSY团队也搞了两个MVVM框架，但都无疾而终。其他的MVVM框架都没几个。也只有外国人与像我这样闲的架构师才有时间钻研这东西。我很早之前就预言，MVVM是前端的终极解决方案。我之前在盛大无线做盛大通行证就深有体会，一个业务逻辑对应十来个不同的界面，分层架构是必不可少的。因此双向绑定作为解药，结合很早就流行的MVC框架，衍生出MVVM这神器。
但这么牛叉的东西，为什么现在才流行起来呢？要不是谷歌振臂高呼，这个一直缩在flex, wps世界的MVVM就根本不可能在前端冒头。要知道，微软也搞了knockout, winjs等MVVM框架。原因之一，这东西非常难做。早些年，JS没有后端语言那种监听对象属性变动的高级特性，属性的变动如何同步视图，这需要非常巧妙的依赖收集机制，绑定（或叫指令）需要把一个编译器把VM的属性分离出来，这也不是一般人能搞出来的。加之，前端本来就没有几个是专科出来的人，都是半路出家的，写编译器与玩转jQuery不是同一个概念。knockout没有依赖什么高级特性，但用户体验太差，因此也没有流行起来。angular的缺点与优点也非常明显，幸好google比较大牌。
目前使用avalon的公司名单
但墙的内外毕竟是两个世界，这也是avalon存在的理由。avalon最早是模拟knockout为了解决盛大通行证这样多界面的东东而研发出来的。为了不像knockout那样别扭，它是使用IE8的Object.defineProperty劫持用户对数据的操作，从而实现对视图的同步。这种设计也比后来的angular的脏检测优秀许多。但Object.defineProperty是缺陷的，兼容性不好，早期的标准浏览器需要用_defineGetter_, _defineSetter_, IE6,IE7,IE8(因为IE8的Object.defineProperty也是有缺陷的)需要用VBScript，为了弄懂VBScript，我还特意入了一本90块钱的书。但这不是全部，兼容IE6是非常痛苦的，需要写大量额外的代码，因此存在avalon.js与avalon.modern.js两个版本。
avalon.js的兼容性是最好的，支持IE6及非常老的标准浏览器。这里的标准浏览器特指W3C阵营中的safari, opera, firefox, chrome。avalon.js在最近几个月的升级中，还对IE的VML，W3C方的SVG进行各种兼容处理。要知道，就是浏览器自身的API，也有各种问题。从这个层面来看，avalon.js的兼容能力比jQuery强多了。并且它可以与jQuery和平共处，享用其强大的AJAX，动画， Deferred等功能。加之，avalon现在拥有全职的团队帮它打造UI库（OniUI），大家就不用自己去拼凑各种插件了。
<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<script src="avalon.js"> </script>
</head>
<body>
<div>TODO write content</div>
</body>
</html>
上面就是一个范本，如果想引入avalon.modern.js，就是把上面script标签的src改一改。
avalon.modern.js之前是叫做avalon.mobile.js，是打算用在移动端的，里面是用了许多高级API，因此性能比avalon.js高许多。由于也不算兼容旧式IE（avalon.modern.js是支持IE10及以上的新浏览器），许多兼容逻辑也删掉了，因此体积少了许多，大概少了1000行代码。
如果你想做移动端开发呢，这要用到触屏事件，avalon的仓库有一个mobile.js，你可以直接将它的源码 拷贝到avalon.modern.js里最后一个花括号的前面，或者这样引入：
<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<script src="avalon.modern.js"></script>
<script src="mobile.js"></script>
</head>
<body>
<div>TODO write content</div>
</body>
</html>
我建议使用拷贝方式，方便以后我们通过合并方式，把所有业务逻辑也统统合并成一个文件。
avalon.js本身是自带加载器，它是符合AMD规范，因此它可以用requirejs项目的rjs进行合并。如果大家不想用avalon.js的自带加载器，可以在紧接着的 script标签里将它禁用。
<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<script src="avalon.modern.js"></script><!--不兼容IE6到8,也不玩移动端就用这个-->
<script>
avalon.config({
loader: false
})
</script>
</head>
<body>
<div>TODO write content</div>
</body>
</html>
或者直接在源码里改，我在公司里就是直接改源码：
avalon.ready = function(fn) {
if (innerRequire) {
innerRequire("ready!", fn)
} else if (fireReady === noop) {
fn(avalon)
} else {
readyList.push(fn)
}
}
avalon.config({
loader: false
})
或者直接在源码里AMD加载器这个模块删掉，这样可以减少300行代码
/*********************************************************************
* AMD加载器 *
**********************************************************************/ var innerRequire
var modules = avalon.modules = {
"ready!": {
exports: avalon
},
"avalon": {
exports: avalon,
state: 2
}
}
……
……
innerRequire.checkDeps = checkDeps
}
/*********************************************************************
* DOMReady *
**********************************************************************/
如果你也用require.js，那么avalon自带的DOMReady模块也可以省掉。这时，你们可以引用avalon.shim.js。此JS是基于avalon.js改造而来，你也可以模仿一下改造avalon.mobile.js。
如果你只支持最新的chrome浏览器，比如chrome36，那么你可以使用基于Promise, Object.observe 高级API冶造的avalon.observe.js，它使用全新的编译器与监听机制，其性能是目前所有MVVM框架之首！
最后我们结合require.js， domReady.js，text.js，css.js，jQuery.js做一个简单的项目吧。
我们建立一个新项目，结构如下：
其中modules文件是放置不同的业务模块，可能不同的模块由不同的人来说，每个人管好自己的js、html、 css，因此我们才需要requirejs的text、css插件。vendor是放置第三方JS库、CSS库什么的，main.js为入口文件，特意与index.html放在醒目的位置。
注意，我们需要禁用avalon自带的加载器。
index.html的内容如下：
<!DOCTYPE html>
<html>
<head>
<title>第一个avalon项目</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<script src="vendor/require/require.js" data-main="main.js"></script>
<style>
.ms-controller{
visibility: hidden;
}
</style> </head>
<body ms-controller="root">
<div>{{header | html}}</div>
<div ms-include-src="page"></div>
<div>{{footer}}</div>
</body>
</html>
里面有许多奇怪的属性，不要慌，这是avalon的绑定属性，后面的章节我们慢慢讲。之于requirejs的用法，自己到官网看。
然后是main.js，它大体分为三大块：
require.config({//第一块，配置
baseUrl: '',
paths: {
jquery: 'vendor/jquery/jquery-2.1.1',
avalon: "vendor/avalon/avalon",//必须修改源码，禁用自带加载器，或直接删提AMD加载器模块
text: 'vendor/require/text',
domReady: 'vendor/require/domReady',
css: 'vendor/require/css.js'
},
priority: ['text', 'css'],
shim: {
jquery: {
exports: "jQuery"
},
avalon: {
exports: "avalon"
}
}
});
require(['avalon', "domReady!"], function() {//第二块，添加根VM（处理共用部分）
avalon.log("加载avalon完毕，开始构建根VM与加载其他模块")
avalon.templateCache.empty = " "
avalon.define({
$id: "root",
header: "这是根模块，用于放置其他模块都共用的东西，比如<b>用户名</b>什么的",
footer: "页脚消息",
page: "empty"
})
avalon.scan(document.body)
require(['./modules/aaa/aaa'], function() {//第三块，加载其他模块
avalon.log("加载其他完毕")
});
});
然后每一个模块里都有其JS文件与模板文件（CSS的引入以后再说）
aaa.html
<div ms-controller="aaa">
<input ms-duplex="username"/>{{username}}
</div>
aaa.js
define(["avalon", "text!./aaa.html"], function(avalon, aaa) {
avalon.templateCache.aaa = aaa
avalon.define({
$id: "aaa",
username: "司徒正美"
})
avalon.vmodels.root.page = "aaa"
})
然后大家运行服务器，就能看到效果（推荐用netBeans，可以直接右键运行）
注意，这不是一个简单的玩具级helloworld！这是一个工业级的项目的种子原型，以后我们所有项目都可以根据它进行改造，最后用rjs进行合并压缩！
最近附上本章节的源码！
迷你MVVM框架 avalonjs 学习教程1、引入avalon的更多相关文章
- 迷你MVVM框架 avalonjs 学习教程19、avalon历史回顾
avalon最早发布于2012.09.15,当时还只是mass Framework的一个模块,当时为了解决视图与JS代码的分耦,参考knockout开发出来. 它的依赖收集机制,视图扫描,绑定的命名d ...
- 迷你MVVM框架 avalonjs 学习教程22、avalon性能大揭密
avalon之所以能在页面处理1W个绑定(angular对应的数字是2000),出于两个重要设计--基于事件驱动的双向绑定链及智能CG回收机制. avalon的双向绑定链是通过Object.defin ...
- 迷你MVVM框架 avalonjs 学习教程17、avalon的一些配置项
本章节,主要是介绍avalon.config方法,通过它来制定一些更贴心的功能. 一般情况下,我们在使用ms-controller绑定时,需要添加一个ms-controller类名,目的是为了防止网速 ...
- 迷你MVVM框架 avalonjs 学习教程18、一步步做一个todoMVC
大凡出名的MVC,MVVM框架都有todo例子,我们也搞一下看看avalon是否这么便宜. 我们先从react的todo例子中扒一下HTML与CSS用用. <!doctype html> ...
- 迷你MVVM框架 avalonjs 学习教程3、绑定属性与扫描机制
在MVVM框架中,你都会看到页面定了许多奇怪的属性,比如knockout的data-☆,angular的ng-☆,avalon的ms-☆,此外还有一些只写文本节点上的双花括号,它们统称为指令.ms-☆ ...
- 迷你MVVM框架 avalonjs 学习教程20、路由系统
SPA的成功离开不这三个东西,分层架构,路由系统,储存系统.分层架构是我们组织复杂代码的关键,这里特指MVVM的avalon:路由系统是将多个页面压缩在一个页面的关键:储存系统特指本地储存,是安全保存 ...
- 迷你MVVM框架 avalonjs 学习教程2、模块化、ViewModel、作用域
一个项目是由许多人分工写的,因此必须要合理地拆散,于是有了模块化.体现在工作上,PM通常它这为某某版块,某某频道,某某页面.某一个模块,必须是包含其固有的数据,样式,HTML与处理逻辑.在jQuery ...
- 迷你MVVM框架 avalonjs 学习教程16、过滤器
avalon的过滤器是参考自angular与rivets.它也被称做管道文本过滤器,它的处理对象只能是文本(字符串),它只能用在文本绑定中,并且只能是双花括号形式.下面是各大家的过滤器比较: rive ...
- 迷你MVVM框架 avalonjs 学习教程11、循环操作
avalon是通过ms-repeat实现对一组数据的批量输出.这一组数据可以是一个数组,也可以是一个哈希(或叫对象).我们先从数组说起吧. 第二节就说,凡是定义在VM中的数组,如果没有以$开头或者没放 ...
随机推荐
- 非ie浏览器必备函数常识
场景描述: 我们都知道IE浏览器和非IE浏览器都有很多功能一样但写法不同,或者各自都有一些自己独特的方法,那么为了保持兼容性和便于编写,我们可以通过这两个方法给非IE浏览器的对象增加自己没有,但IE有 ...
- 003——数组（三）count()reset()end()prev()next()current()
<?php /** * count 统计数组中元素的个数 */ /*$arr=array('blog.com','博客论坛',array('php课程','css课程')); echo coun ...
- POJ 1961 循环节
和POJ 2406 几乎一样.前者是求 该字符串的最小的循环节.也就是最大的循环次数.后者是求该字符串的每个前缀的循环节的最大循环次数.(如果有的话).而且必须大于1.才可以输出.就是POJ 2406 ...
- bzoj1037
题解: 定义f[i][j][a][b]表示已经排了i个人 还能拍j个男的(那么就还有m-i+j个是女的) 还能连续拍a个男的,b个女的 我是递推的 考虑后面一个拍男的还是女的 注意要判断边界 代码: ...
- copy assign retain 修饰属性的set 方法
@property (nonatomic,retain) NSString * name; - (void)setName:(NSString*)name { [name retain]; 把传进 ...
- Wordpress 加载 js 文件到底部
wp_enqueue_script wp_enqueue_script( string $handle, string $src = '', array $deps = array(), string ...
- Winform开发常用控件之DataGridView的简单数据绑定——代码绑定DataSet、DataTable、IList、SqlDataReader
前文介绍了Winform为DataGridView提供的数据自动绑定功能,下面介绍一下采用代码的数据绑定 1.用DataSet和DataTable为DataGridView提供数据源 先上代码 pri ...
- Linux运维学习笔记-通配符及正则表达式知识总结
通配符: * 代表所有 ? 任意一个字符 : 两个命令的分隔符 # 注释 | 管道,将|前命令的执行结果作为|后命令的输入 ~ 用户的家目录 - 上一次的目录 $ 变量前面 ...
- Centos7环境下安装python3.6.4 并与python2共存
最近安装了新系统centos7,本身自带python2.7,但是由于需要使用python3 来运行一些应用,所以想到在centos环境下安装python3,并保证其和python2 可以共存. 步骤如 ...
- backports移植rtlwifi驱动
/************************************************************************ * backports移植rtlwifi驱动 * 说 ...