图解JS框架教程
以下介绍各种非jQuery的JS框架， jQuery另述。附上本人调试成功的截图和代码，和相关js文件。
一 backbone
Backbone 为复杂Javascript应用程序提供模型(models)、集合(collections)、视图(views)的结构。
backbone主要提供了3个东西：models(模型)，collections(集合)，views(视图)。backbone.js文件压缩后只有5.3KB。这个JS还必须依赖于另一个JS文件：underscore.js(包含许多工具方法，集合操作，js模板等等)。
用Backbone.Model表示应用中所有数据，models中的数据可以创建、校验、销毁和保存到服务端。当models中值被改变时自动触发一个"change"事件、所有用于展示models数据的views都会侦听到这个事件，然后进行重新渲染。
创建models或者views的语法：extends，相当于类继承。models的创建，销毁，校验等一系列改变都会触发相应的事件。
示例：用backbone.js和jquery实现一个可编辑的人员信息表格。
用Employee类（继承自Backbone.Model）表示员工信息，包含ID、姓名、部门、性别、年龄和职位字段；
window.Employee = Backbone.Model.extend({
// 模型值校验
validate:function(attrs){
for(var key in attrs){
if(attrs[key] == ''){
return key + "不能为空";
}
if(key == 'age' && isNaN(attrs.age)){
return "年龄必须是数字";
}
}
}
});
新增一个Employee的示例对象：
var employee = new Employee();
Employee类中不必声明ID、姓名等业务字段。当需要给employee设置这些信息时候，只需要调用
employee.set({'id':1,'name':'Jason'});
如果需要对employee的信息进行校验，需要给Employee类配置一个validate方法，这个方法的参数attrs就是set进去的json数据。这样，当employee里面的数据每次发生改变的时候都会先调用这个validate方法。
Model类定义好之后就可以开始定义集合类了，在集合类里面可以对里面的每个Model进行增加，删除等一系列操作，还可以调用fetch方法从server端获取集合的初始值。
window.EmployeeList = Backbone.Collection.extend({
model : Employee,
// 持久化到本地数据库
localStorage: new Store("employees"),
});
window.Employees = new EmployeeList();
设置 localStorage属性后Employees里面的数据自动会同步保存到本地数据库里面，每当调用Employees.fetch()后又会从localStorage里面恢复数据。
View类主要负责一切和界面相关的工作，比如绑定html模板，绑定界面元素的事件，初始的渲染，模型值改变后的重新渲染和界面元素的销毁等：
window.EmployeeView = Backbone.View.extend({
tagName : 'tr',
template : _.template($('#item-template').html()),
events : {
"dblclick td" : "edit",
"blur input,select" : "close",
"click .del" : "clear",
},
initialize : function(){
// 每次更新模型后重新渲染
this.model.bind('change', this.render, this);
// 每次删除模型之后自动移除UI
this.model.bind('destroy', this.remove, this);
},
setText : function(){
var model = this.model;
this.input = $(this.el).find('input,select');
this.input.each(function(){
var input = $(this);
input.val(model.get(input.attr("name")));
});
},
close: function(e) {
var input = $(e.currentTarget);
var obj = {};
obj[input.attr('name')] = input.val();
this.model.save(obj);
$(e.currentTarget).parent().parent().removeClass("editing");
},
edit : function(e){
// 给td加上editing样式
$(e.currentTarget).addClass('editing').find('input,select').focus();
},
render: function() {
$(this.el).html(this.template(this.model.toJSON()));
// 把每个单元格的值赋予隐藏的输入框
this.setText();
return this;
},
remove: function() {
$(this.el).remove();
},
clear: function() {
this.model.destroy();
}
});
注意此示例并没有连数据库，使用的是本地存储，用IE看不到效果，以下是Chrome中的运行截图；
二 AngularJS
AngularJS是为了克服HTML在构建应用上的不足而设计的。
AngularJS通过使用称为标识符(directives)的结构，让浏览器能够识别新的语法。例如：
例子：
使用双大括号标记{{}}的内容是问候语中绑定的表达式，html代码如下，
<!doctype html>
<html ng-app>
<head>
<script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
</head>
<body>
Hello {{'World'}}!
</body>
</html>
使用文本绑定一个动态表达式；
<!doctype html>
<html ng-app>
<head>
<script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
</head>
<body>
Your name: <input type="text" ng-model="yourname" placeholder="World">
<hr>
Hello {{yourname || 'World'}}!
</body>
</html>
以下是运行截图；
三 Dojo
Dojo的全称是Dojo Toolkit，为富互联网应用程序(RIA) 的开发提供了完整的端到端的解决方案，包括核心的 JavaScript 库，简单易用的小部件（Widget）系统和一个测试框架。
Dojo Toolkit 的特性可以分到 4 个不同部分。
Base
Base 包提供 Dojo Toolkit 的基础，包括一些功能，比如 DOM 使用函数、CSS3 基于选择器的 DOM 查询、事件处理、基本的动画、以及 Dojo 基于类的面向对象特性。
Core
Core 包包含一些 Base 中没有包含的附加特性。这些特性不像 Base 中的特性那样频繁使用；因此，它们单独加载减轻 Base 包的负担。Core 包提供一些实际有用的组件，包括高级动画拖放、I/O、数据管理、国际化（i18n）、浏览器历史管理。
Dijit
Dijit 包包含 Dojo 小部件和组件的扩展 UI 库。这些小部件的一些示例包括对话框、日历、调色板、工具提示和树。它也包括一些表单控件，这比标准 HTML 表单控件提供更多的功能，还有一些完整的布局管理选项。
DojoX
Dojo eXtensions (DojoX) 包含工具箱的各个子项目。位于 DojoX 中的大多数是实验特性，但是也有一些稳定组件和特性。
dojo之Hello World;
添加dojo的引用,
<script type="text/javascript" src="dojo.js"></script>
js代码，
dojo.addOnLoad(function () {
dojo.create("div", { innerHTML: "Hello world!" }, dojo.body());
});
结果，
以上三个的代码下载：
http://pan.baidu.com/s/1i3h8lMX