Excellent.js
Basic DOM Component Framework
If you like VanillaJS, and working with DOM directly, this tiny (3Kb gzip) library helps with organizing your code into reusable components. See WiKi for details.
You get the essential element-to-controllers bindings:
<div e-bind="awesome, twinkling, message"></div>That gives your code isolation and reusability (see the plunker):
app.addController('message', function(ctrl) {
// this = ctrl
// this.node = your DOM element, to work with directly;
this.node.innerHTML = 'Awesome twinkling message :)';
});
app.addController('awesome', function(ctrl) {
this.node.className = 'green-box';
});
app.addController('twinkling', function(ctrl) {
var s = this.node.style, a = -0.01;
setInterval(function() {
a = (s.opacity < 0 || s.opacity > 1) ? -a : a;
s.opacity = +s.opacity + a;
}, 20);
});Such controllers can easily find each other, either among children, with EController.find and EController.findOne, or globally, with ERoot.find and ERoot.findOne, and access methods and properties in found controllers directly:
app.addController('myCtrl', function(ctrl) {
// this = ctrl
this.onInit = function() {
// find one child controller, and call its method:
ctrl.findOne('childCtrl').someMethod();
// find some global controllers, and call a method:
app.find('globCtrl').forEach(function(c) {
c.someMethod();
});
};
});Or you can alias + configure controllers at the same time (method addAlias), without any search.
Other features include:
- Global and local dynamic bindings, with ERoot.bind and EController.bind.
- Controllers can extend / inherit each other's functionality, see Inheritance.
- Native ES6 classes can be optionally used as controllers, see Classes.
- Modules offer greater reusability and simpler distribution of controllers.
- Services share functionality across all controllers.
- TypeScript support right out of the box.
You can create whole libraries of reusable components that will work with any UI framework, or on their own.