ModularJS

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",
  ...
});

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);

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"
});

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);

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);

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

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"

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