Modules

Moff modular system allows to create independent modules with own scope and rich event system. Event system allows register events, assign and trigger them. Also Moff module has a lot of features and rich API to work with it.

Define module

Moff.modules.create method creates new Moff.Module class instance in its modular system.

It gets three arguments:

name - Module name. Use unique name for modules.

depend - Optional module dependency object. All dependency will be loaded before module initialization.
If you pass wrong path for dependency file, it will not loaded and module will not be initialized.
If you register module, but not initialize, dependency file will not be loaded. And it will not load file if it is already loaded.

Constructor - Module constructor class.

Moff.modules.create('Post',
	{
		js: ['js/plugins/post-beautify.js'],
		css: ['js/plugins/post-beautify.css']
	},
	function() { /** Constructor */ }
);

Module scope

Each module on initialization creates its own scope like a class object and DOM element scope. To set DOM scope need to define scope selector.

Moff.modules.create('Post', function() {
	this.scopeSelector = '.post-wrapper';
});

Now you can use build-in this.find method to search inside the module scope.

Moff.modules.create('Post', function() {
	this.scopeSelector = '.post-wrapper';

	this.handlePosts = function() {
		// This variable will contain posts located only inside the element specified in scopeSelector property.
		// Even you have DOM element with the same class name outside the scope.
		var posts = this.find('.slide-item');

		Moff.each(posts, function() {
			// Handle each post
		});
	};
});

Module scope DOM element is stored in this.scope property.

BeforeInit, Init and AfterInit hooks

These hooks allow you to do any logic before and after module initialization.

Moff.modules.create('Post', function() {
	this.beforeInit = function() {
		// Do any logic before module initialization.
		// Inside this hook none of module properties are initialized.
	};

	this.init = function() {
		// Here all initialization data is available.
	};

	this.afterInit = function() {
		// Do something after module initialization
	};
});

Module initialization

Module initialization method gets two parameters. The first one is module name and the second one is object with module initialization data.
All this object keys will be copied into class object. Also module name will be stored in moduleName object property.

Moff.modules.initClass('Post', {id: 435, config: {}, data: {}});
/** Module name */
this.moduleName; // Post

/** Module config */
this.config; // {}

/** Module id */
this.id; // 435

/** Module data */
this.data; // {}

Module events

Modules have an event system which allow to register, assign events and trigger them. Modules event system is a global.
Events are registered on module initialization. When module assign for event it will create it if it does not exist.

Event registration

Each module can register any number of events. Events should be registered in this.events property.

this.events = ['beforeSearch', 'afterSearch'];

Now module will register two events in events system. And can trigger them in any callback.

Trigger events

Now module can trigger registered event in any callback. And Moff.event.trigger can get any number of arguments.
All arguments will be passed to registered callbacks.

this.searchDone = function(result) {
	Moff.event.trigger('afterSearch', result);
};

Assign for event

When some module register event, another one can assign for it.

Moff.event.on('afterSearch', function(result) {
	// Do something with result
};

Getting module

Moff module Moff.modules.get method gets module initialized object by name.

Moff.modules.get('Post'); // Post{}

If several class objects were initialized of the one module class, get method return an array of objects.

Moff.modules.get('Post'); // [Post{}, Post{}]

Get all modules

If you want to do some operation with all modules, you can get them via Moff.modules.getAll method.

Moff.modules.getAll(); // {Post: [Post{}, Post{}], Comment: Comment{}}