Skip to content
DmitryAstafyev edited this page Feb 4, 2016 · 9 revisions

Let’s create new module with one method, which add new attribute to node or return value of it.

    //Create your class of module
    var protofunction       = function () { };
    protofunction.prototype = function () {
        var methods         = null;
        methods = {
            attr : function(node, name, value){
                if (node.setAttribute && name){
                     if (value){
                         node.setAttribute(name, value);
                     } else {
                         return node.getAttribute(name);
                     }
                }
                return null;
            }
        };
        return {
            attr : methods.attr 
        };
    };
    //Attach module to flex modules controller
    flex.modules.attach({
        //Name of your module
        name            : 'nodes',
        //Link to your module's class
        protofunction   : protofunction,
    });

Now in some other module you can use your [nodes] module

        //Create your class of module
        var protofunction       = function () { };
        protofunction.prototype = function () {
            var //Link to module
                nodes   = flex.libraries.nodes.create(),
                //Variables
                methods = null;
            methods = {
                init : function(){
                    var node  = document.getElementById('some_node_id'),
                        value = null;
                    //Set attribute
                    nodes.attr(node, 'data-my-attr', 'nothing');
                    //Read attribute
                    value = nodes.attr(node, 'data-my-attr');
                }
            };
            return {
                init : methods.init
            };
        };
        //Attach module to flex modules controller
        flex.modules.attach({
            name            : 'other_module',
            protofunction   : protofunction,
            reference       : function () {
                //Define reference
                flex.libraries.nodes();
            },
        });

Flex allows use “chains” to make code simple and clear. You can attach actions to types of data:

  • nodes (alias: _node, _nodes ),
  • arrays (alias: _array, _arrays ),
  • objects (alias: _object, _objects ),
  • strings (alias: _string, _strings ),
  • numbers (alias: _number, _numbers )

Let’s modify our module [nodes] and add definition for type [node] and [nodes].

    //Create your class of module
    var protofunction       = function () { };
    protofunction.prototype = function () {
        var methods = null,
            attach  = null;
        methods = {
            attr : function(node, name, value){
                if (node.setAttribute && name){
                     if (value){
                         node.setAttribute(name, value);
                     } else {
                         return node.getAttribute(name);
                     }
                }
                return null;
            }
        };
        //Attach chains  
        (function(){
            //For single node 
            flex.callers.define.node(
               //Define namespace of chain
               'nodes.attr',
               //Define handle
               function (name, value) {
                    return methods.attr(this.target, name, value);
               }
            );
            //For several nodes 
            flex.callers.define.nodes(
               //Define namespace of chain
               'nodes.attr',
               //Define handle
               function (name, value) {
                    Array.prototype.forEach.call(this.target, function (target) {
                        result.push(methods.attr(target, name, value));
                    });
                    return results;
               }
            );
        }());
        return {
            attr : methods.attr 
        };
    };
    //Attach module to flex modules controller
    flex.modules.attach({
        //Name of your module
        name            : 'nodes',
        //Link to your module's class
        protofunction   : protofunction,
    });

And now we can call method [attr] of your module [nodes] by other way:

        //Create your class of module
        var protofunction       = function () { };
        protofunction.prototype = function () {
            var //Variables
                methods = null;
            methods = {
                init : function(){
                    var value = null;
                    //Set attribute
                    _node('#some_node_id').nodes().attr('data-my-attr', 'nothing');                     
                    //Read attribute
                    value = _node('#some_node_id').nodes().attr('data-my-attr');
                    //Or we can change attr of several nodes
                    _nodes('a').nodes().attr('href', '#');
                }
            };
            return {
                init : methods.init
            };
        };
        //Attach module to flex modules controller
        flex.modules.attach({
            name            : 'other_module',
            protofunction   : protofunction,
            reference       : function () {
                //Define reference
                flex.libraries.nodes();
            },
        });

As you can see now you should not create module to get access to it:

            var //Link to module
                nodes   = flex.libraries.nodes.create();

You just use chain:

            //For one single node
            _node('#some_node_id').nodes().attr('data-my-attr', 'nothing');
            //For several nodes
            _nodes('a').nodes().attr('data-my-attr', 'nothing');

To define chain you can use next methods:

       //For single node
       flex.callers.define.node   (..);
       //For several nodes
       flex.callers.define.nodes  (..);
       //For single array  
       flex.callers.define.array  (..);
       //For several arrays 
       flex.callers.define.arrays (..);
       //For single string 
       flex.callers.define.string (..);
       //For several strings 
       flex.callers.define.strings(..);
       //For single object 
       flex.callers.define.object (..);
       //For several objects
       flex.callers.define.objects(..);
       //For single number 
       flex.callers.define.number (..);
       //For several numbers
       flex.callers.define.numbers(..);

For all callers syntax is same:

            flex.callers.define.nodes(
               //Define namespace of chain
               //You can use any number of parts as you want, for example: 
               // > nodes.attr
               // > nodes.attrs.set
               // > nodes.attrs.get and etc.
               'attr',
               //Define handle
               function (name, value) {
                    //Object [this] will have only one property - [target].
                    //[this.target] can be some value (or object) if it's single call (node, string, object and etc) or
                    //it will be array for: nodes, strings, objects and etc.
                    Array.prototype.forEach.call(this.target, function (target) {
                        result.push(methods.attr(target, name, value));
                    });
                    return results;
               }
            );
            
            //All parts of chain will be a functions, so to call method of chain you should use next:
            _node('selector).attrs(arg);
            _node('selector).nodes().attrs(arg);
            _node('selector).nodes().attrs().get();
            _node('selector).nodes().attrs().set(arg);
Clone this wiki locally