前端輕量級MVC框架CanJS詳解_其它
- WBOY原創
- 2016-05-16 16:35:261638瀏覽
選出正確的函式庫
創建一個JS APP沒有好的工具是很困難的，jQuery只是操作DOM的庫，沒有提供任何創建APP的基礎，這就是為什麼我們要一個類似CanJS的專門的庫。
CanJS 是一個輕量級的MVC庫，提供你創建一個JS APP所需的工具。
CanJS 是一個輕量級的MVC庫，提供你創建一個JS APP所需的工具。 它提供具有MVC (Model-View-Control) 模式的基本框架，模板動態綁定， route的支援且 記憶體安全。同時支援 jQuery, Zepto, Mootools, YUI, Dojo，有豐富的擴充和插件。
第一部分你將學到：
建立Control控制層 和 View 視圖層(UI模板) 來顯示聯絡人
用Model模型層來表示資料
使用 fixtures 插件模擬ajax返回資料
你肯定激動了！我們開始碼代碼吧。
建立好你的資料夾和HTML
你先給你的APP建立一個資料夾，目錄下再建立4個子資料夾：css, js,views 和 img。如下：
contacts_manager
css
js
views
img
儲存以下的程式碼為 index.html：
Contacts Manager
>
在頁面的底部你載入所需的JS（包括你的APP：contacts.js）。
教學中用到的CSS和圖片檔可以下載。
用View來打造你的UI
View是用來渲染你APP的UI模板。 CanJS 支援多種模板引擎，本文用EJS ，CanJS包含有而且支援動態綁定。
EJS 範本的標籤與HTML很像，支援包含JS程式碼，三種常用標籤如下：
執行JS
執行JS，並將非轉義的結果寫入目前位置的HTML
執行JS，並將轉義的結果寫入目前位置的HTML(用於子模板).
模板可以從檔案或script標籤載入得到，本教學從 EJS 檔案載入。
顯示聯絡人
要建立聯絡人，你得先建立一個EJS 模板，儲存以下程式碼為contactsList.ejs 進你的views 資料夾：
- el.data('contact', contact) %>>
contact: contact, categories: categories
}) %>
contactLists.ejs 會渲染一個聯絡人列表，我們分析此模板:
list()方法裡的回呼方法如果配合配置有觀察者的list使用時，一旦list的資料發生改變就運用動態綁定重複呼叫。
以上程式碼透過元素的回呼方法產生 一個有聯絡人資料的
contact: contact, categories: categories
}) %>
以上程式碼將子範本contactView.ejs 渲染成一個聯絡人。 can.view.render() 以模板和資料為參數傳回HTML。
渲染單一聯絡人
子範本是將view組織成可管理區塊的好方法。 同時也讓你的模板簡單和易於重複使用。教學後面將會用到此範本來建立聯絡人，將下面的程式碼儲存為contactView.ejs 進 views 資料夾：
蒸發器的屬性都放入了 ; 標籤裡，這就可以編輯更新使用者的資料。
啟動你的視野（好文藝。。）
EJS 處理範本過程中如果可用到 attr() ，它周圍的程式碼將由事件處理器管理交接，監聽對應屬性的變化，當屬性發生變化時，APP 中關聯的 UI 將會被更新。功能受益於模板動態綁定，EJS的動態綁定是有綁定的，只有使用了attr()時才會為機制的屬性開啟。
我們透過 contactView.ejs 中的一個標籤來了解它的用法：
>
特殊標記裡的程式碼將轉變成事件綁定到此控制器的名稱屬性上。當名稱屬性改變時，事件將會被觸發同時HTML結構會被更新。
使用can.Control處理業務邏輯
can.Control 創建了一個可組織，內部無洩漏，全權控制器，可以用於創建小部件或處理業務邏輯。您透過所需的資料為一個 DOM 元素建立一個 Control 實例，可以在您的 Control 中定義方法綁定事件。
當 Control 所關聯的元素從 DOM 被刪除時，Contol 會自行去找自己，同時清除所關聯的方法。
要建立一個 Control，透過確定你定義的包含有函數的物件給 can.Control() 來實現繼承。接下來的事件也給傳進去了。
每個Contol實例都有幾個重要的值和方法規格：
這 – 控制實例的引用
this.element – 實例中你所建立的 DOM 元素
this.options – 建立實例所需的參數物件
init() – 當實例建立成功時被呼叫
管理蒸發器
將以下程式碼片段加入 contacts.js 檔案來建立管理斯托克的控制項：
Contacts = can.Control({
init: function(){
this.element.html(can.view('views/contactsList.ejs', {
contacts: this.options.contacts,
categories: this.options.categories
}));
}
})
當 Contacts 的實例被建立時， init() 會做兩件事：
使用can.view() 來渲染聯絡人。 can.view() 接收兩個參數：包含有範本和資料的檔案或stript標籤；將會傳回一個documentFragment (一個管理DOM元素的輕量容器)。
使用jQuery.html()將can.view() 的documentFragment 插入Control的元素
使用Model來表現資料
Model 是APP資料的抽象層。本APP用到兩個Model：一個對應聯絡人，一個對應類別。將以下程式碼加入contacts.js：
Contact = can.Model({
findAll: 'GET /contacts',
create : "POST /contacts",
update : "PUT /contacts/{id}",
destroy : "DELETE /contacts/{id}"
},{});
Category = can.Model({
findAll: 'GET /categories'
},{});
一個model 有5個方法可能定義來CRUD數據， 分別是findAll, findOne, create, update 和 destroy。你可以重寫這幾個方法，不過最好的方法就是使用 REST 服務（Representational State Transfer表述性狀態轉移）。如同上面的程式碼，你放心的忽略APP中不會用到的靜態方法了。
這裡要重點指出的是，model實例其實是源自 CanJS 的‘observables'。 can.Observe 提供物件的觀察者模式can.Observe.List 提供陣列的觀察模式。這表示你可以透過attr()來get和set數據，同時監聽數據的變動。
findAll() 方法傳回一個 Model.list，就是當元素被加入或移除時 can.Observe.List 所觸發的事件。
使用Fixture來模仿Rest
Fixture攔截 AJAX 請求並透過檔案或方法來模擬應答。這對測試，或者在後端還沒有就緒時是非常有用的。 Fixture就是APP的model模擬REST所需要的。
首先，你要準備一些資料給fixture，加入以下程式碼到：
var CONTACTS = [
{
id: 1,
name: 'William',
address: '1 CanJS Way',
email: 'william@husker.com',
phone: '0123456789',
category: 'co-workers'
},
{
id: 2,
name: 'Laura',
address: '1 CanJS Way',
email: 'laura@starbuck.com',
phone: '0123456789',
category: 'friends'
},
{
id: 3,
name: 'Lee',
address: '1 CanJS Way',
email: 'lee@apollo.com',
phone: '0123456789',
category: 'family'
}
];
var CATEGORIES = [
{
id: 1,
name: 'Family',
data: 'family'
},
{
id: 2,
name: 'Friends',
data: 'friends'
},
{
id: 3,
name: 'Co-workers',
data: 'co-workers'
}
];
有了數據，要將其連接到fixture來模擬REST 。 can.fixture()接收兩個參數。 我們要攔截的URL和我們應答應的文件和方法。通常你要攔截的URL都是動態且遵循一個模式的。在需要在URL裡加入以{}括起的通配符即可。
加入以下程式碼到contacts.js：
can.fixture('GET /contacts', function(){
return [連絡先];
});
var id= 4;
can.fixture("POST /連絡先", function(){
return {id: (id )}
});
can.fixture("PUT /contacts/{id}", function(){
return {};
});
can.fixture("DELETE /contacts/{id}", function(){
return {};
});
can.fixture('GET /categories', function(){
return [カテゴリ];
});
最初の 4 つのフィクスチャは、Contact モデルの GET、POST、PUT、および DELETE レスポンスをシミュレートし、5 番目のフィクスチャは、Category モデルの GET レスポンスをシミュレートします。
アプリを起動
あなたのアプリには、データを管理するモデル、連絡先を表示するビュー、そしてそれらすべてを整理するコントロールがあります。あとはアプリを起動するだけです。次に、アプリケーションをキックスタートする必要があります!
次のコードを contacts.js に追加します:
$(document).ready(function(){
$.when(Category.findAll(), Contact.findAll()).then(
Function(categoryResponse, contactResponse){
var category = categoryResponse[0],
連絡先 = contactResponse[0];
新しい連絡先('#contacts', {
連絡先: 連絡先、
カテゴリ: カテゴリ
});
});
});
このコードを分析してみましょう:
$(document).ready(function(){
jQuery.ready メソッドを使用して、DOM の準備状況を監視します。
$.when(Category.findAll(), Contact.findAll()).then(
function(categoryResponse, contactResponse){
2 つのモデルの findAll() メソッドを呼び出してすべての連絡先のタイプを取得します。 findAll() には遅延があるため、$.when() はコールバック メソッドを実行する前に両方のリクエストが同時に完了することを保証します。
var category = categoryResponse[0],
連絡先 = contactResponse[0];
2 つの findAll() メソッドから Model インスタンスに対応するデータ セットを取得します。 応答によって返される配列の最初の要素です。
新しい連絡先('#contacts', {
連絡先: 連絡先、
カテゴリ: カテゴリ
});
#contacts 要素の連絡先のコントロールを作成します。連絡先とタイプのデータ セットは Control に渡されます。
ブラウザでアプリを開くと、次の連絡先リストが表示されます:
概要
これはチュートリアル シリーズの最初の記事です。CanJS の核心はすでに理解されています。
モデル APP データの抽象化レイヤー
データを HTML に変換するビュー テンプレート
コントロールはすべてを整理します