javascript
图解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)的結構，讓瀏覽器能夠識別新的語法。例如：
使用雙大括號{{}}語法進行數據綁定； 使用DOM控制結構來實現迭代或者隱藏DOM片段； 支持表單和表單的驗證； 能將邏輯代碼關聯到相關的DOM元素上； 能將HTML分組成可重用的組件。?
??? 例子：
??? 使用雙大括號標記{{}}的內容是問候語中綁定的表達式，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
?
?
?
?
總結
- 上一篇： 图解web前端开发工具教程
- 下一篇： 图解WebSphere 8.5 安装