在前兩篇文章中，我們已經對這個todos的功能、數據模型以及各個模塊的實現細節進行了分析，這篇文章我們要對前面的分析進行一個整合。 首先讓我們來回顧一下我們分析的流程：1\. 先對頁面功能進行了分析；2\. 然后又分析了數據模型；3\. 最后又對view的功能和代碼進行了詳解。你是不是覺得這個分析里面少了點什么？沒錯，就知道經驗豐富的你已經看出來了，這里面少了對于流程的分析。這篇文章就對整體流程進行分析。 所以從我的分析中可以看的出來，我是先對各個原材料進行分析，然后再整體的分析（當然前提是我是理解流程的），這并不是分析代碼的唯一方法，有時我也會采用跟著流程分析代碼的方法。當然還有很多其他的分析方法，大家都有自己的套路嘛。 下面簡單的說說流程分析的方法。記得多年前在學vb的時候，分析一個完整項目代碼的時候，習慣從程序的入口點開始分析。雖然web網站和桌面軟件的實現不同，但是大致思路是一樣的（同時也有網站即軟件的說法，在RESTful架構中）。所以我們要先找到網站的入口點所在。 和桌面應用項目的分析一樣，網站的入口點就在于網頁加載的時候。對于todos，自然就是在頁面加載完之后執行的操作了，然后就看到下面的代碼。 首先是對AppView的一個實例化： ~~~ var App = new AppView; ~~~ 實例化，自然就會調用構造函數： ~~~ //在初始化過程中，綁定事件到Todos上， //當任務列表改變時會觸發對應的事件。 //最后從localStorage中fetch數據到Todos中。 initialize: function() { this.input = this.$("#new-todo"); this.allCheckbox = this.$("#toggle-all")[0]; this.listenTo(Todos, 'add', this.addOne); this.listenTo(Todos, 'reset', this.addAll); this.listenTo(Todos, 'all', this.render); this.footer = this.$('footer'); this.main = $('#main'); Todos.fetch(); }, ~~~ 注意其中的Todos.fetch()方法，前面說過，這個項目是在客戶端保存數據，所以使用fetch方法并不會發送請求到服務器。另外在前面關于collection的單獨講解中我們也介紹了fetch執行完成之后，會調用set（默認）或者reset（需要手動設置`{reset: true}`?）。所以在沒有指明fetch的reset參數的情況下，backbonejs的Collection中的set方法會遍歷Todos的內容并且調用add方法。 在initialize中我們綁定了add到addOne上，因此在fetch的時候會Backbonejs會幫我們調用addOne（其實也是在collection的set方法中）。和collection中的set類似的，我們可以自定義reset方法，自行來處理fetch到得數據，但是需要在fetch時手動添加reset參數。 PS: 感謝網友指正 這里先來看下我們綁定到reset上的addAll方法是如何處理fetch過來的數據的: ~~~ // 添加一個任務到頁面id為todo-list的div/ul中 addOne: function(todo) { var view = new TodoView({model: todo}); this.$("#todo-list").append(view.render().el); }, // 把Todos中的所有數據渲染到頁面,頁面加載的時候用到 addAll: function() { Todos.each(this.addOne, this); }, ~~~ 在addAll中調用addOne方法，關于Todos.each很好理解，就是語法糖（簡化的for循環）。關于addOne方法的細節下面介紹。 然后再來看添加任務的流程，一個良好的代碼命名風格始終是讓人滿心歡喜的。因此很顯然，添加一個任務，自然就是addOne,其實你看events中的綁定也能知道，先看一下綁定： ~~~ // 綁定dom節點上的事件 events: { "keypress #new-todo": "createOnEnter", "click #clear-completed": "clearCompleted", "click #toggle-all": "toggleAllComplete" }, ~~~ 這里并沒有addOne方法的綁定，但是卻有createOnEnter，語意其實一樣的。來看主線，createOnEnter這個方法： ~~~ /* 創建一個任務的方法，使用backbone.collection的create方法。將數據保存到localStorage,這是一個html5的js庫。需要瀏覽器支持html5才能用。 */ createOnEnter: function(e) { if (e.keyCode != 13) return; if (!this.input.val()) return; //創建一個對象之后會在backbone中動態調用Todos的add方法，該方法已綁定addOne。 Todos.create({title: this.input.val()}); this.input.val(''); }, ~~~ 注釋已寫明，Todos.create會調用addOne這個方法。由此順理成章的來到addOne里面： ~~~ //添加一個任務到頁面id為todo-list的div/ul中 addOne: function(todo) { var view = new TodoView({model: todo}); this.$("#todo-list").append(view.render().el); }, ~~~ 在里面實例化了一個TodoView類，前面我們說過，這個類是主管各個任務的顯示的。具體代碼就不細說了。 有了添加再來看更新，關于單個任務的操作，我們直接找TodoView就ok了。所以直接找到 ~~~ // 為每一個任務條目綁定事件 events: { "click .toggle" : "toggleDone", "dblclick .view" : "edit", "click a.destroy" : "clear", "keypress .edit" : "updateOnEnter", "blur .edit" : "close" }, ~~~ 其中的edit事件的綁定就是更新的一個開頭，而updateOnEnter就是更新的具體動作。所以只要搞清楚這倆方法的作用一切就明了了。這里同樣不用細說。 在往后還有刪除一條記錄以及清楚已有記錄的功能，根據上面的分析過程，我想大家都很容易的去‘順藤模瓜’。 關于Todos的分析到此就算完成了。 在下一篇文章中我們將一起來學習通過web.py來搭建web服務器，以及簡單的數據庫的使用。