Backbone有什么優缺點?
優點
1、輕量、入門上手簡單。
2、MVC架構清晰,很容易就能把各層分離出來。
不足
1、View層實現的比較簡單,沒有操作DOM的方法,如果要做復雜操作需要依賴其他庫。
2、感覺資料比較少、優秀的文章少。
(個人通過學習的感覺)
基礎
Model、Collection、View、Router。
Model是數據模型,里面存在基礎數據以及圍繞著數據的轉換、驗證、計算以及請求等邏輯。
Collection是Model對象的有序集合。其中就有增刪、獲取長度、排序、比較等工具方法。
View中把Model中的數據展現出來,同時監聽Model中的數據變化以及綁定DOM事件。
Router是路由的意思,可以通過不同的url來建立不同的視圖等。(理解的比較少)
(在網上找到的圖感覺記錄的比較全面,里面也有很多自己沒使用過的東西,自己也沒有整理過每個部分的api等,就不自己畫了。)
各模塊間的關系
Model中保存著數據,Collection是同一個Model的集合,View可以監聽Model中的數據變化,也可以監聽Collection中Model的變化,在View層中綁定事件,事件可能會觸發Model或Collection的變化,觸發監聽的回調事件。如果發生URL變化Router就會根據URL判斷View的建立和銷毀問題這樣就可以在一個頁面中通過View的建立銷毀實現單頁面應用(Router沒自己用過,暫時這么理解)。
TODOList
功能分析
TODOList是記錄任務的一個功能。
1、添加任務
2、完成任務
3、刪除任務
4、全部完成
實現
樣式直接使用官網提供Demo的默認樣式,只是重寫了JS部分。
Model:
一條Task就應該是一個Model,記錄當前任務的內容以及完成狀態,defaluts是給新建的對象的默認值,另外需要修改狀態的方法,因為是修改數據的方法,所以寫在Model中,如果需要修改內容,直接在Model中定義相應方法即可。代碼如下:
Collection:
TasksCollection就是每一個Task的集合,首先指定是哪個Model的集合,接下來獲取localStroage中的數據或者新建一個,然后提供兩個方法來把集合中的Task分為已完成和未完成的。
View:
寫的時候就在想,為什么把View分為兩個,如果寫成一個會有問題嗎?
自己的理解就是一個Task是一個Model對應一個View,而總體的Collection也需要一個View去監聽變化,好像也沒辦法寫在一起,會導致邏輯混亂,可見如何劃分View也是應該好好去思考的。
TaskView是每個任務的視圖,首先設定一個標簽li指定為根元素,即產生的DOM元素的根元素就是li,template使用的是underscore.js中自帶的方法,自己沒看使用方法,但確實是用起來比artTemplate麻煩多了,然后進行事件綁定,我們需要的只有兩種,一種是點擊checkbox切換任務狀態,另一種是刪除當前的任務。
initalize是初始化時自動調用的,在初始化時綁定監聽,監聽當前View對應的Model的變化——狀態變化、刪除。
render是渲染該條數據到頁面中。其他兩個方法都是調用Model中的方法。
AppView監聽的是Collection的變化,首先指定el,指定視圖DOM元素,然后指定模版,綁定事件與相應方法,具體就不寫了,和TaskView的形式類似。最后需要創建AppView實例。
總結
自己也只是進行了快速的瀏覽和簡單的做了一個簡單的DEMO,算是一個快速的上手,以前沒有使用過MVC框架,通過學習其實也對MVC的思想有了一定的理解(Controller的概念還是有點模糊),另外api的使用不太熟悉,還是需要上網查,自己對View的劃分也沒有實際做過,做的這個TODOList是一種多Model多View的形式,上次鳴旭的CodeReview是一種單Model多View的形式(用不到Collection),本次學習只是一個快速上手,自己還是需要以后繼續學習,一方面自己文檔熟悉api(自己業余時間學習),另一方面先通過view其他同學的代碼來思考別人的做法等。