摘要:它通過數據模型進行鍵值綁定及事件處理,通過模型集合器提供一套豐富的用于枚舉功能,通過視圖來進行事件處理及與現有的通過接口進行交互。
本人兼職前端付費技術顧問,如需幫助請加本人微信hawx1993或QQ345823102,非誠勿擾
1.為初學前端而不知道怎么做項目的你指導 2.指導并扎實你的JavaScript基礎 3.幫你準備面試并提供相關指導性意見 4.為你的前端之路提供極具建設性的意見 5.讓你的學習更有效率,對知識點的理解更加透徹 6.不解答可以百度到的答案,也不解答你遇到的bug 付費(每月僅需99)能讓我更有耐心和責任心的為你指導,讓雙方產生更良好的協作基本概念 前言
昨天開始學Backbone.js,寫篇筆記記錄一下吧,一直對MVC模式挺好奇的,也對js中MVC的開創鼻祖懷著敬畏之心,唉,不說了,好虛偽,以下是我的學習心得和筆記。
給大家看一下全球js庫和框架的使用比例:
這是通過搜索引擎抓取script標簽統計而來的數據,可信度相當高啊,另外,不要迷戀Angular.js,Avalon.js還是挺不錯的。
Backbone.js是十大JS框架之首,Backbone.js 是一個重量級js MVC 應用框架,也是js MVC框架的鼻祖。它通過Models數據模型進行鍵值綁定及custom事件處理,通過模型集合器Collections提供一套豐富的API用于枚舉功能,通過視圖Views來進行事件處理及與現有的Application通過JSON接口進行交互。
簡而言之,Backbone是實現了web前端MVC模式的js庫
什么是MVC?MVC:后端服務器首先(過程1)通過瀏覽器獲取頁面地址,對網址進行解析,得到視圖View給它的一個網址,然后通過控制器controller進行解析,然后去找對應的數據(過程2),找到數據后,再將數據Model返回給控制器(過程3),控制器controller再對數據進行加工,最后返回給視圖(過程4),即更新視圖View。這種結構在后端是非常清晰且易實現的
Backbone中MVC的機制Backbone將數據呈現為模型, 你可以創建模型、對模型進行驗證和銷毀,甚至將它保存到服務器。 當UI的變化引起模型屬性改變時,模型會觸發"change"事件; 所有顯示模型數據的視圖會接收到該事件的通知,繼而視圖重新渲染。 你無需查找DOM來搜索指定id的元素去手動更新HTML。 — 當模型改變了,視圖便會自動變化?!俣劝倏?/p>
模式:一種解決問題的通用方法
—設計模式:工廠模式、適配器模式和觀察者模式 —框架模式:MVC、MVP、MVVM
控制器:通過控制器來連接視圖與模型。
MVC模式的思想:
就是把模型與視圖分離,通過控制器來連接他們 服務器端MVC模式非常容易實現
Model:模型即數據,模型 是所有 js 應用程序的核心,包括交互數據及相關的大量邏輯: 轉換、驗證、計算屬性和訪問控制。你可以用特定的方法擴展 Backbone.Model
View:即你在頁面上所能看到的視圖。每一個單一的數據模型對應一個視圖View
web頁面本身就是一個很大的view,不太容易做到分離操作,backbone.js適合復雜的大型開發,并為我們解決了這些難題
backbone的模塊backbone有如下幾個模塊:
Events:事件驅動模塊 Model:數據模型 Collection:模型集合器 Router:路由器(對應hash值) History:開啟歷史管理 Sync:同步服務器方式 View:視圖(含事件行為和渲染頁面 相關方法)
集合器Collection是對多帶帶的數據模型進行統一控制
直接創建對象Backbone依賴于Underscore.js, DOM 處理依賴于 Backbone.View 和 jQuery ,因此,在引入Backbone.js之前,Underscore.js必須在它之前引入,而jQuery也最好一并引入,最后再引入Backbone.js
var model = new Backbone.Model(); var col = new Backbone.Collection(); var view = new Backbone.View();
new后面是一個構造函數,而Backbone是作為構造函數的命名空間來使用的
Model模塊Backbone.Model.extend(properties, [classProperties])
Backbone通過extend來擴展實例方法和靜態方法:
靜態方法其實就是多了一個命名空間。以上是給構造函數添加實例方法和靜態方法
var M = Backbone.Model.extend({})
通過extend來為模型的構造函數擴展方法,M就是擴展之后的構造函數
繼承事件驅動模塊
自定義事件:自定義事件比較適合多人合作開發,因為我們知道,函數名如果一樣的話,那么后面的函數會覆蓋前面的,而事件在綁定的情況下是不會被覆蓋的。
事件綁定
除此之外,我們還可以自定義要綁定的被改變的數據類型:
object.on(event, callback, [context])
綁定一個回調函數到一個對象上, 當事件觸發時執行回調函數 :
listenTo
模型集合器
Backbone.Collection
集合是模型的有序組合,我們可以在集合上綁定 "change" 事件,從而當集合中的模型發生變化時獲得通知,集合也可以監聽 "add" 和 “remove" 事件, 從服務器更新,并能使用 Underscore.js 提供的方法
路由與歷史管理事件委托
事件委托 格式:事件 + 空格 + 由誰來觸發 : 對應的回調函數
underscore.js是什么?underscore.js在不擴展任何js的原生對象的情況下提供很多實用的功能。它彌補了部分jQuery沒有實現的功能,同時又是Backbone.js必不可少的部分。underscore也針對模型和集合,提供了數組,對象,事件的常用方法。
Underscore提供了80多個函數,包括常用的: map, filter, invoke — 當然還有更多專業的輔助函數,如:函數綁定, JavaScript模板功能,創建快速索引, 強類型相等測試, 等等。
一張圖讓你看懂javascript各類型的關系
在underscore.js源碼中,我們可以看到:
(function() { var root = this;//創建root對象,在瀏覽器里指的是window對象,在服務器指的是global對象 var previousUnderscore = root._;//保存前面的值到變量底線(" _ ")中, //這樣做只是為了避免命名沖突 … })
_.這個符號代表underscore,就像$可以用來代表jQuery一樣。例如:
_.find(list, predicate, [context])
幾個常用屬性:
list:待遍歷的集合對象 literator:迭代器,即轉換函數 memo:初始值
最后:
一個經典的MVC實例:
http://backbonejs.org/example...
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/85387.html
摘要:因為是一條數據記錄,也就是說,相當于是一個數據集。通常我們需要重載函數,聲明,以及通過或為視圖指定根元素。通過綁定視圖的函數到模型的事件模型數據會即時的顯示在中。實例屬性參數以及類屬性參數會被直接注冊到集合的構造函數。 對于初學backbone.js的同學可以先參考我這篇文章:Backbone.js學習筆記(一) Backbone源碼結構 showImg(https://segme...
摘要:使用和架構創建一個典型的項目。屬性被賦值給傳入的函數運行的結果。渲染,我們使用,這是一個對象,它指向的屬性,使用函數使用的結果替換。最后,啟動整體應用,為了保證完全加載,用包裝器調用完整日常練習一些在對象初始化的時候執行的代碼 使用Backbone.js 和 MVC 架構創建一個典型的Hello world項目。雖然是殺雞用牛刀了,畢竟是我第一次使用Backbone.js 依賴 ...
摘要:數據更新的時候,支持多事件和自定義事件。然后使用兩個事件和的自定義事件。我們將使用別名函數。是為了模擬從服務器獲取響應的時間。在它內部里面,使用和返回模型屬性把選中的模型賦值給當前視圖的模型。 前言: 我們繼續使用上一次寫的圖書案例,在基礎上面進行改進! 事件綁定 在我們瀏覽網頁的時候,獲取數據并不是一下只就全部獲取到的,為了創建一個更好的用戶體驗,就來模擬一個加載(Spi...
摘要:加載的模塊會以參數形式傳入該函數,從而在回調函數內部就可以使用這些模塊。異步加載,和,瀏覽器不會失去響應它指定的回調函數,只有前面的模塊都加載成功后,才會運行,解決了依賴性的問題。插件,可以讓回調函數在頁面結構加載完成后再運行。 這次主要是對《高性能JavaScript》一書的讀書筆記,記錄下自己之前沒有注意到或者需要引起重視的地方 第一章 加載和執行 js代碼在執行過程中會阻塞瀏覽...
摘要:概述強大靈活的運用是通過配置文件決定的。下面通過示例來進行深度的探討配置文件的使用。配置文件的位置配置文件的位置和聲明用法是相對于這個腳本文件來決定的。配置文件參數的介紹所有模塊的查找根路徑。 概述 Requires強大靈活的運用是通過配置文件決定的。通過配置文件我們可以給模塊取別名、給模塊加上版本標識、設置模塊依賴、包裝非模塊等強大功能。同時RequireJS的優化器也大量使用了配...
閱讀 3077·2019-08-30 15:56
閱讀 1234·2019-08-29 15:20
閱讀 1571·2019-08-29 13:19
閱讀 1473·2019-08-29 13:10
閱讀 3381·2019-08-26 18:27
閱讀 3069·2019-08-26 11:46
閱讀 2234·2019-08-26 11:45
閱讀 3753·2019-08-26 10:12