SAP UI5和Angularjs事件處理機制的實現比較

Jerry最開始是用SAP UI5進行SAP CRM Fiori應用的開發。最近一段時間作SAP Spartacus開發，在用Angular，所以借這個機會將兩個前端框架的事件處理實現細節作一個比較。

SAP UI5事件處理

經過button控件的attachPress方法註冊一個Press事件點擊的處理函數：

button控件自己的實現是沒有attachPress這個方法的，這一點能夠從hasOwnProperty返回false來確認：

Instead, it is provided by the node in the button instance’s prototype chain, EventProvider.

順着SAP UI5 button原型鏈沿着繼承關係向上尋找，最後發如今EventProvider裏提供了attachEvent方法。若是對SAP UI5 button的原型鏈不熟悉，能夠參考我這篇文章：深刻學習SAP UI5框架代碼系列之一：UI5 Module的懶加載機制

當咱們應用代碼裏調用attachPress時，傳入這個函數的事件響應函數被加入到一個SAP UI5統一維護的事件處理註冊表mEventRegistry裏，這是一個鍵值對數據結構，key爲應用程序註冊的事件名稱，值爲咱們傳入的 事件響應函數。以下圖所示，key爲press，值爲fFunction：

當咱們點擊了UI上的按鈕以後，SAP UI5控件的Button.onclick方法會被調用，裏面會fire一個Press事件。這裏完成了瀏覽器原生的click事件到語義事件Press的轉換。

SAP UI5根據press，到事件註冊表mEventRegistry裏去查找，將全部註冊到該事件上的全部響應函數取出，放到一個數組aEventListeners裏，遍歷這個數組，逐一調用響應函數。

Angularjs事件處理

下圖是一個Angularjs應用，基於Angularks 1.2.18開發而成. 在界面上顯示了硬編碼以後的三個國家的人口，我但願經過人口對這三個國家進行排序。

我給Country這一列經過ng-click指令註冊了一個排序邏輯：sortField = 'name'

Angular和SAP UI5同樣，有本身的bootstrap階段。在此階段Angular框架作的事情之一，就是Angular框架會經過下圖第964行代碼即compile函數，遍歷html DOM樹。

若是發現有一個element attribute具備ng前綴，執行applyDirectivesToNode函數，爲該節點添加一些特殊的邏輯。

Angular經過下列的三個步驟，對ng-click = "sortField = 'name'"進行響應函數註冊：

第一步：解析包含ng-click= "sortField = 'name'"的HTML元素，建立一個wrapper fn.

第二步：15328行，使用element.on給click事件註冊響應函數。這個響應函數內部調用Angular第一步建立的wrapper fn.

第三步，用戶點擊超連接以後，15330的函數觸發。

「sortField = ‘name’」 經過assign函數實現：

Finally, scope obj ( you can consider scope as 「Model」 in UI5 at this moment ) has attribute sortField which has been assigned with a new value 「name」, this is how

「sortField = ‘name’」的執行：Scope對象的屬性sortField被賦上了值：name

更多Jerry的原創文章，盡在："汪子熙":