AMD

AMD - Asynchronous Module Definition API. This is powerful and flexible mechanism of the framework which allows you to define module, load it and its dependencies asynchronously.

Register module

Register module files with unique identifier. And it also defines module dependencies which will be loaded before module.
If module module id do not be unique it will overwrite existing one.

Moff.amd.register({
	id: 'liveChat',
	depend: {
		js: ['http://chat-domain.com/js/chat-api.js'],
		css: ['http://chat-domain.com/css/chat.css']
	},
	file: {
		js: ['modules/my-chat.js'],
		css: ['modules/my-chat.css']
	},

	beforeInclude: function() {},
	afterInclude: function() {},
	loadOnScreen: ['md', 'lg'],
	onWindowLoad: true
});
  • id - Module identifier. It should be unique. In case it already exist, it will overwrite existing module.
  • depends - Module dependencies. Usually your module can depend from another third party scripts, e.g. jQuery plugin.
    Here you can include it before module, to be use it will be available on module initialization.
  • file - Module main files. These files will be loaded only after dependency files.
  • beforeInclude - This callback will be executed before all files (depend + file) including.
  • afterInclude - This callback will be executed after all files (depend + file) will be included and loaded.
  • loadOnScreen - Define what screen size your module will be loaded automatically.
    If screen size does not fit, module do not be loaded automatically, but still available to load via Moff.amd.include method.
    Also module will not be loaded automatically if it is registered in data-load-module because it will be included after content of element be loaded.
    Possible values: xs, sm, md, lg. Values dimensions are setup from breakpoints initialization option.
  • onWindowLoad - Indicates whether module will be loaded on window load event.

Include module

Registered modules are included automatically when DOM is ready by loadOnScreen option if it exists. And there is a ways to do it manually.
This is programmatic via Moff API Moff.amd.include method. If module was included before, callback will be executed immediately.

Moff.amd.include('liveChat', function() {
	// This callback will be executed when all files be loaded
}, {reload: true});

The method gets three arguments:

  • id - Id of registered module.
  • callback - Function which will be executed when all registered file be loaded.
  • options - Object with the only property reload. Forces to re-include all registered files.