Jerry最開始是用SAP UI5進(jìn)行SAP CRM Fiori應(yīng)用的開發(fā)。最近一段時間做SAP Spartacus開發(fā)，在用Angular，因此借這個機(jī)會將兩個前端框架的事件處理實(shí)現(xiàn)細(xì)節(jié)做一個比較。

SAP UI5事件處理

通過button控件的attachPress方法注冊一個Press事件點(diǎn)擊的處理函數(shù)：

button控件本身的實(shí)現(xiàn)是沒有attachPress這個方法的，這一點(diǎn)可以從hasOwnProperty返回false來確認(rèn)：

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

順著SAP UI5 button原型鏈沿著繼承關(guān)系向上尋找，最后發(fā)現(xiàn)在EventProvider里提供了attachEvent方法。如果對SAP UI5 button的原型鏈不熟悉，可以參考我這篇文章：深入學(xué)習(xí)SAP UI5框架代碼系列之一：UI5 Module的懶加載機(jī)制

當(dāng)我們應(yīng)用代碼里調(diào)用attachPress時，傳入這個函數(shù)的事件響應(yīng)函數(shù)被加入到一個SAP UI5統(tǒng)一維護(hù)的事件處理注冊表mEventRegistry里，這是一個鍵值對數(shù)據(jù)結(jié)構(gòu)，key為應(yīng)用程序注冊的事件名稱，值為我們傳入的 事件響應(yīng)函數(shù)。如下圖所示，key為press，值為fFunction：

當(dāng)我們點(diǎn)擊了UI上的按鈕之后，SAP UI5控件的Button.onclick方法會被調(diào)用，里面會fire一個Press事件。這里完成了瀏覽器原生的click事件到語義事件Press的轉(zhuǎn)換。

SAP UI5根據(jù)press，到事件注冊表mEventRegistry里去查找，將所有注冊到該事件上的所有響應(yīng)函數(shù)取出，放到一個數(shù)組aEventListeners里，遍歷這個數(shù)組，逐一調(diào)用響應(yīng)函數(shù)。

Angularjs事件處理

下圖是一個Angularjs應(yīng)用，基于Angularks 1.2.18開發(fā)而成. 在界面上顯示了硬編碼之后的三個國家的人口，我希望通過人口對這三個國家進(jìn)行排序。

我給Country這一列通過ng-click指令注冊了一個排序邏輯：sortField = ‘name’

Angular和SAP UI5一樣，有自己的bootstrap階段。在此階段Angular框架做的事情之一，就是Angular框架會通過下圖第964行代碼即compile函數(shù)，遍歷html DOM樹。

如果發(fā)現(xiàn)有一個element attribute具有ng前綴，執(zhí)行applyDirectivesToNode函數(shù)，為該節(jié)點(diǎn)添加一些特殊的邏輯。

Angular通過下列的三個步驟，對ng-click = "sortField = ‘name’"進(jìn)行響應(yīng)函數(shù)注冊：

第一步：解析包含ng-click= "sortField = ‘name’"的HTML元素，創(chuàng)建一個wrapper fn.

第二步：15328行，使用element.on給click事件注冊響應(yīng)函數(shù)。這個響應(yīng)函數(shù)內(nèi)部調(diào)用Angular第一步創(chuàng)建的wrapper fn.

第三步，用戶點(diǎn)擊超鏈接之后，15330的函數(shù)觸發(fā)。

“sortField = ‘name’” 通過assign函數(shù)實(shí)現(xiàn)：

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’”的執(zhí)行：Scope對象的屬性sortField被賦上了值：name

更多Jerry的原創(chuàng)文章，盡在：“汪子熙”:

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。