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的原创技术文章，请关注公众号"汪子熙"或者扫描下面二维码: