一、介绍
首先avalon是我接触的第一个mvvm框架，angularjs也能实现基本同样的功能，但是老外的产物都是比较先进的，他们早已放弃在IE下摸爬滚打，作为大天朝的我们，还是必须要矜矜业业的伺候着IE6，这就是我为什么选择avalon，没用angularjs的原因。官方文档都是老写法，这让我忍不住深深的吐槽正美，好吧，维护一个框架是艰难的，正美加油吧。
二、日历插件篇datepicker
官方文档的参数：
<!DOCTYPE HTML><html><head><meta charset=‘utf-8‘/><title>datepicker demo</title><script src=‘avalon.js‘></script></head><body><div class="demo-show" ms-controller="demo"><fieldset style="position: relative; z-index: 2"><legend>默认配置的单日历框</legend><input ms-widget="datepicker"/><p>说明：默认情况下，日历显示方式从周一到周日，显示一个月份，输输入域不允许为空，点击next、pre切换月份时，默认切换一个月，并且不可通过下拉框切换月份和年份</p></fieldset><fieldset style="position: relative; z-index: 1"><legend>默认配置的单日历框</legend><input ms-widget="datepicker" data-datepicker-allow-blank="true"/><p>说明：此demo配置allowBlank为true，使得输入域可以为空,与第一个demo做对比</p></fieldset><script>require(["datepicker/avalon.datepicker"], function(avalon) {var model = avalon.define("demo", function(vm) {})avalon.scan();})</script></div></body></html>
1、首先avalonU使用了requireJS这个模块化管理工具
require(["引用的模块"],function(){//具体代码})
2、日历插件依赖了avalonjs和avalon.datepicker.js这两个模块，官方文档，将avalonjs，作为全局依赖的模块
<script src=‘avalon.js‘></script>
avalon.datepicker.js模块的依赖
require(["datepicker/avalon.datepicker"],function(){//在这里引用了avalon.datepicker模块})
如果不将avalon设置为全局依赖的模块，那么写法就是
require(["avalon","avalon.datepicker"],function(){//依赖了avalon.js和avalon.datepicker})
3、在html引入即可
<input ms-widget="datepicker"/>
将这一行代码插入你所需要的地方，日历插件就会生效。
三、新写法
avalon更新过后，写法发生了一些改变，但是官方ui没有更新。
1、html写法
- //Basics.html
<!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"><title></title></head><body><div ms-controller="datebat"><input ms-widget="datepicker"/></div></body><script src="bower_components/requirejs/require.js" data-main="Basicsmain.js" defer async="true"></script></html>
2、js写法
- //Basics.js
require([‘avalon‘,‘avalon-date‘],function(avalon){avalon.ready(function(){var datemodule = avalon.define({$id: ‘datebat‘});avalon.scan()})})
3、require配置
//Basicsmain.jsrequire.config({paths : {‘avalon‘ : ‘bower_components/avalon/min/avalon.min‘,‘avalon-date‘ : ‘bower_components/avalononiui/datepicker/avalon.datepicker‘}});require([‘app/Basics.js‘]);//require我不是很熟悉，希望大神不要吐槽，哈哈哈哈
四、使用avalonUI，所需要的准备工作
1、引用avalonjs。
2、引用对应UI，的avalonUI的js
3、使用requirejs依赖模块。
4、不要用老写法，说不定那天正美不开心，把老写法删了，那么就悲剧了。
5、下载好avalonui，这个ui有点大。我还没找到优化方法。
6、下载avalon。
7、下载requirejs。
gitcafe代码地址：https://gitcafe.com/Zjingwen/demo.git 具体位置在demo / 2015 / 4 / 28 / TheCalendarAvalon，我稍微修改了以下css效果有点不同。
<---2015/4/28未完待续--->