7 backbone例項todos分析(一)

2021-06-05 11:26:48 字數 1835 閱讀 5082

​經過前面的幾篇文章,backbone中的model,collection,router,view,都簡單的講了一下,我覺得看完這幾篇文章,你應該達到的水平,或者說我要達到的目的就是:已經能夠在自己的web專案或者是平時的練習中用的上backbone了。

其實對於乙個web開發老手來說,基本上看完前面的內容,你已經可以把backbone的使用和自己的開發經驗結合起來進行應用了,要想更進一步的話需要去看backbone的官方文件,或者去看官方例項。

這裡我就backbone官網上的例項todos進行下分析,畢竟人家自己的東西,自己寫出來應該能夠把backbone的特性發揮的淋漓盡致,並且**應該也是足夠優秀的,不然也會放出來讓大家參考。

​首先應該來看下功能,先看截圖:

​從這個介面我們可以總結出來,這個todos有哪些功能:

1、新增任務。

2、修改任務(包括內容,狀態)。

3、刪除任務。

4、任務完成情況統計。

總體上就這四項功能。

​這個專案僅僅是在web端執行的,沒有伺服器進行支援,所以專案中使用了乙個叫做backbone-localstorage的js庫,用來把資料儲存到前端。

因為backbone為mvc模式,根據對這種模式的使用經驗,我們應該從分析其資料模型開始。當然,你也可以從其他地方入手。

這裡我們顯然是可以看到它的源**的,所以直接來看其model層,:

/***基本的todo模型,屬性為:content,order,done。

**/var todo = backbone.model.extend(,

//確保每乙個content都不為空

initialize:

function()

);}}

,// 將乙個任務的完成狀態置為逆狀態

toggle:

function()

);},

//從localstorage中刪除乙個條目

clear:

function()

});

這段**是很好理解的,不過我依然是畫蛇添足的加上了一些注釋。這個todo顯然就是對應頁面上的每乙個任務條目。那麼顯然應該有乙個collection來統治(管理)所有的任務,所以再來看collection:

/***todo的乙個集合,資料通過localstorage儲存在本地。

**/var todolist = backbone.collection.extend()

;},//獲取任務列表中未完成的任務陣列

remaining:

function()

,//獲得下乙個任務的排序序號,通過資料庫中的記錄數加1實現。

nextorder:

function()

,//backbone內建函式,根據todo物件的加入順序進行排列

comparator:

function

(todo)})

; collection的主要功能有以下幾個:

1、按序存放todo物件;2、獲取完成的任務數目;3、獲取未完成的任務數目;4、獲取下乙個要插入資料的序號。

這裡面有三個新的函式需要解釋下:

第乙個是comparator,這是backbone的內建函式,起作用就是collection中資料的排序依據。文件參考這裡:

第二個是獲取完成任務數目時呼叫的this.filter 這個函式,它是underscore的內建函式,作用是遍歷當前物件,然後過濾出物件中指定內容為true的物件,並將這些物件放到陣列中返回。參考文件:

這篇文章先分析到這裡,下篇文章繼續分析。

ps:這一系列的文章目錄正在整理,所以前面的幾節內容請先移步到我的新部落格:the_fire新部落格

long sql優化例項 todo

create table hbt messageflow id int 11 not null auto increment,shopid int 11 default null,receive varchar 50 not null comment 接收方 configid int 11 defa...

IIS7 URL Rewrite 用法例項

原文 iis7 url rewrite 用法例項 通過iis url rewrite 模組 url rewrite module 你可以很方便建立這一邏輯而不需要修改正在使用的rewrite maps 我將告訴你從iis管理器裡來實現。開啟iis管理器,選擇 default web site 在 功...

裝置模型7之韌體開發(例項)

這個主題主要說的就是韌體檔案的讀寫,它為我們提供了乙個把使用者檔案讀入核心的機制。前面的例項 在實際的一些驅動中可能很少見到,但這一節所說的東西就比較實用了。首先說一下韌體檔案。ldd3 件到它裡面.硬體市場的許多地方的競爭是如此得強烈,以至於甚至一點用作 裝置控制韌體的 eeprom 的成本製造商...