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:

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的原創技術文章，請關注公眾號"汪子熙"或者掃描下面二維碼: