Modules

You have two ways to create module within flex:

• Standard module (no control of cache features);
• Extended module (autocache, manual cache)

Standard module

To create standard module, you should create JS file with next template:

_append({
    //Name of your module - alias
    name        : 'my_module',
    require     : [
        //List of references of your module (will be loaded before this module)
        { url: 'PATH::my_module_1.js' },
        { url: 'PATH::my_module_2.js' },
        { url: 'kernel/css/short.css' }
    ],
    constructor : function () {
        //Here you can define constructor of your module
    },
    //Body of your module
    module      : function () { 
        var //All your modules will be placed in object [flex.libraries].
            //To get them you can call method [create], which will be attached automatically
            my_module_1 = flex.libraries.my_module_1.create(),
            my_module_2 = flex.libraries.my_module_2.create(),
            my_method   = null;
        my_method = function(){
            //Do something
            my_module_1.someMethod();
            my_module_2.someMethod();
        };
        return {
            my_method : my_method 
        };
    },
});

Minimal definition of module

_append({
    //Name of your module - alias
    name    : 'my_module',
    module  : function () { 
        var my_method   = null;
        my_method = function(){
            //Do something
        };
        return {
            my_method : my_method 
        };
    },
});

Self-launch module. This module can be used as start-point of application

_append({
    //Name of your module - alias
    name    : 'my_module',
    require : [
        //List of references of your module (will be loaded before this module)
        { url: 'PATH::my_module_1.js' },
        { url: 'PATH::my_module_2.js' },
        { url: 'kernel/css/short.css' }
    ],
    launch  : function () { 
        var //All your modules will be placed in object [flex.libraries].
            //To get them you can call method [create], which will be attached automatically
            my_module_1 = flex.libraries.my_module_1.create(),
            my_module_2 = flex.libraries.my_module_2.create(),
            my_method   = null;
        my_method = function(){
            //Do something
            my_module_1.someMethod();
            my_module_2.someMethod();
        };
        my_method();
        //Pay your attention, here is no RETURN part. Because it isn't clear module.
    },
});

That’s all, you can build your modularity application. All your modules will be cached, but, management of cache features of [flex] will not be available.

Extended module

To get access to cache features of flex you have to use extended pattern of module.

First step – create JS file of module

(function () {
    "use strict";
    if (typeof flex !== 'undefined') {
        //Create your class of module
        var protofunction       = function () { };
        protofunction.prototype = function () {
            var //All your modules will be placed in object [flex.libraries].
                //To get them you can call method [create], which will be attached automatically
                html            = flex.libraries.html.create(),
                events          = flex.libraries.events.create(),
                //Variables
                methods         = null;
            methods = {
                init : function(){
                    //Do something
                }
            };
            return {
                init : methods.init
            };
        };
        //Attach module to flex modules controller
        flex.modules.attach({
            //Name of your module (you can use namespaces)
            name            : 'ui.window.focus',
            //Link to your module's class
            protofunction   : protofunction,
            //References to other modules
            reference       : function () {
                //Method [()] will be attached automatically, so to call this module in other module 
                //you can use [flex.libraries.ui.window.focus()]
                flex.libraries.events   ();
                flex.libraries.html     ();
            },
            //List of other resources
            resources: [
                { url: 'KERNEL::/css/some.css' }
            ]
        });
    }
}());

Minimal definition

        //Create your class of module
        var protofunction       = function () { };
        protofunction.prototype = function () {
            var //Variables
                methods         = null;
            methods = {
                init : function(){
                    //Do something
                }
            };
            return {
                init : methods.init
            };
        };
        //Attach module to flex modules controller
        flex.modules.attach({
            //Name of your module (you can use namespaces)
            name            : 'ui.window.focus',
            //Link to your module's class
            protofunction   : protofunction,
        });

Second step – add module to register

Next and final step – add your module to register. Open or create file [flex.registry.modules.js] and add your module.

(function() {
    "use strict";
    if (typeof flex !== 'undefined') {
        flex.libraries = {
            events  : {  source: 'KERNEL::flex.events.js' },
            html    : {  source: 'KERNEL::flex.html.js'   },
            ui      : {
                window      : {
                    move    : {  source: 'KERNEL::flex.ui.window.move.js'    },
                    resize  : {  source: 'KERNEL::flex.ui.window.resize.js'  },
                    //Your new module
                    focus   : {  source: 'KERNEL::flex.ui.window.focus.js'   },
                },
            },
        };
    }
}());

Now you have control on cache of this module. Read more here.