經過前面的幾篇文章，Backbone中的Model, Collection，Router，View，都簡單的介紹了一下，我覺得看完這幾篇文章，差不多就能開始使用Backbone來做東西了，所有的項目無外乎對這幾個模塊的使用。不過對于實際項目經驗少些的同學，要拿起來用估計會有些麻煩。因此這里就先找個現成的案例分析一下。 ## 6.1 大家都來分析todos 關于Backbonejs實例分析的文章網上真是一搜一大把，之所以這么多，第一是這東西需求簡單，不用花時間到理解情景中；第二是代碼就是官方的案例，順手可得，也省得去找了，自己琢磨一個不得花時間嗎。 于是就有人問了，丫們都在分析todos，能不能有點新意呢。這問題要我說，如果你真的能把todos搞明白了，那其他的也就不用去看了。不管是看誰的分析，把這個搞明白的。所有的項目大體思路都差不多。尤其是對于這樣的MVC的模型，就是往對應的模塊里填東西。因此，不管有多少人都在分析這玩意，自己弄懂了才是應該關心的。 話雖如此，不同于網絡上的絕大部分的分析的是，the5fire除了分析這個，還是對其進行了擴充，另外在后面也會有真實的案例。但我也是從這些案例的代碼中汲取的營養。 補充一下，新版的todos代碼相較于之前簡直清晰太多，完全可以當做一個前端的范本來學習、模仿。 ## 6.2 獲取代碼 todos的代碼這里下載：[https://github.com/jashkenas/backbone/](https://github.com/jashkenas/backbone/)?，建議自己clone一份到本地。線上的地址是：[http://backbonejs.org/examples/todos/index.html](http://backbonejs.org/examples/todos/index.html) clone下來之后可以在example中找到todos文件夾，文件結構如下：: ~~~ examples ├── backbone.localStorage.js └── todos ├── destroy.png ├── index.html ├── todos.css └── todos.js 1 directory, 5 files ~~~ 用瀏覽器打開index.html文件，推薦使用chome瀏覽器，就可以看到和官網一樣的界面了。關鍵代碼都在todos.js這個文件里。 ## 6.3 功能分析 首先來分析下頁面上有哪些功能: [](https://camo.githubusercontent.com/0152ae81d2a5ffc5682bfad0a81c6c3eff7766b6/687474703a2f2f7468653566697265626c6f672e62302e7570616979756e2e636f6d2f73746174696366696c652f746f646f732e706e67) 從這個界面我們可以總結出來,下面這些功能: ~~~ * 任務管理 添加任務 修改任務 刪除任務 * 統計 任務總計 已完成數目 ~~~ 總體上就這幾個功能。 這個項目僅僅是在web端運行的，沒有服務器進行支持，因此在項目中使用了一個叫做backbone-localstorage的js庫，用來把數據存儲到前端。 ## 6.4 從模型下手 因為Backbone為MVC模式，根據對這種模式的使用經驗，我們從模型開始分析。首先我們來看Model部分的代碼: ~~~ /** *基本的Todo模型，屬性為：title,order,done。 **/ var Todo = Backbone.Model.extend({ // 設置默認的屬性 defaults: { title: "empty todo...", order: Todos.nextOrder(), done: false }, // 設置任務完成狀態 toggle: function() { this.save({done: !this.get("done")}); } }); ~~~ 這段代碼是很好理解的，不過我依然是畫蛇添足的加上了一些注釋。這個Todo顯然就是對應頁面上的每一個任務條目。那么顯然應該有一個collection來統治（管理）所有的任務，所以再來看collection： ~~~ /** *Todo的一個集合，數據通過localStorage存儲在本地。 **/ var TodoList = Backbone.Collection.extend({ // 設置Collection的模型為Todo model: Todo, //存儲到瀏覽器，以todos-backbone命名的空間中 //此函數為Backbone插件提供 //地址：https://github.com/jeromegn/Backbone.localStorage localStorage: new Backbone.LocalStorage("todos-backbone"), //獲取所有已經完成的任務數組 done: function() { return this.where({done: true}); }, //獲取任務列表中未完成的任務數組 //這里的where在之前是沒有的，但是語法上更清晰了 //參考文檔：http://backbonejs.org/#Collection-where remaining: function() { return this.where({done: false}); }, //獲得下一個任務的排序序號，通過數據庫中的記錄數加1實現。 nextOrder: function() { if (!this.length) return 1; // last獲取collection中最后一個元素 return this.last().get('order') + 1; }, //Backbone內置屬性，指明collection的排序規則。 comparator: 'order' }); ~~~ collection的主要功能有以下幾個：: ~~~ 1、獲取完成的任務; 2、獲取未完成的任務; 3、獲取下一個要插入數據的序號; 4、按序存放Todo對象。 ~~~ 如果你看過第一版的話，這里Backbone新的屬性和方法(comparator和where)用起來更加符合語義了。 這篇文章先分析到這里，下篇文章繼續分析。