Backbone.js學習記錄

Backbone有什么優缺點?

優點
1、輕量、入門上手簡單。
2、MVC架構清晰,很容易就能把各層分離出來。
不足
1、View層實現的比較簡單,沒有操作DOM的方法,如果要做復雜操作需要依賴其他庫。
2、感覺資料比較少、優秀的文章少。
(個人通過學習的感覺)

基礎
Model、Collection、View、Router。

Model是數據模型,里面存在基礎數據以及圍繞著數據的轉換、驗證、計算以及請求等邏輯。

model.png

Collection是Model對象的有序集合。其中就有增刪、獲取長度、排序、比較等工具方法。

collection.png

View中把Model中的數據展現出來,同時監聽Model中的數據變化以及綁定DOM事件。

view.png

Router是路由的意思,可以通過不同的url來建立不同的視圖等。(理解的比較少)
(在網上找到的圖感覺記錄的比較全面,里面也有很多自己沒使用過的東西,自己也沒有整理過每個部分的api等,就不自己畫了。)

各模塊間的關系
關系.png

Model中保存著數據,Collection是同一個Model的集合,View可以監聽Model中的數據變化,也可以監聽Collection中Model的變化,在View層中綁定事件,事件可能會觸發Model或Collection的變化,觸發監聽的回調事件。如果發生URL變化Router就會根據URL判斷View的建立和銷毀問題這樣就可以在一個頁面中通過View的建立銷毀實現單頁面應用(Router沒自己用過,暫時這么理解)。

TODOList
todolist.png
功能分析

TODOList是記錄任務的一個功能。
1、添加任務
2、完成任務
3、刪除任務
4、全部完成

實現

樣式直接使用官網提供Demo的默認樣式,只是重寫了JS部分。
Model:
一條Task就應該是一個Model,記錄當前任務的內容以及完成狀態,defaluts是給新建的對象的默認值,另外需要修改狀態的方法,因為是修改數據的方法,所以寫在Model中,如果需要修改內容,直接在Model中定義相應方法即可。代碼如下:

modelCode.png

Collection:
TasksCollection就是每一個Task的集合,首先指定是哪個Model的集合,接下來獲取localStroage中的數據或者新建一個,然后提供兩個方法來把集合中的Task分為已完成和未完成的。

collectionCode.png

View:
寫的時候就在想,為什么把View分為兩個,如果寫成一個會有問題嗎?
自己的理解就是一個Task是一個Model對應一個View,而總體的Collection也需要一個View去監聽變化,好像也沒辦法寫在一起,會導致邏輯混亂,可見如何劃分View也是應該好好去思考的。
TaskView是每個任務的視圖,首先設定一個標簽li指定為根元素,即產生的DOM元素的根元素就是li,template使用的是underscore.js中自帶的方法,自己沒看使用方法,但確實是用起來比artTemplate麻煩多了,然后進行事件綁定,我們需要的只有兩種,一種是點擊checkbox切換任務狀態,另一種是刪除當前的任務。
initalize是初始化時自動調用的,在初始化時綁定監聽,監聽當前View對應的Model的變化——狀態變化、刪除。
render是渲染該條數據到頁面中。其他兩個方法都是調用Model中的方法。

taskView.png

AppView監聽的是Collection的變化,首先指定el,指定視圖DOM元素,然后指定模版,綁定事件與相應方法,具體就不寫了,和TaskView的形式類似。最后需要創建AppView實例。

appView1.png
appview2.png
總結

自己也只是進行了快速的瀏覽和簡單的做了一個簡單的DEMO,算是一個快速的上手,以前沒有使用過MVC框架,通過學習其實也對MVC的思想有了一定的理解(Controller的概念還是有點模糊),另外api的使用不太熟悉,還是需要上網查,自己對View的劃分也沒有實際做過,做的這個TODOList是一種多Model多View的形式,上次鳴旭的CodeReview是一種單Model多View的形式(用不到Collection),本次學習只是一個快速上手,自己還是需要以后繼續學習,一方面自己文檔熟悉api(自己業余時間學習),另一方面先通過view其他同學的代碼來思考別人的做法等。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 230,362評論 6 544
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 99,577評論 3 429
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 178,486評論 0 383
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,852評論 1 317
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 72,600評論 6 412
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,944評論 1 328
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,944評論 3 447
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 43,108評論 0 290
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 49,652評論 1 336
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 41,385評論 3 358
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,616評論 1 374
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 39,111評論 5 364
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,798評論 3 350
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 35,205評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,537評論 1 295
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 52,334評論 3 400
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,570評論 2 379

推薦閱讀更多精彩內容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,745評論 25 708
  • Spring Cloud為開發人員提供了快速構建分布式系統中一些常見模式的工具(例如配置管理,服務發現,斷路器,智...
    卡卡羅2017閱讀 134,828評論 18 139
  • 發現 關注 消息 iOS 第三方庫、插件、知名博客總結 作者大灰狼的小綿羊哥哥關注 2017.06.26 09:4...
    肇東周閱讀 12,176評論 4 61
  • 鳳凰鳴矣,于彼高崗;梧桐生矣,于彼朝陽。 百花異彩,你卻獨愛那一抹潔白。 五月炎炎,我卻酷愛這一季的火熱,太...
    與哈哈閱讀 147評論 0 0
  • 即使立的再高 我也不會預料這一輪明月 怎會如此變換無常 不是不懂這風花雪月 其實無法面對的是 悲歡與離合 不是我不...
    因為愛所以執著閱讀 121評論 0 1