How is the Component.js file of a SAP UI5 application loaded at runtime?

ask questions

Excuse me, how does the program call the Component.js file? I see in index.js, only the path is specified, and the file name is not specified.
Then I tried changing the file name to component.js (the first letter is lowercase), and through debugging I found that the file could not be loaded.
Is this file name hardcode in SAP UI5?

Answer: Visit the url locally, open the Chrome developer tools, switch to the Network tab, enter in the input component.jsbox , and find that the Component.jsfile we wrote is loaded:

Hover over initiatorthis column to see the call stack that initiated the file request:

Click on the highlighted area in the image below, which is line 3361 of the Component-dbg.js file:

Set a breakpoint on this line, then refresh the browser, the breakpoint fires:

Press F11 to step into it:

It is found here that it is indeed as the friend who asked the question said that the file name of Component is hard-coded in SAP UI5, and the first letter can cnot . The following code first concatenates our custom namespace sap.ui5.walkthroughwith .Componentas a string, and then .replaces /:

Finally use the SAP UI5 standard tool library to load this Component.jsfile :

SAP UI5 modules are JavaScript files that can be loaded and executed in the browser. There are no firm rules to define what code should belong to a module - what is bundled in a module is up to the developer, but generally the content within a module should have a common theme. Here is an example of a module:

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();
});

The second input parameter of the sap.ui.define function above is the module's dependencies. Adding each dependency to the sap.ui.define call may result in many modules having to be loaded before executing the module.

Guess you like

Origin blog.csdn.net/i042416/article/details/124457961