任務：分析 SAP UI5 root XML 檢視的載入邏輯。

![](https://img-blog.csdnimg.cn/img_convert/46949b7fa2237e10cef8182fa5e0cd0b.png)
滑鼠放到 initiator 這一列上，找到呼叫棧的 UIComponent.js 的 createContent 方法：

![](https://img-blog.csdnimg.cn/img_convert/8afcf7abd9db737c26b6c53d2da8a3bb.png)
可以看到，這裡的邏輯是，從 manifest.json 裡解析出 root view 定義，然後例項化該檢視。

![](https://img-blog.csdnimg.cn/img_convert/986e41572048574c9d5367d89d3d6ded.png)

![](https://img-blog.csdnimg.cn/img_convert/7f7dfe2d99f4540cb012c1490fcc2f80.png)

![](https://img-blog.csdnimg.cn/img_convert/8cf48329e66b0aeba6f7be59c6fc9372.png)

我們再來看看另一個 root 檢視載入失敗的 SAP UI5 應用：

![](https://img-blog.csdnimg.cn/img_convert/b5582f610abe762e13fb00b87e6aa1f5.png)

> Access to XMLHttpRequest at 'https://sapui5.hana.ondemand.com/resources/sap/ui/demo/CombineLatest/Combine.view.xml' from origin 'http://localhost:3002' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

也成功解析出 root view 的名稱了：

![](https://img-blog.csdnimg.cn/img_convert/8ff462e90830a2fdb3a3ad87da69f903.png)

使用 ajax 載入 xml view：
![](https://img-blog.csdnimg.cn/img_convert/70f98e94a0e219d11227a1234845298a.png)

![](https://img-blog.csdnimg.cn/img_convert/c1d320684fae0031abb5ecf9e5611a78.png)

![](https://img-blog.csdnimg.cn/img_convert/c04372b152dde538b47fa79fd52ad8db.png)

正確的 path：

![](https://img-blog.csdnimg.cn/img_convert/bb4228d0fdda0fe79086be51af6e8726.png)

錯誤的 path：
![](https://img-blog.csdnimg.cn/img_convert/774659c841406bb800d34293fb4c45d3.png)

![](https://img-blog.csdnimg.cn/img_convert/a0774d4493a930a502d5c24362352438.png)

命中：
![](https://img-blog.csdnimg.cn/img_convert/aa3d7abc80839a580c9212daeb01eda4.png)

再看出問題的應用：
![](https://img-blog.csdnimg.cn/img_convert/6bf360ce5af62a3b39c7112355167c26.png)

找到問題了：大小寫不匹配。
![](https://img-blog.csdnimg.cn/img_convert/0beb742f2f38957d3febef9aa6709fc2.png)

這個 c 改成 C 後，問題消失：
![](https://img-blog.csdnimg.cn/img_convert/8941af7126a61ed1bbe52657ff49b499.png)

SAP UI5 應用 XML 檢視的載入邏輯分析

相關文章