这篇文章是写在公司项目完毕以后的，由于我个人不太会把没有实践过的东西写出来，实践是检验真理的唯一标准么，用的怎样，好不好用，在成熟实践过的项目上能表现出来。我们公司一开始手艺选型的时刻是斟酌用angularjs的，然则公司高层为了市场容量 说最好需要支撑下 ie , 但是angularjs 对ie8的支撑都不是很好，所以末了使用了能够兼容一切浏览器的avalon, 正如司徒大大本身说的，国内的环境就是如许，ie 照样有大批的市场份额的。 （如今微软终究痛定思痛 决议摒弃了ie , 不支撑ie的平安更新，对我们前端来讲，真的是严重利好啊）
言归正传，这篇文章的目标就是把怎样用 avalon 构建一个单页面顺序 引见以下， 是对本身的一个总结，也喜好对人人有肯定的自创作用，写的不好不对的处所愿望人人多批评批评, 感谢。
竖立项目构造
这个我参考了司徒正美写的构造目次。 js 文件夹是安排一切的js 援用类库的，无论是其他类库照样本身公司写的类库也好，我把本身写的类库放在了 js/common文件夹下面； modules 是安排差别的营业模块的，如图，我竖立了一个 sub1营业，另有一个 sub2营业， 背面我们就依据这两个子营业来举行开辟解说； 别的css,fonts,images 目次就不必讲人人也都知道了；然后main.js为进口文件，与index.html 主页面放在根目次下面
编写index主页
主页很简朴，新建一个通例html页面，援用require.js, 定义进口main.js位置。个中ms-controller=”root”就是avalon的一个controller, 一个model 对应一个controller , 划定一个作用域，这个跟angularjs差不多,也有mvc的头脑. 一个页面能够定义多个controller
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>avalon工程</title>
<script src="js/require/require.js" data-main="main"></script>
</head>
<body ms-controller="root">
{{name}}
</body>
</html>下面我们再来看看main.js文件
第一块内容设置了requirejs ，设置了avalon的援用位置
第二块内容经由过程require引入avalon
requirejs的进修请参考官网 http://requirejs.org/
然后定义了一个 avalon的model, 这个实在就是一个对象，内里能够封装html controller中需要用到的数据和要领， 默许$id属性是必需要的，这个id 会找到html页面的对应的controller, 如前面我们定义的controller叫 root. 末了又添加了一个属性name, html页面对应 {{name}}
require.config({//第一块，设置
baseUrl: '',
paths: {
avalon: ["js/avalon/avalon"]//必需修正源码，禁用自带加载器，或直接删提AMD加载器模块
}
});
require(['avalon'],function(avalon){
avalon.log("引入avalon");
var model = avalon.define({
$id: "root",
name: "tangolivesky"
})
});
实行效果以下
这就是一个典范的MVVM
