What is the difference between sap.ui.require and jQuery.sap.require
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
Uncaught TypeError: 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
Request Method:GET
Status Code: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) {
return this;
}
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
<. Uncaught TypeError: 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. : (
We should just avoid
jQuery.sap.require
andsap.ui.require("moduleName")
altogether since they are using synchronous XHR. Not only does it block the UI thread, thus resulting poor UX, but also browser vendors won’t support it anymore which can happen at anytime.Related to this topic: https://stackoverflow.com/a/45277948/5846045.
About the synchronous behavior of
sap.ui.require([], fn)
that is supposed to be async..:The API Reference also mentions it but also adds that it won't use
async: false
anymore:Thanks for the clarification, the fact is that the
XHR
calls will be deprecated and should be avoided is clear.But what can I use instead? When I generate
Component-preload.js
it still usessap.ui.require.preload({"…","…"})
.XHR in general won't be deprecated. It's just the synchronous invocation of
xhr.open
(orjQuery.sjax
) that should be avoided. Please, keep using the asynchronous variant ofsap.ui.require
to load modules on-demand.