天天看點

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

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

SAP UI5事件處理

通過button控件的attachPress方法注冊一個Press事件點選的處理函數:

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

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的懶加載機制

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

當我們應用代碼裡調用attachPress時,傳入這個函數的事件響應函數被加入到一個SAP UI5統一維護的事件處理系統資料庫mEventRegistry裡,這是一個鍵值對資料結構,key為應用程式注冊的事件名稱,值為我們傳入的 事件響應函數。如下圖所示,key為press,值為fFunction:

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