前端輕量級MVC框架CanJS詳解
選擇正確的庫
創(chuàng)建一個JS APP沒有好的工具是很有難度的，jQuery只是操作DOM的庫，沒有提供任何創(chuàng)建APP的基礎(chǔ)，這就是為什么我們要一個類似CanJS的專門的庫。
CanJS 是一個輕量級的MVC庫，提供你創(chuàng)建一個JS APP所需的工具。
CanJS 是一個輕量級的MVC庫，提供你創(chuàng)建一個JS APP所需的工具。 它提供有MVC (Model-View-Control) 模式的基本框架，模板動態(tài)綁定， route的支持且 內(nèi)存安全。同時支持 jQuery, Zepto, Mootools, YUI, Dojo，有豐富的擴展和插件。
第一部分你將學(xué)到：
創(chuàng)建Control控制層 和 View 視圖層(UI模板) 來顯示聯(lián)系人
用Model模型層來表示數(shù)據(jù)
使用 fixtures 插件模擬ajax返回數(shù)據(jù)
你肯定激動了！我們開始碼代碼吧。
建立好你的文件夾和HTML
你先給你的APP創(chuàng)建一個文件夾，目錄下再建立4個子文件夾：css, js,views 和 img。如下：
contacts_manager
css
js
views
img
保存以下的代碼為 index.html：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CanJS Contacts Manager</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/contacts.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="span12">
<h1>Contacts Manager</h1>
</div>
</div>
<div class="row">
<div class="span3">
<div class="well">
<nav id="filter"></nav>
</div>
</div>
<div class="span9">
<div id="create"></div>
<div id="contacts"></div>
</div>
</div>
</div>
<script src=">
<script src="js/can.jquery.min.js"></script>
<script src="js/can.fixture.js"></script>
<script src="js/contacts.js"></script>
</body>
</html>
在頁面的底部你加載所需的JS（包括你的APP：contacts.js）。
教程中用到的CSS和圖片文件可以下載。
用View來打造你的UI
View是用來渲染你APP的UI模板。CanJS 支持多種模板引擎，本文用EJS ，CanJS包含有而且支持動態(tài)綁定。
EJS 模板的標(biāo)簽與HTML很像，支持包含JS代碼，三種常用標(biāo)簽如下：
<% CODE %> 執(zhí)行JS
<%= CODE %> 執(zhí)行JS，并將非轉(zhuǎn)義的結(jié)果寫入當(dāng)前位置的HTML
<%== CODE %> 執(zhí)行JS，并將轉(zhuǎn)義的結(jié)果寫入當(dāng)前位置的HTML(用于子模板).
模板可以從文件或者script標(biāo)簽中加載得到，本教程從 EJS 文件加載。
顯示聯(lián)系人
要創(chuàng)建聯(lián)系人，你得先建立一個EJS 模板，保存以下代碼為contactsList.ejs 進你的views 文件夾：
<ul class="clearfix">
<% list(contacts, function(contact){ %>
<li class="contact span8" <%= (el)-> el.data('contact', contact) %>>
<%== can.view.render('views/contactView.ejs', {
contact: contact, categories: categories
}) %>
</li>
<% }) %>
</ul>
contactLists.ejs 會渲染一個聯(lián)系人列表，我們分析一下此模板:
<% list(contacts, function(contact){ %>
list()方法里的回調(diào)方法如果配合配置有觀察者的list使用時，一旦list的數(shù)據(jù)發(fā)生改變就運用動態(tài)綁定重復(fù)調(diào)用。
<li class="contact span8" <%= (el)-> el.data('contact', contact) %>>
以上代碼通過元素的回調(diào)方法生成 一個有聯(lián)系人數(shù)據(jù)的<li>。 箭頭后的方法執(zhí)行后將el對象的數(shù)據(jù)設(shè)置給對應(yīng)的元素。
<%== can.view.render('views/contactView.ejs', {
contact: contact, categories: categories
}) %>
以上代碼將子模板contactView.ejs 渲染成一個聯(lián)系人。 can.view.render() 以模板和數(shù)據(jù)為參數(shù)返回HTML。
渲染單個聯(lián)系人
子模板是一個將view組織成可管理塊的好辦法。 同時也使你的模板簡單和易于重用。教程后面將會用到此模板來創(chuàng)建聯(lián)系人，將下面的代碼保存為contactView.ejs 進 views 文件夾：
<a href="javascript://" class="remove"><i class="icon-remove"></i></a>
<form>
<div class="row">
<div class="span2">
<img src="img/contact.png" width="100" height="100">
</div>
<div class="span3">
<input type="text" name="name" placeholder="Add Name"
<%= contact.attr('name') ? "value='" + contact.name + "'" : "class='empty'" %>>
<select name="category">
<% $.each(categories, function(i, category){ %>
<option value="<%= category.data %>" <%= contact.category === category.data ? "selected" : "" %>>
<%= category.name %>
</option>
<% }) %>
</select>
</div>
<div class="span3">
<label>Address</label>
<input type="text" name="address"
<%= contact.attr('address') ? "value='" + contact.address + "'" : "class='empty'" %>>
<label>Phone</label>
<input type="text" name="phone"
<%= contact.attr('phone') ? "value='" + contact.phone + "'" : "class='empty'" %>>
<label>Email</label>
<input type="text" name="email"
<%= contact.attr('email') ? "value='" + contact.email + "'" : "class='empty'" %>>
</div>
</div>
</form>
聯(lián)系人的屬性都放入了 <input> 標(biāo)簽里，這就可以編輯更新用戶的資料。
活化你的View（好文藝。。）
EJS 處理模板過程中如果有用到attr() ，它周圍的代碼將會交由事件處理器管理，監(jiān)聽對應(yīng)屬性的變化，當(dāng)屬性發(fā)生變化，APP中關(guān)聯(lián)的UI將會被更新。這功能利益于模板動態(tài)綁定機制，EJS的動態(tài)綁定是有選擇性的，只有使用了attr()時才會為對應(yīng)的屬性開啟。
我們通過 contactView.ejs 中一個<input>標(biāo)簽來了解它的用法：
<input type="text" name="name" placeholder="Add Name"
<%= contact.attr('name') ? "value='" + contact.name + "'" : "class='empty'" %>>
特殊標(biāo)記里的代碼將轉(zhuǎn)變成事件綁定到此聯(lián)系人的name屬性上。當(dāng)name屬性發(fā)生變化，事件將被觸發(fā)同時HTML結(jié)構(gòu)會被更新。
使用can.Control來處理業(yè)務(wù)邏輯
can.Control 創(chuàng)建了一個可組織，內(nèi)在無泄漏，全權(quán)控制器，能用來創(chuàng)建widget或者處理業(yè)務(wù)邏輯。你通過所需要數(shù)據(jù)為一個DOM元素創(chuàng)建一個Control實例，可以在你的Control中定義方法綁定事件。
當(dāng) Control 所關(guān)聯(lián)的元素從DOM被刪除時，Contol會自去銷毀自己，同時清除所綁定的方法。
要創(chuàng)建一個 Control，通過傳入你定義的包含有函數(shù)的對象給 can.Control() 來實現(xiàn)繼承。接下來事件也給傳進去了。
每個Contol實例都有幾個重要的值和方法規(guī)范：
this – Control 實例的引用
this.element – 實例中你所創(chuàng)建的DOM 元素
this.options – 創(chuàng)建實例所需要的參數(shù)對象
init() – 當(dāng)實例創(chuàng)建成功時被調(diào)用
管理聯(lián)系人
將以下代碼片段添加到contacts.js 文件來創(chuàng)建管理聯(lián)系人的Control：
Contacts = can.Control({
init: function(){
this.element.html(can.view('views/contactsList.ejs', {
contacts: this.options.contacts,
categories: this.options.categories
}));
}
})
當(dāng) Contacts 的實例被創(chuàng)建時， init() 會做兩件事：
使用can.view() 來渲染聯(lián)系人。 can.view() 接收兩個參數(shù)：包含有模板和數(shù)據(jù)的文件或者stript標(biāo)簽；將返回一個documentFragment (一個管理DOM元素的輕量容器)。
使用jQuery.html()將can.view() 的documentFragment 插入Control的元素
使用Model來表現(xiàn)數(shù)據(jù)
Model 是APP數(shù)據(jù)的抽象層。本APP用到兩個Model：一個對應(yīng)聯(lián)系人，一個對應(yīng)類別。將以下代碼添加到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數(shù)據(jù)， 分別是findAll, findOne, create, update 和 destroy。你可重寫這幾個方法，不過最好的辦法是使用 REST 服務(wù)（Representational State Transfer表述性狀態(tài)轉(zhuǎn)移）。正如上面的代碼，你放心的忽略APP中不會用到的靜態(tài)方法了。
這里要重點指出的是，model實例其實是源自 CanJS 的‘observables'。can.Observe 提供對象的觀察者模式can.Observe.List 提供數(shù)組的觀察模式。這意味著你可以通過attr()來get和set數(shù)據(jù)，同時監(jiān)聽數(shù)據(jù)的變動。
findAll() 方法返回一個 Model.list，就是當(dāng)元素被添加或者移除時 can.Observe.List 所觸發(fā)的事件。
使用Fixture來模仿Rest
Fixture攔截 AJAX 請求并通過文件或者方法來模擬應(yīng)答。這對測試，或者后端還沒有就緒時是非常有用的。Fixture就是APP的model模擬REST所需要的。
首先，你要準(zhǔn)備一些數(shù)據(jù)給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'
}
];
有了數(shù)據(jù)，要將其連接到fixture來模擬REST 。can.fixture()接收兩個參數(shù)。 我們要攔截的URL和我們應(yīng)答用的文件和方法。通常你要攔截的URL都是動態(tài)且遵循一個模式的。在需要在URL里添加以{}括起的通配符即可。
添加以下代碼到contacts.js：
can.fixture('GET /contacts', function(){
return [CONTACTS];
});
var id= 4;
can.fixture("POST /contacts", function(){
return {id: (id++)}
});
can.fixture("PUT /contacts/{id}", function(){
return {};
});
can.fixture("DELETE /contacts/{id}", function(){
return {};
});
can.fixture('GET /categories', function(){
return [CATEGORIES];
});
前4個 fixture模擬 Contact model的GET, POST, PUT 和 DELETE 應(yīng)答，第5個模擬 Category model的GET應(yīng)答。
啟動APP
你的APP有管理數(shù)據(jù)的Model，渲染聯(lián)系人的 View，將這一切組織起來的的Control?，F(xiàn)在要做的就是啟動APP了。 Now you need to kickstart the application!
將以下代碼添加到contacts.js ：
$(document).ready(function(){
$.when(Category.findAll(), Contact.findAll()).then(
function(categoryResponse, contactResponse){
var categories = categoryResponse[0],
contacts = contactResponse[0];
new Contacts('#contacts', {
contacts: contacts,
categories: categories
});
});
});
我們來分析一下這段代碼：
$(document).ready(function(){
使用 jQuery.ready 方法監(jiān)聽DOM的ready。
$.when(Category.findAll(), Contact.findAll()).then(
function(categoryResponse, contactResponse){
調(diào)用兩個Model的 findAll() 方法來獲取全部聯(lián)系人的類型，由于findAll() 有延時， $.when()則確保兩個請求同時完成后才執(zhí)行回調(diào)方法。
var categories = categoryResponse[0],
contacts = contactResponse[0];
從兩個 findAll() 方法中獲取對應(yīng)Model實例的數(shù)據(jù)集。 是應(yīng)答所返回的數(shù)組的第一個元素。
new Contacts('#contacts', {
contacts: contacts,
categories: categories
});
為 #contacts 元素創(chuàng)建Contact 的Control 。聯(lián)系人和類型數(shù)據(jù)集傳進Control。
用瀏覽器打開你的APP，你將看到如下的聯(lián)系人列表：
總結(jié)
這是第教程系列的第一篇，你已經(jīng)了解了CanJS的核心：
Models 你的APP數(shù)據(jù)的抽象層
Views 將數(shù)據(jù)轉(zhuǎn)換成HTML的模板
Controls 組織關(guān)聯(lián)一切
- Extjs4.1.x 框架搭建 采用Application動態(tài)按需加載MVC各模塊完美實現(xiàn)
- Javascript MVC框架Backbone.js詳解
- 超級簡單實現(xiàn)JavaScript MVC 樣式框架
- 12種JavaScript常用的MVC框架比較分析
- 講解JavaScript的Backbone.js框架的MVC結(jié)構(gòu)設(shè)計理念
- 使用jQuery.form.js/springmvc框架實現(xiàn)文件上傳功能
- Angularjs中的事件廣播 —全面解析$broadcast,$emit,$on
- AngularJs解決跨域問題案例詳解(簡單方法)
- jquery.form.js框架實現(xiàn)文件上傳功能案例解析（springmvc）
- indexedDB bootstrap angularjs之 MVC DOMO (應(yīng)用示例)
- AngularJs Javascript MVC 框架
相關(guān)文章
正在學(xué)習(xí)Sizzle源碼或有一定前端基礎(chǔ)的同學(xué)們，可以一邊看源碼一邊看這些文章進行驗證，所以雖然我會分析源碼中的正則表達式,有大量的注釋，但不會講正則表達式的基本用法！2015-04-04
TypeScript?5.0?正式發(fā)布及使用指南詳解
這篇文章主要為大家介紹了TypeScript?5.0?正式發(fā)布及使用指南，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-03-03
移動設(shè)備web開發(fā)首選框架：zeptojs介紹
這篇文章主要介紹了移動設(shè)備web開發(fā)首選框架：zeptojs介紹,他兼容jquery的API,所以學(xué)起來或用起來并不吃力,需要的朋友可以參考下2015-01-01
這篇文章主要為大家介紹了TS 中的類型推斷與放寬實例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-10-10
數(shù)據(jù)結(jié)構(gòu)TypeScript之鄰接表實現(xiàn)示例詳解
這篇文章主要為大家介紹了數(shù)據(jù)結(jié)構(gòu)TypeScript之鄰接表實現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-01-01
詳解Typescript?嚴(yán)格模式有多嚴(yán)格
這篇文章主要為大家介紹了Typescript?嚴(yán)格模式有多嚴(yán)格實例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-01-01
這篇文章主要為大家介紹了CesiumJS源碼雜談之從光到Uniform的使用示例解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-04-04
Typescript使用裝飾器實現(xiàn)接口字段映射與Mock實例
這篇文章主要為大家介紹了Typescript使用裝飾器實現(xiàn)接口字段映射與Mock實例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-04-04
這篇文章主要介紹了Underscore.js常用方法總結(jié),本文講解了Underscore.js概述、在node.js下安裝、與集合有關(guān)的方法、與對象有關(guān)的方法、與函數(shù)相關(guān)的方法等內(nèi)容,需要的朋友可以參考下2015-02-02
這篇文章主要為大家介紹了鮮為人知的JavaScript中5個JSON秘密功能詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-06-06