Show TOC

Modularization and Dependency ManagementLocate this document in the navigation structure

The SAPUI5 framework has built-in support for modularizing comprehensive JavaScript applications. That means, instead of defining and loading one large bundle of JavaScript code, an application can be split into smaller parts which then can be loaded at runtime at the time when they are needed. These smaller individual files are called modules.

A module is a JavaScript file that can be loaded and executed in a browser. There are no rules or definitions what code belongs to a module, and what code does not. The content bundled in a module is up to the developer, but typically the content has a common topic, such as forming a JavaScript class or namespace or the contained functions address a specific topic, for example client to server communication or mathematical functions.

Modules have no predefined syntax or structure, but module developers can use the following features:

  • Name

    The name identifies the module and is used with jQuery.sap.require to load the module. As human readers associate a module with the main JavaScript object declared in it, the module names by convention are a hierarchical sequence of dot-separated identifiers like sap.ui.core.Core. It is best practice to use all but the last identifier to group modules in a logical and/or organizational order, similar to packages in Java, and to use the last identifier to give the module a semantical name.

  • Declaration

    Modules can declare themselves by calling the static jQuery.sap.declare function with their name. This helps SAPUI5 to check at runtime whether a loaded module contains the expected content by comparing the required name against the declared name. As a side effect, jQuery.sap.declare ensures that the parent namespace of the module name exists in the current global namespace (window). .

    For modules without declaration, the framework assumes that the module has the expected content and declares it with the name that was used for loading. In some cases a module declaration is mandatory, see Avoiding Duplicates.

  • Description

    The description is any JavaScript comment preceding the module's declaration statement and is intended to help to decide whether a module is useful for the intended purpose. The configuration UI displays the description next to the module name.

  • Dependencies

    Modules can use the jQuery.sap.require method to load other modules they depend on. While jQuery.sap.require internally has the effect of a loadModule call, it can also be regarded as a dependency declaration. The dependency declarations can be evaluated at runtime, but can also be analyzed at built time or at runtime on the server.

Example

The following code snippet shows a typical module that uses all of features listed above. The name of the module is my.useful.SampleModule):

/*
    * A short documentation of the module. This documentation is not evaluated at runtime, only during build time
    */    
   jQuery.sap.declare("my.useful.SampleModule"); // declaration of the module. Will ensure that the containing namespace 'my.useful' exists.

   // list of dependencies of this module
   jQuery.sap.require("sap.ui.core.Core");
   jQuery.sap.require("some.other.Module");
   jQuery.sap.require("you.can.Also", "list.multiple.Modules", "if.you.Want");
   ...

   // create the 'main' object of the module
   my.useful.SampleModule = {};