入口函式在 XMLTemplateProcessor 裡：

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

解析 xml 檢視的原始碼之後，呼叫 createRegularControls 進行例項建立：

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

這是我的 xml 檢視原始碼：

```xml
<view controllername="sap.ui5.walkthrough.controller.InvoiceList" xmlns="sap.m" xmlns:mvc="sap.ui.core.mvc">
   <list headertext="{i18n>invoiceListTitle}" class="sapUiResponsiveMargin" width="auto" items="{invoice>/Invoices}">
      <items>
         <objectlistitem title="{invoice>Quantity} x {invoice>ProductName}" number="{
         parts: [{path: 'invoice>ExtendedPrice'}, {path: 'view>/currency'}],
         type: 'sap.ui.model.type.Currency',
         formatOptions: {
            showMeasure: false
         }
      }" numberunit="{view>/currency}"></objectlistitem>
   </items>
   </list>
</view>
```

number 欄位的繫結路徑被解析了出來：

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

在 BindingParser 的程式碼裡，上述字串型別的繫結路徑，被解析成了 json 物件：

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

這裡呼叫 sap.ui.model.type.Currency 的建構函式。

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

我們再回過頭來看 xml 檢視的載入和解析過程。

在 XMLView.js 的 this._xContent 欄位裡，我們能找到 xml 檢視的字串格式的原始碼。

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

在 XMLView.js 里根據字串 _xContent 進行搜尋，即可查到這個欄位賦值的位置：

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

在程式碼第 607 行觸發 xml 檢視檔案的載入：

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

從方法名也能看出，xml 檢視檔案採用非同步的方式進行載入：

```javascript
loadResourceAsync(sResourceName).then(runPreprocessorsAsync).then(processView);
```
這裡採用了 promise 非同步程式設計模型：

```javascript
		function loadResourceAsync(sResourceName) {
			return LoaderExtensions.loadResource(sResourceName, {async: true}).then(function(oData) {
				return oData.documentElement; // result is the document node
			});
		}
```
LoaderExtensions.loadResource 執行非同步載入 xml 檢視檔案的任務，載入成功的結果，透過輸入引數 oData 傳遞到匿名回撥函式內。

進入 loadResource 內部：

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

轉發給 sap.ui.loader._.getModuleContent(sResourceName, mOptions.url);

![](https://img-blog.csdnimg.cn/img_convert/3b27c18230cfedb8536fa30fa4dd991a.png)
從快取裡讀取。由於是第一次載入，快取沒有命中：

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

最終還是用的 jQuery.ajax api 去載入的資料：
![](https://img-blog.csdnimg.cn/img_convert/599e8975ac4abe6bee813ff1f56489f7.png)

載入成功後，呼叫 335 行的 success 回撥函式：

![](https://img-blog.csdnimg.cn/img_convert/c0b778c8e5c7eab0ff70f1eab9a25b44.png)
ajax 請求的 dataType 欄位值為 xml：

![](https://img-blog.csdnimg.cn/img_convert/727d50c13c29ab6288aea6fb3f94d7e7.png)
載入成功的 xml document 物件：

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

呼叫 resolve 方法，將 xml document 傳給 promise api 的 then 回撥函式。

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

此處就開始遞迴地解析 xml document 的節點了：

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

```javascript
function parseChildren(xmlNode, bRoot, bIgnoreToplevelTextNodes, pRequireContext) {
			var children = xmlNode.childNodes;
			for (var i = 0; i < children.length; i++) {
				parseNode(children[i], bRoot, bIgnoreToplevelTextNodes, pRequireContext);
			}
		}
```

parseChildren 呼叫 parseNode.

SAP UI5 xml 檢視裡定義的控制元件，執行時如何建立其例項的？

相關文章