# 提問

> 請問一下，Component.js這個檔案，程式是如何呼叫的？我看在index.js中，只是指定了路徑，並沒有指定檔名稱。
然後我試著更改了一下檔名稱為component.js(首字母小寫)，然後透過除錯發現無法載入這個檔案。
難道這個檔名稱是SAP UI5中hardcode的嗎？

回答：本地訪問 url，開啟 Chrome 開發者工具，切換到 Network 標籤頁，在輸入框裡輸入 `component.js` 後，發現了我們自己編寫的 `Component.js` 檔案被載入：

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

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

把滑鼠放到 `initiator` 這一列上，就能看到發起這個檔案請求的呼叫棧：

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

單擊下圖高亮區域，即 Component-dbg.js 檔案的第 3361 行：

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

在這一行設定斷點，然後重新整理瀏覽器，斷點觸發：

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

按 F11 單步除錯進去：

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

這裡發現確實是像提問的朋友那樣說的，Component 這個檔名是 SAP UI5 硬編碼的，首字母改成小寫 `c` 都不行。下面的程式碼，首先把應用程式裡我們自定義的名稱空間  `sap.ui5.walkthrough` 同 `.Component` 做字串連線，然後把連線後的字串裡所有的 `.` 替換成 `/`：

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

最後使用 SAP UI5 標準的工具庫去載入這個 `Component.js` 檔案：

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

SAP UI5 模組是可以在瀏覽器中載入和執行的 JavaScript 檔案。 沒有確定的規則去定義什麼程式碼應該屬於一個模組——捆綁在模組中的內容取決於開發人員，但通常一個模組內的內容應當具有共同的主題。下面是一個模組的例子：

```javascript
sap.ui.define("SomeClass", ['sap/mylib/Helper', 'sap/m/Bar'], function(Helper, Bar) {

// create a new class
    var SomeClass = function () {};

// add methods to its prototype
    SomeClass.prototype.foo = function () {

// use a function from the dependency 'Helper' in the same package (e.g. 'sap/mylib/Helper' )
        var mSettings = Helper.foo();

// create and return an sap.m.Bar (using its local name 'Bar')
        return new Bar(mSettings);
    };
    // return the class as module value
    return SomeClass;
  });
// later requiring the previously defined module
sap.ui.require(['SomeClass'], function(SomeClass) {
    var oInstance = new SomeClass();
});
```

上圖 sap.ui.define 函式的第二個輸入引數是模組的依賴。將每個依賴項新增到 sap.ui.define 呼叫可能會導致在執行模組之前必須載入許多模組。

SAP UI5 應用的 Component.js 檔案是如何在執行時被載入的？

相關文章