modularjs

    1.0.9 • Public • Published

    ModularJS

    ModularJS is an events based and modular framework for building node's apps or browser's apps. It was inspired by scaleApp and flightjs.

    Install

    Add the script in your html, no dependencies required.

    <script src="dist/modular.min.js"></script>

    or with npm npm install modularjs

    Usage

    Container([common])

    Create a new container

    //if using browser version
    var App = new Container();
    //or
    var App = new Container({
        jQuery: $,
      commonProperty: "i am common",
      ...
    });
     
    //if using node version
    var modularJS = require('modularjs');
    var App = new modularJS.Container();
    //or
    var App = new modularJS.Container({
      jQuery: $,
      commonProperty: "i am common",
      ...
    });
    common
    [Object] optional - Default {}. Shared object between all components, usefull for sharing library accross your application.
    As you can see in the next example, the object is not sync between components. So if a component modify a property, the change won't affect other components. For sync property view App.set(name, value, [overwrite]).

    App.addComponent(name, constructor)

    Add a component to the container

    App.addComponent("people", function(city){
        this.name = "Henry";
        this.city = city;
        console.log(this.commonProperty); //Output: "i am common"
        this.commonProperty = "i am a modified common";
        console.log(this.commonProperty); //Output: "i am a modified common"
    });
    //same as
    var peopleComponent = function(city){
        this.name = "Henry";
        this.city = city;
        console.log(this.commonProperty); //Output: "i am common"
    }
    App.addComponent("people", peopleComponent);
    name
    [String] required. Name of the component, must be unique.
    Constructor
    [Function] required. Constructor of the component.

    App.addComponentExtend(name, extend, constructor)

    Add a component that extend a class to the container

    var Person = function(){
       this.showName = function(){
       console.log(this.name);
       }
    };
    App.addComponentExtend("people", Person, function(city){
        this.name = "Henry";
        this.city = city;
        this.showName(); //Output: "Henry"
    });
    //same as
    App.addComponentExtend("people", new Person(), function(city){
        this.name = "Henry";
        this.city = city;
        this.showName(); //Output: "Henry"
    });
    //or you can pass an object too
    App.addComponentExtend("people", {
        showName : function(){
       console.log(this.name);
       }
    }, function(city){
        this.name = "Henry";
        this.city = city;
        this.showName(); //Output: "Henry"
    });
    name
    [String] required. Name of the component, it should be unique.
    extend
    [Function / Object] required. Class or object inherited by the component.
    Constructor
    [Function] required. Constructor of the component.

    App.set(name, value, [overwrite])

    Set a shared synchronized variable between all components.
    See Component.containerGet() for more information.

    App.set('AppVersion', '2.1.0');
    //or if AppVersion already exist
    App.set('AppVersion', '2.1.0', true);
    name
    [String] required. Name of the property.
    value
    [Mixed] required. Value of the property.
    overwrite
    [Boolean] optional - Default false. If true set the value event if the property has already been set. If false set the value if the property has not already been set

    App.addMixin(name, mixin)

    Add a mixin that can be required in any components.
    this use the context from the component where the mixin is called.

    App.addMixin('setName', function(name){
        this.name = name;
    });
    //same as
    var setNameMixin = function(name){
        this.name = name;
    };
    App.addMixin('setName', setNameMixin);
    name
    [String] required. Name of the mixin, must be unique.
    mixin
    [Function] required. The mxin itself.

    App.run()

    Create instance of all components. Can be call with several constructors.

    App.run();
    App.run(name);
    App.run(name, args);
    App.run(name, callback);
    App.run(name, args, callback);
    App.run([name, ...]);
    App.run([name, ...], args);
    App.run([name, ...], callback);
    App.run([name, ...], args, callback);

    You can call it multiple times

    App.run('componentTest1');
    App.run('componentTest2');
    App.run();
    /*
    * Will instantiate in order
    * - componentTest1
    * - componentTest2
    * - all other components that are not yet instanciated
    */

    A component can only be run once so if you do :

    App.run('componentTest1');
    App.run('componentTest1');
    //componentTest1 will gonna be called only the first time
    name
    [String / Array] optional - Default "*". Name of the component(s) to instanciate. If equal to "*" instanciate all components in the order they have been added.
    args
    [Array] - Default []. Arguments passed to the component's constructor.
    callback
    [Function] - Default null. Function called after all passed components are instanciated. No arguments supported.

    Components

    In this section we gonna see what you can do inside your components. So first let's take an example.

    App.addComponent("people", function(city){
        this.name = "Henry";
        this.city = city;
    });

    We need to run our component so let's call

    App.run("people", ['Paris'], function(){
        console.log('People has been called, his city is Paris');
    });

    Components extends node's event emitter so inside your component you can call

    this.on('myEvent', function(){
        console.log('my event triggered');
    });
     
    this.emit('myEvent');

    ModularJS add two function in the event emitter

     
    this.before('myEvent', function(){
        console.log('before my event triggered');
    });
     
    this.after('myEvent', function(){
        console.log('after my event triggered');
    });

    Let's require some mixins.

    Component.mixin(name)

    Include a mixin inside your component

    var setName = this.mixin('setName'); //Return false if no mixin with the passed name found
    setName('Pierre');
    console.log(this.name); // Output: "Pierre"
    name
    [String] required. Name of the mixin.

    Shared properties

    Let's see more about shared properties across components. For setting them see Container.set method above.

    Inside your component you can manipulate those properties with three methods:

    this.containerGet(name); //Return the property value
    this.containerSet(name, value, [overwrite]) //Set the property value
    this.containerAdd(object, [overwrite]); //Merge the passed object with the shared object
    this.containerDelete(name); //Delete the property

    If a property is a function you can call her with

    this.containerExecute(name); //Execute the function
    //you can pass arguments to the called function like this
    this.containerExecute(name, arg1, arg2, arg3);

    Like mixins, this use the context from the component where the function is called.

    Contributions:

    Feel free to send pull requests.

    For developement

    git clone https://github.com/PIC-27/modularJS.git MyApp
    cd MyApp
    npm install
    npm run gulp
    

    Install

    npm i modularjs

    DownloadsWeekly Downloads

    1

    Version

    1.0.9

    License

    ISC

    Last publish

    Collaborators

    • geelik