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的原創文章，盡在：“汪子熙”:

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的SAP UI5和Angularjs事件处理机制的实现比较的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。