Socket
Socket
Sign inDemoInstall

excellent.js

Package Overview
Dependencies
0
Maintainers
1
Versions
86
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

    excellent.js

Basic DOM Component Framework


Version published
Weekly downloads
86
increased by616.67%
Maintainers
1
Created
Weekly downloads
 

Readme

Source

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.

Keywords

FAQs

Last updated on 23 Dec 2020

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc