BACKBONE.JS簡單入門范例-創(chuàng)新互聯(lián)

11年剛開始用前端MVC框架時寫過一篇文章，當時Knockout和Backbone都在用，但之后的項目全是在用Backbone，主要因為它簡單、靈活，無論是富JS應用還是企業(yè)網(wǎng)站都用得上。相比React針對View和單向數(shù)據(jù)流的設(shè)計，Backbone更能體現(xiàn)MVC的思路，所以針對它寫一篇入門范例，說明如下：

創(chuàng)新互聯(lián)建站擁有一支富有激情的企業(yè)網(wǎng)站制作團隊，在互聯(lián)網(wǎng)網(wǎng)站建設(shè)行業(yè)深耕10多年，專業(yè)且經(jīng)驗豐富。10多年網(wǎng)站優(yōu)化營銷經(jīng)驗，我們已為上千多家中小企業(yè)提供了成都做網(wǎng)站、成都網(wǎng)站建設(shè)解決方案，按需定制，設(shè)計滿意，售后服務(wù)無憂。所有客戶皆提供一年免費網(wǎng)站維護!

1. 結(jié)構(gòu)上分4節(jié)，介紹Model/View/Collection，實現(xiàn)從遠程獲取數(shù)據(jù)顯示到表格且修改刪除；
2. 名為“范例”，所以代碼為主，每節(jié)的第1段代碼都是完整代碼，復制粘貼就能用，每段代碼都是基于前一段代碼來寫的，因此每段代碼的新內(nèi)容不會超過20行（大括號計算在內(nèi)）；
3. 每行代碼沒有注釋，但重要內(nèi)容之后有寫具體的說明；
4. 開發(fā)環(huán)境是Chrome，使用github的API，這樣用Chrome即使在本地路徑(形如file://的路徑)也能獲取數(shù)據(jù)。

0. Introduction

幾乎所有的框架都是在做兩件事：一是幫你把代碼寫在正確的地方；二是幫你做一些臟活累活。Backbone實現(xiàn)一種清晰的MVC代碼結(jié)構(gòu)，解決了數(shù)據(jù)模型和視圖映射的問題。雖然所有JS相關(guān)的項目都可以用，但Backbone最適合的還是這樣一種場景：需要用JS生成大量的頁面內(nèi)容(HTML為主)，用戶跟頁面元素有很多的交互行為。

Backbone對象有5個重要的函數(shù)，Model/Collection/View/Router/History。Router和History是針對Web應用程序的優(yōu)化，建議先熟悉pushState的相關(guān)知識。入門階段可以只了解Model/Collection/View。將Model視為核心，Collection是Model的集合，View是為了實現(xiàn)Model的改動在前端的反映。

1. Model

Model是所有JS應用的核心，很多Backbone教程喜歡從View開始講，其實View的內(nèi)容不多，而且理解了View意義不大，理解Model更重要。以下代碼實現(xiàn)從github的API獲取一條gist信息，顯示到頁面上：

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.1.js"></script>
<script type="text/javascript" src="http://underscorejs.org/underscore-min.js"></script>
<script type="text/javascript" src="http://backbonejs.org/backbone-min.js"></script>

<link  rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="stylesheet">
</head>
<body>
 <table id="js-id-gists" class="table">
  <thead><th>description</th><th>URL</th><th>created_at</th></thead>
  <tbody></tbody>
 </table>
 <script type="text/javascript">
 var Gist = Backbone.Model.extend({
  url: 'https://api.github.com/gists/public',
  parse: function (response) {
   return (response[0]);
  }
 }),
  gist = new Gist();

 gist.on('change', function (model) {
  var tbody = document.getElementById('js-id-gists').children[1],
   tr = document.getElementById(model.get('id'));
  if (!tr) {
   tr = document.createElement('tr');
   tr.setAttribute('id', model.get('id'));
  }
  tr.innerHTML = '<td>' + model.get('description') + '</td><td>' + model.get('url') + '</td><td>' + model.get('created_at') + '</td>';
  tbody.appendChild(tr);
 });
 gist.fetch();
 </script>
</body>
</html>

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

新聞標題：BACKBONE.JS簡單入門范例-創(chuàng)新互聯(lián)
網(wǎng)頁鏈接：http://muchs.cn/article34/djgcpe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站制作、網(wǎng)站排名、網(wǎng)站營銷、動態(tài)網(wǎng)站、App開發(fā)、自適應網(wǎng)站

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容