前端輕量級MVC框架CanJS詳解

2019-11-20 14:06:08

字體：大中小

來源：轉載

供稿：網友

選擇正確的庫

創建一個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：

復制代碼代碼如下:

<!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包含有而且支持動態綁定。
EJS 模板的標簽與HTML很像，支持包含JS代碼，三種常用標簽如下：
<% CODE %> 執行JS
<%= CODE %> 執行JS，并將非轉義的結果寫入當前位置的HTML
<%== CODE %> 執行JS，并將轉義的結果寫入當前位置的HTML(用于子模板).
模板可以從文件或者script標簽中加載得到，本教程從 EJS 文件加載。

顯示聯系人

要創建聯系人，你得先建立一個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 會渲染一個聯系人列表，我們分析一下此模板:

復制代碼代碼如下:

<% list(contacts, function(contact){ %>

list()方法里的回調方法如果配合配置有觀察者的list使用時，一旦list的數據發生改變就運用動態綁定重復調用。

復制代碼代碼如下:

<li class="contact span8" <%= (el)-> el.data('contact', contact) %>>

以上代碼通過元素的回調方法生成一個有聯系人數據的<li>。箭頭后的方法執行后將el對象的數據設置給對應的元素。

復制代碼代碼如下:

<%== can.view.render('views/contactView.ejs', {
  contact: contact, categories: categories
}) %>

以上代碼將子模板contactView.ejs 渲染成一個聯系人。 can.view.render() 以模板和數據為參數返回HTML。

渲染單個聯系人

子模板是一個將view組織成可管理塊的好辦法。同時也使你的模板簡單和易于重用。教程后面將會用到此模板來創建聯系人，將下面的代碼保存為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>

聯系人的屬性都放入了 <input> 標簽里，這就可以編輯更新用戶的資料。

活化你的View（好文藝。。）

EJS 處理模板過程中如果有用到attr() ，它周圍的代碼將會交由事件處理器管理，監聽對應屬性的變化，當屬性發生變化，APP中關聯的UI將會被更新。這功能利益于模板動態綁定機制，EJS的動態綁定是有選擇性的，只有使用了attr()時才會為對應的屬性開啟。
我們通過 contactView.ejs 中一個<input>標簽來了解它的用法：

復制代碼代碼如下:

<input type="text" name="name" placeholder="Add Name"
  <%= contact.attr('name') ? "value='" + contact.name + "'" : "class='empty'" %>>

特殊標記里的代碼將轉變成事件綁定到此聯系人的name屬性上。當name屬性發生變化，事件將被觸發同時HTML結構會被更新。

使用can.Control來處理業務邏輯

can.Control 創建了一個可組織，內在無泄漏，全權控制器，能用來創建widget或者處理業務邏輯。你通過所需要數據為一個DOM元素創建一個Control實例，可以在你的Control中定義方法綁定事件。
當 Control 所關聯的元素從DOM被刪除時，Contol會自去銷毀自己，同時清除所綁定的方法。
要創建一個 Control，通過傳入你定義的包含有函數的對象給 can.Control() 來實現繼承。接下來事件也給傳進去了。
每個Contol實例都有幾個重要的值和方法規范：
this 亚洲香蕉成人av网站在线观看_欧美精品成人91久久久久久久_久久久久久久久久久亚洲_热久久视久久精品18亚洲精品_国产精自产拍久久久久久_亚洲色图国产精品_91精品国产网站_中文字幕欧美日韩精品_国产精品久久久久久亚洲调教_国产精品久久一区_性夜试看影院91社区_97在线观看视频国产_68精品久久久久久欧美_欧美精品在线观看_国产精品一区二区久久精品_欧美老女人bb