How UI5 defines and creates module instance

In UI5, there are two different ways to define and create modules.

1. The first one is easy to understand, it uses sap.ui.define method to define a module, which takes the dependent libraries and a factory method to define the module. The return value of the factory method is the module object.

sap.ui.require can be used to get the module and pass the module as a parameter in the callback method.

UI5 MVC controller is created in this way as shown below:
sap.ui.define([
"sap/ui/core/mvc/Controller",
"sap/m/MessageToast"
], function (Controller, MessageToast) {
"use strict";

return Controller.extend("sap.ui.demo.wt.controller.App", {

onShowHello : function () {
// read msg from i18n model
var oBundle = this.getModel("i18n").getResourceBundle();
var sRecipient = this.getModel().getProperty("/recipient/name");
var sMsg = oBundle.getText("helloMsg", [sRecipient]);

// show message
MessageToast.show(sMsg);
}
});
});

Only modules defined with sap.ui.define method can be used as dependend models by sap.ui.define as shown above in bold font.


2. The second one is more confusing, as it uses the same method to define and create the instance. For example,sap.ui.jsview method can be used to define  sap.ui.core.mvc.JSView and to create  sap.ui.core.mvc.JSView instance, depends on how the method is called. The document has the below description:

The behavior of this method depends on the signature of the call and on the current context.

• View Definition sap.ui.jsview(sId, vView): Defines a view of the given name with the given implementation. sId must be the view's name, vView must be an object and can contain implementations for any of the hooks provided by JSView
• View Instantiation sap.ui.jsview(sId?, vView): Creates an instance of the view with the given name (and id). If no view implementation has been defined for that view name, a JavaScript module with the same name and with suffix "view.js" will be loaded and executed. The module should contain a view definition (1st. variant above).

A sample code to define the jsview is shown below
sap.ui.jsview("sap.ui.demo.wt.view.HelloPanel", {

getControllerName: function() {
return "sap.ui.demo.wt.controller.App";
},

       createContent : function(oController) {
         var controls = [new sap.m.Button({
                                            text : "{i18n>openDialogButtonText}",
                                            press: [oController.onOpenDialog, oController]
                                          }).addStyleClass("sapUiSmallMarginEnd myCustomButton")
                                        ];
                  
                    var panel =  new sap.m.Panel({
                              headerText : "{i18n>helloPanelTitle}",
                              content : controls,
                              width: "auto"
                    });
                    
                    return panel;
          }
});

The sample code to create the view instance is shown at below:

var myView = sap.ui.view(
  {   type:sap.ui.core.mvc.ViewType.JS, 
       viewName:"sap.ui.demo.wt.view.HelloPanel"
  });