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

SAP UI5事件處理

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

button控件本身的實(shí)現(xiàn)是沒有attachPress這個(gè)方法的，這一點(diǎn)可以從hasOwnProperty返回false來(lái)確認(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方法。如果對(duì)SAP UI5 button的原型鏈不熟悉，可以參考我這篇文章：深入學(xué)習(xí)SAP UI5框架代碼系列之一：UI5 Module的懶加載機(jī)制

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

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

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

Angularjs事件處理

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

我給Country這一列通過(guò)ng-click指令注冊(cè)了一個(gè)排序邏輯：sortField = ‘name’

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

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

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

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

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

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

“sortField = ‘name’” 通過(guò)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對(duì)象的屬性sortField被賦上了值：name

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

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

總結(jié)

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

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