1. 程式人生 > >backbone學習筆記一

backbone學習筆記一

router 內置 ear cti small 失敗 str 視圖view 避免

事件event

on(bind) 在對象上綁定一個函數,只要該event被觸發,綁定函數即被調用。可以用第三個參數提供一個上下文

off(unbind) 移除對象上綁定的函數,可以傳遞上下文和具體時間來解除特定的函數

trigger 觸發給定事件的函數

once 同on相同,區別在於事件被觸發一次後,函數就會被解除

listenTo 監聽另一個對象上的特定事件,貌似是仍然算該事件的綁定函數

stopListening 停止對事件的監聽

listenToOnce 同listenTo相同,事件被觸發一次後,函數就會被解除

事件目錄

  • "add" (model, collection, options) — 當一個model(模型)被添加到一個collection(集合)時觸發。
  • "remove" (model, collection, options) — 當一個model(模型)從一個collection(集合)中被刪除時觸發。
  • "reset" (collection, options) — 當該collection(集合)的全部內容已被替換時觸發。
  • "sort" (collection, options) — 當該collection(集合)已被重新排序時觸發。
  • "change" (model, options) — 當一個model(模型)的屬性改變時觸發。
  • "change:[attribute]" (model, value, options) — 當一個model(模型)的某個特定屬性被更新時觸發。
  • "destroy" (model, collection, options) —當一個model(模型)被destroyed(銷毀)時觸發。
  • "request" (model_or_collection, xhr, options) — 當一個model(模型)或collection(集合)開始發送請求到服務器時觸發。
  • "sync" (model_or_collection, resp, options) — 當一個model(模型)或collection(集合)成功同步到服務器時觸發。
  • "error" (model_or_collection, resp, options) — 當一個model(模型)或collection(集合)的請求遠程服務器失敗時觸發。
  • "invalid" (model, error, options) — 當model(模型)在客戶端validation(驗證)失敗時觸發。
  • "route:[name]" (params) — 當一個特定route(路由)相匹配時通過路由器觸發。
  • "route" (route, params) — 當任何一個route(路由)相匹配時通過路由器觸發。
  • "route" (router, route, params) — 當任何一個route(路由)相匹配時通過history(歷史記錄)觸發。
  • "all" — 所有事件發生都能觸發這個特別的事件,第一個參數是觸發事件的名稱。

當不想事件綁定的函數被觸發時,可以傳遞{silent: true}作為參數

個人感覺在此部分是將用戶行為與處理的js函數進行關聯的部分。主要的作用只是綁定、解除綁定。可以是對單獨對象的事件綁定也可以是對象間的事件綁定

模型model

個人感覺和類結構相似

extend 對某個父類進行繼承,形成新的新的子類

constructor/initialize 創建一個類的實例,可以傳入屬性的初始值。initialize函數在實例創建後執行,constructor是構造函數

get 獲得實例的屬性值

set 設置一系列屬性值,這些屬性的值被更改後會有事件被觸發

escape 獲得HTML轉義後的屬性值

has 判斷屬性是否存在和屬性值是否為空

unset 刪除屬性,會觸發屬性被更改的事件

clear 清除model的所有屬性,包括id,會觸發屬性被更改的事件

id idAttribute cid 並不是十分清楚具體的區別 都是實例的屬性

attributes 獲取實例對象的所有屬性,通常以json對象的形式表示

changed 包含所有自最後一次set後值改變的屬性

defaults 為實例指定默認屬性值

toJSON 返回一個實例的JSON字符串形式

sync、fetch、save、destroy 並不是什麽了解和服務器交互的這四個函數

underscore方法

validate 在將數據存儲到服務器前驗證數據有效性

url parse 並沒有弄清楚

clone 返回一個相同的實例

hasChanged 自從上次set之後是否改變,功能和changed相同

changedAttribute 同changed相同,似乎是同一功能只為了細小差別而

previous 在change發生的過程中,用於獲取已經改變的舊值

previousAttribute 同上一個函數功能相同

個人感覺此部分就是對模型中存在的屬性進行操作,無外乎增刪改查操作

集合collection

集合是模型的有序組合,似乎是比模型更高層次,函數是對集合中模型的操作

extend 繼承一個已經存在的collection

model 覆蓋此屬性來指定集合中包含的模型類,似乎這裏指的是集合中包含的model的範圍,而下面models中則是集合中model的實例

constructor/initialize 在這裏需要註意的是,聲明一個新的集合可能需要comparator函數來為集合中的模型排序

models 訪問集合中模型的內置的javascript數組(這個不清楚是什麽,不過應該是模型數組)

toJSON 返回一個包含模型屬性的json數組

sync 同樣是與服務器的交互

add 向集合添加一個模型或者模型數組,會觸發add事件,這裏不清楚集合的索引到底是一個什麽結構,按理來說索引應該就是和數據本身的信息相關,但是這裏面可以將數據插入到特定的索引位置?

remove 從集合中刪除模型或者模型數組,會觸發remove事件

reset 用一個新的模型數組替換原來的模型數組,相當於將原來的數組全部更新,這裏也有事件觸發但是並沒有搞懂

set 將集合中的模型數組進行更改,感覺是簡化的reset,同樣會觸發add,remove,change事件

get 通過id,cid來獲取模型

at 通過索引來獲取模型

push 在集合尾部添加一個模型

pop 刪除並返回集合中最後一個模型

unshift 在集合頭部添加一個模型

shift 刪除並返回集合第一個模型

slice 返回一個模型數組,應該可以是集合中的模型數組的一部分

length 返回集合中模型的數量

comparator 集合所使用的排序規則

sort 強制對數組進行重新排序,這裏說道一般情況是用不到的,因為會用comparator進行實時排序

pluck 從集合中的每個模型拉取屬性,這裏我自己把它理解為在數據庫中選取單個屬性的信息並返回

where 對集合中的模型進行過濾並取得合適的結果,似乎和SQL語句中的where相同

findWhere 同where相同,不同的是findWhere返回匹配的第一個模型

url parse 並沒有弄清楚

clone 返回一個完全相同的新實例

fetch create 都是同服務器的交互,create似乎是創建一個模型的實例對象,將實例對象保存到服務器中,並同時添加到集合中,會觸發add事件

個人感覺是比模型更高層次的數據結構,不過將對屬性的操作改為對模型的操作

路由router

從來沒有接觸過的,看介紹是和url相關,但是本人對url的理解也不是很深刻。

extend 同以上的extend相同

routes 將帶參數的 URLs 映射到路由實例的方法上,匹配特定的url來觸發特定的事件

constructor/initialize 同以上的相同,總感覺這類方法是對框架有一定理解後才能用的比較恰當

route 將帶參數的 URLs 映射到路由實例的方法上

navigate 不是很清楚,介紹中說是與保存一個url相關,但並不清楚怎麽保存以及保存的url是什麽形式的,有什麽用

execute

歷史history

留待後續

視圖view

這也是一個不是很了解的部分,google到的信息是視圖層最主要的是監聽模型層上的數據改變,並且實時的更新html頁面。當然也包括一些事件的註冊或者ajax請求操作(發布事件),都是放在視圖層來完成。

extend 與上面相同,不過與其說是一個繼承的函數,還不如說是一個根據backbone提供的基類來定義自己的屬性的創建新類的手段

construtor/initialize 與上面相同,不過這裏提到有幾個屬性一旦說明就會註入到視圖中,不懂這是什麽意思,難道其他屬性不是嗎?

el 所有視圖都擁有的屬性,是DOM元素

$el 一個視圖元素的緩存jQuery對象。 一個簡單的引用,而不是重新包裝的DOM元素。不懂這是什麽意思

setElement 應用backbone視圖到DOM元素上,不過既不懂backbone視圖是什麽,又不懂DOM元素為什麽需要backbone視圖

template

render 默認實現是沒有操作的,本函數的作用是從模型數據渲染視圖模板,這個也不知道具體怎麽回事,不過個人感覺應該是後面經常用到的,比較重要的一部分

remove 從DOM中移除一個視圖,同時移除綁定在視圖上的所有事件。但是...視圖是怎麽綁定上事件的...對視圖真的是沒有一點具象的理解

delegateEvents undelegateEvents 第一個不知道是什麽意思,第二個是刪除視圖所有委托事件

實用功能utility

noConflict 返回對象的原始信息,避免沖突,似乎是當backbone中的對象太多時,可以用此方法來使用局部的對象

$ 似乎是設置$符號依賴哪個庫

backbone學習筆記一