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 in jQuery.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 .

1. > sap.ui.commons.MessageBox
2. Uncaught TypeError: Cannot read property 'MessageBox' of undefined(…)
3. (anonymous function) @ VM265:2
4. InjectedScript._evaluateOn @ VM41:878
5. InjectedScript._evaluateAndWrap @ VM41:811
6. 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.

2. > var returnObject = jQuery.sap.require('sap.ui.commons.MessageBox');
3. <. undefined
4. > sap.ui.commons.MessageBox
5. <. Object {Action: Object, Icon: Object}
6. > returnObject
7. <. Object {log: B, measure: G, _mIEStyleSheets: Object, interaction: Object, fesr: Object…}

There is an ajax call for MessageBox:

1. Request URL:https://sapui5.hana.ondemand.com/resources/sap/ui/commons/MessageBox.js
2. Request Method:GET
3. 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 parameter fnCallback is never be used.

1.   jQuery.sap.require = function(vModuleName, fnCallback) {
2.    return this;
3.    }

sap.ui.require

Quote documentation in UI5 API REFERENCE

1. 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:

1. > var oMessageBox = sap.ui.require('sap/ui/commons/MessageBox');
2. <. undefined
3. > oMessageBox
4. <. 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. : (