ModularJS
Install
Add the script in your html, no dependencies required.
or with npm
npm install modularjs
Usage
Container([common])
Create a new container
//if using browser versionvar App = ;//orvar App = jQuery: $ commonProperty: "i am common" ...; //if using node versionvar modularJS = ;var App = ;//orvar App = 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 viewApp.set(name, value, [overwrite])
.
App.addComponent(name, constructor)
Add a component to the container
App;//same asvar { thisname = "Henry"; thiscity = city; console; //Output: "i am common"}App;
- 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 { this{ console; }};App;//same asApp;//or you can pass an object tooApp;
- 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;//or if AppVersion already existApp;
- 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;//same asvar { thisname = name;};App;
- 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;App;App;App;App;App;App;App;App;
You can call it multiple times
App;App;App;/** 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;App;//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;
We need to run our component so let's call
App;
Components extends node's event emitter so inside your component you can call
this; this;
ModularJS add two function in the event emitter
this; this;
Let's require some mixins.
Component.mixin(name)
Include a mixin inside your component
var setName = this; //Return false if no mixin with the passed name found;console; // 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; //Return the property valuethis //Set the property valuethis; //Merge the passed object with the shared objectthis; //Delete the property
If a property is a function you can call her with
this; //Execute the function//you can pass arguments to the called function like thisthis;
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