Jerry的UI5框架代碼自學教程

SAP UI5對View元素基於jQuery的操做方式，使得其學習曲線相對Angular/React來講比較平緩，至少對於我我的而言是這樣。對於已經有jQuery經驗的前端開發人員來講很容易上手。

使用UI5開發SAP UI應用，在開發過程當中每每會遇到各類各樣的問題，好比最後出來的UI效果和你預料的不同，或者console裏面顯示一些奇奇怪怪的error message. 對於後者來講，這些error message一般都是UI5框架代碼報出來的，這並不意味着是UI5框架代碼的bug。相反，每每是應用程序中developer本身犯的錯，致使UI5框架在runtime執行時出錯，exception被框架代碼捕捉到，最後顯示在console裏。

遇到這種狀況，若是你一遍又一遍地看本身的應用代碼，可是以爲它們的書寫都是正確的，找不到線索，那麼你要麼問問身邊其餘對UI5比較熟悉的同事，要麼本身啃框架的代碼慢慢分析到底爲何框架代碼執行到你的應用之後會出錯。

曾經有剛接觸UI5的同事和我討論過，說對UI5框架代碼很感興趣，想學習，可是迷失在代碼海洋裏，UI5 core的代碼一個文件動輒就是幾千上萬行，不知道從哪裏入手。

對這個困擾我本身的思路是，從最容易的地方入手，採用以點帶面的方式學習。
試想下面這個scenario:

" 在UI上畫個button，這個button有一個"click me"的label. 點這個button，彈個message出來 ".

Scenario夠簡單吧，這個效果每一個UI5 developer都能作出來，可是你能搞清楚它背後的工做原理麼？爲何你在model裏設置的文本最後會顯示在button label上? 你UI5代碼裏new出來的button instance最後怎麼就變成了html標籤？你沒有用html native的onclick屬性註冊事件響應，爲何你最後點擊了button，你在controller裏定義的event handler仍然會被調用？

真正搞清楚了這些問題，說明你已經對UI5的框架代碼有一些認識了。這個時候，憑藉這些基礎，你能夠根據本身的興趣或者工做須要，用一樣的辦法去研究UI5框架的其餘topic.

這個系列是我2015年作CRM Fiori標準開發的時候寫的，教程連接：
https://blogs.sap.com/2015/10/26/a-tutorial-how-i-do-self-study-on-a-given-fiori-control-and-ui5-framework-code-behind/

其內容獲得了SAP Walldorf的UI5 developer的承認, 內容的正確性上沒有問題。

Another UI5 walkthrough from my previous colleague Wu Ji

Wu Ji之前在SAP工做過，我有幸和他共事過18個月的時間。Wu Ji是一位我很是佩服的專業的程序員，我由於曾經能和他共事而感到榮幸。

這是他的github: https://github.com/j1wu

Wu Ji也寫過UI5的walkthrough, 也能夠做爲研究UI5框架代碼的材料:

SAPUI5 walkthrough step 1: Hello World! BaseObject, where where it all began:
https://blogs.sap.com/2016/01/12/sapui5-walkthrough-step-1-hello-world-where-where-it-all-began/

SAPUI5 walkthrough step 2 – bootstrap, dive in – how does attachInit work?
https://blogs.sap.com/2015/10/29/sapui5-walkthrough-and-dive-in-step-2-bootstrap/

SAPUI5 walkthrough step 3 – controls, dive in – how does a control get created?
https://blogs.sap.com/2015/11/03/sapui5-walkthrough-and-dive-in-step-3-controls/

SAPUI5 walkthrough step 4 – XML views, dive in – how does a xml view get created?
https://blogs.sap.com/2015/11/15/sapui5-walkthrough-step-4-xml-views-dive-in-how-does-a-xml-view-get-created/

SAPUI5 walkthrough step 5 – controllers, dive in – how does a controller get created?
https://blogs.sap.com/2015/11/22/sapui5-walkthrough-step-5-controllers-dive-in-how-does-a-controller-get-created/

SAPUI5 walkthrough step 6 – modules, dive in – how does modules work?
https://blogs.sap.com/2015/11/25/how-does-modules-work-in-sapui5/

SAPUI5 walkthrough step 7 – JSON model, dive in – how does JSON model work?
https://blogs.sap.com/2015/12/05/sapui5-walkthrough-step-7-json-model-dive-in-how-does-json-model-work/

SAPUI5 walkthrough step 8 – translatable texts, dive in – how does i18n model work?
https://blogs.sap.com/2015/12/06/sapui5-walkthrough-step-8-translatable-texts-dive-in-how-does-i18n-model-work/

要獲取更多Jerry的原創技術文章，請關注公衆號"汪子熙"或者掃描下面二維碼: