All Projects → vitaly-t → excellent

vitaly-t / excellent

Licence: MIT License
Basic DOM Component Framework

Programming Languages

javascript
184084 projects - #8 most used programming language
CSS
56736 projects
HTML
75241 projects

Excellent.js

Excellent!

Basic DOM Component Framework

Build Status Coverage Status Join Chat

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.

Quick Links:  Examples  |  WiKi  |  API

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].