從 BackboneJS 的源碼開始說事件模型

z2xy 發布于2019-08-19 14:19 / 464人閱讀

摘要：最終期待的參數是事件名稱，回調函數，回調函數上下文，最終期待的參數是事件名稱，回調函數，回調函數上下文，最終期待的參數是時間名稱，。

為什么要事件模型

先從 BackboneJS 開始說起。BackboneJS 設計的比較好的一部分代碼就是事件相關的內容，傳送門：
http://backbonejs.org/docs/backbone.html#section-13

jQuery 里面用到最多的就是bind相關的操作，為一個按鈕綁定點擊事件，給他解綁一個事件或者解綁所有事件，這一類的事件都是面向Dom對象。富應用中還需要一類孤立于DOM的事件，他們也需要類似添加事件、刪除事件、解綁事件和觸發事件。例如監測URL的變化，在其他地方可能綁定了很多事件，但是真實變化的時候只需要觸發一下邊能執行所有方法。

事件模型的代碼

最終我自己框架里面寫的事件很大部分參考了 BackboneJS ,具體代碼傳送門：
https://github.com/vincenting/HaiyiYun/blob/master/src/vintjs.js#L175

主要的功能包括綁定 on ，解綁 off ，觸發 trigger 。on 最終期待的參數是(事件名稱，回調函數，回調函數上下文），off最終期待的參數是（事件名稱[，回調函數][，回調函數上下文]），trigger 最終期待的參數是(時間名稱[，args...])。但是為了靈活，還需要一些靈活的參數，例如時間名稱允許是多個事件名稱以空格分開，以及以對象的形式同時傳入名稱和回調函數。于是 BackboneJS 中使用了eventsApi 進行統一的處理。

題外話－內存潔癖

Javascript 里面寫[]實際上是 new Array，因此很容易無意中產生很多使用很臨時的列表對象，例如一些臨時列表，作為參數使用 apply 傳遞給函數。對于一個列表來說，最快的清空方法就是修改他的length，如下

var arr = [1,2,3,4];
arr.length = 0;
console.log(arr);

之后 arrObj 內容便會被釋放。這樣的對象可以多次使用，但是非臨時的變量一定不能使用。原因如下：

var arr = [1,2,3,4];
var new_list = arr;
arr.length = 0;
console.log(new_list[0]);

相同的 Object 也可以運用類似的方法來重復使用。這些都是為了盡量減少對象的新建，頁面一直開著什么情況都有可能發生，其他對象也是如此，字符串、函數、正則對象。

可能用到事件的地方

之前有提到的url變化的時候會觸發事件，這些事件可能包括去尋找對應的路由并解析，對當前狀態存在的事件統一解綁，刪除Dom等等。

控制器間的通信也會用到事件模型。一個控制器中觸發了一個事件，然后事件被觸發去和其他控制器通信。

數據和視圖的綁定也需要使用事件。一個數據更新了調用什么方法去更新視圖，一個列表刪除或者添加數據了又去調用什么方法去更新視圖。

還有就是系統內部的解耦等等。

完成事件之后就需要去監聽url的變化并且解析，以及一些類似于后臺的url處理方法。（更新待續）

GPU云服務器云服務器解析域名從哪里開始云計算從零開始大數據從零開始學java從什么開始

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/77921.html

給自己挖個坑，開始去開發javascript富應用框架

摘要：是目前項目中正在用的框架?，F在前端這塊再次到了這樣的瓶頸，所以決定自己開始開發和維護自己的一個框架。不強制綁定，但是會制定其他規則來避免用戶手動請求。項目目前完成板塊事件綁定及觸法地址處理以及路由處理。為什么要框架隨著電腦運算能力的不斷提升，越來越多的網站開始將一些數據處理，簡單的業務邏輯交予前端。于是前端，特別是所謂的 Webapp 中,出現了大量的數據處理以及業務邏輯，前端的...

lidashuang 2019-08-19 14:19 評論0 收藏0
富應用中 URL 管理以及 Javascript 測試

摘要：一個是使用錨鏈接，即的方式實現。做程序的人大多了解測試。傳統的測試方法就是在完成后手動去觸發事件，然后手動輸入來檢測是否得到預期的效果。引入了測試框架后工作簡單了很多。前篇傳送門給自己挖個坑，開始去開發富應用框架從的源碼開始說事件模型 URL 存在的意義在于使用者可以使用一段字符串就可以找到對應的資源。富應用中的內容改變都是通過 Javascript 去改變文檔內容，某種角度上來說整個...

kid143 2019-08-19 14:21 評論0 收藏0
Backbone.js學習筆記（一）

摘要：它通過數據模型進行鍵值綁定及事件處理，通過模型集合器提供一套豐富的用于枚舉功能，通過視圖來進行事件處理及與現有的通過接口進行交互。本人兼職前端付費技術顧問，如需幫助請加本人微信hawx1993或QQ345823102，非誠勿擾 1.為初學前端而不知道怎么做項目的你指導 2.指導并扎實你的JavaScript基礎 3.幫你準備面試并提供相關指導性意見 4.為你的前端之路提供極具建設性的...

FrancisSoung 2019-08-21 10:21 評論0 收藏0
【譯】JavaScript 框架的探索與變遷（上）

摘要：正文在年，框架的選擇并不少。特別的，通過思考這些框架分別如何處理狀態變化是很有用的。本文探索以下的數據綁定，的臟檢查的虛擬以及它與不可變數據結構之間的聯系。當狀態產生變化時，只有真正需要更新的部分才會發生改變。譯者言近幾年可謂是 JavaScript 的大爆炸紀元，各種框架類庫層出不窮，它們給前端帶來一個又一個的新思想。從以前我們用的 jQuery 直接操作 DOM，到 Backb...

Jaden 2019-08-21 17:22 評論0 收藏0
Redux、Flux、Vuex

摘要：結構和數據流一個單向數據流是模式的核心，上面示圖應該是程序員心中主要的模型圖。前言這篇文章不會用具體的代碼去闡述redux、flux或者vuex，因為我覺得它們所帶來的更是一種編程思想。前端進化和框架演變在很久以前，前端沒有MVVM的概念，MVVM是對MVC細化的說法（個人覺得兩者區別不大），MVC的模式一直在后臺使用，效果和優點都很明顯。后來前端工程師仿照MVC模式開發了很...

joy968 2019-08-21 14:35 評論0 收藏0