There are two similar APIs in UI5, jQuery.sap.require
and sap.ui.require
. These two APIs is a little confused, especially for beginners from experienced with RequireJS.
jQuery.sap.require
The detailed API explanation in developer guide. Unfortunately You can not search in API REFERENCE.
This api will (synchronously) load the specified js file and do execution. The js file is not need to be a module. It could be a plain object, or just a piece of code.
synchronously is confirmed. Please refer to
requireModule
function injQuery.sap.global.js
jQuery.ajax({
url : oModule.url,
dataType :'text',
async :false,
success :function(response, textStatus, xhr){
oModule.state = LOADED;
oModule.data = response;
},
error :function(xhr, textStatus, error){
oModule.state = FAILED;
oModule.errorMessage = xhr ? xhr.status +" - "+ xhr.statusText : textStatus;
oModule.errorStack = error && error.stack;
}
});
For example, if there is an UI5 app and MessageBox
is not loaded. There will be a error, when you try to access it with sap.ui.commons.MessageBox
.
> sap.ui.commons.MessageBox
UncaughtTypeError:Cannot read property 'MessageBox' of undefined(…)
(anonymous function)@ VM265:2
InjectedScript._evaluateOn @ VM41:878
InjectedScript._evaluateAndWrap @ VM41:811
InjectedScript.evaluate @ VM41:667
As MessageBox
will be exported to global, so once it is be loaded, we could use it. So we usejQuery.sap.requier
to load and execute the script.
>var returnObject = jQuery.sap.require('sap.ui.commons.MessageBox');
<.undefined
> sap.ui.commons.MessageBox
<.Object{Action:Object,Icon:Object}
> returnObject
<.Object{log: B, measure: G, _mIEStyleSheets:Object, interaction:Object, fesr:Object…}
There is an ajax call for MessageBox
:
Request URL:https://sapui5.hana.ondemand.com/resources/sap/ui/commons/MessageBox.js
RequestMethod:GET
StatusCode:200 OK
After the MessageBox
is loaded via jQuery.sap.require
, we could use it.
Note:jQuery.sap.require
will return a wired object. I guess this api applies for chain pattern, then it will return the context this. But for this scenario, I don't think it is a good idea. Since there are some property should be explored to API consumer and it will confuse. And the second parameterfnCallback
is never be used.
jQuery.sap.require =function(vModuleName, fnCallback){
returnthis;
}
sap.ui.require
Quote documentation in UI5 API REFERENCE
- Synchronous Retrieval of a Single Module Value 2.Asynchronous Loading of Multiple Modules
For item 1, it is very similar with jQuery.sap.require
. Except two:
- url pattern: it use slash (/)
- return object is module object
For example:
>var oMessageBox = sap.ui.require('sap/ui/commons/MessageBox');
<.undefined
> oMessageBox
<.Object{Action:Object,Icon:Object}
For item 2, it is used to load dependency module:
> sap.ui.commons.MessageBox
<.UncaughtTypeError:Cannot read property 'MessageBox' of undefined(…)
>(function(){
'use strict';
sap.ui.require(['sap/ui/commons/MessageBox'],function(MessageBox){
console.log('MessageBox:',MessageBox)
})
}());
<.undefined
<.MessageBox:Object{Action:Object,Icon:Object}
Actually load modules is not async, since it is also use
requireModule
to load file. But documentation is marked as async. : (