Library for building events based apps
npm install modularjshtml
`
or with npm
npm install modularjs
Usage
$3
Create a new container
`js
//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]).
$3
Add a component to the container
`js
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.
$3
Add a component that extend a class to the container
`js
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.
$3
Set a shared synchronized variable between all components.
See Component.containerGet() for more information.
`js
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
$3
Add a mixin that can be required in any components.
this use the context from the component where the mixin is called.
`js
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.
$3
Create instance of all components. Can be call with several constructors.
`js
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
`js
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 :
`js
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.
`js
App.addComponent("people", function(city){
this.name = "Henry";
this.city = city;
});
`
We need to run our component so let's call
`js
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
`js
this.on('myEvent', function(){
console.log('my event triggered');
});
this.emit('myEvent');
`
ModularJS add two function in the event emitter
`js
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.
$3
Include a mixin inside your component
`js
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.
$3
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:
`js
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
`js
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.
$3
`
git clone https://github.com/PIC-27/modularJS.git MyApp
cd MyApp
npm install
npm run gulp
``