Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/vitaly-t/excellent
Basic DOM Component Framework
https://github.com/vitaly-t/excellent
Last synced: 2 months ago
JSON representation
Basic DOM Component Framework
- Host: GitHub
- URL: https://github.com/vitaly-t/excellent
- Owner: vitaly-t
- License: mit
- Created: 2018-07-21T14:14:27.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2021-06-10T14:08:06.000Z (over 3 years ago)
- Last Synced: 2024-10-01T20:41:44.053Z (3 months ago)
- Language: JavaScript
- Homepage: https://vitaly-t.github.io/excellent/
- Size: 4.57 MB
- Stars: 57
- Watchers: 6
- Forks: 5
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Contributing: .github/CONTRIBUTING.md
- License: LICENSE
- Code of conduct: .github/CODE_OF_CONDUCT.md
Awesome Lists containing this project
- awesome-ccamel - vitaly-t/excellent - Basic DOM Component Framework (JavaScript)
README
# Excellent.js
## Basic DOM Component Framework
[](https://travis-ci.org/vitaly-t/excellent)
[](https://coveralls.io/github/vitaly-t/excellent?branch=master)
[](https://gitter.im/vitaly-t/excellent)
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:
```html
```
That gives your code isolation and reusability (see [the plunker](http://plnkr.co/edit/60xPj9MiCIbZlfe0Xp2I?p=preview)):
```js
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:
```js
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]
[API]:https://vitaly-t.github.io/excellent/
[Examples]:https://github.com/vitaly-t/excellent/wiki/Examples
[WiKi]:https://github.com/vitaly-t/excellent/wiki
[Classes]:https://github.com/vitaly-t/excellent/wiki/Classes
[Modules]:https://github.com/vitaly-t/excellent/wiki/Modules
[Services]:https://github.com/vitaly-t/excellent/wiki/Services
[Inheritance]:https://github.com/vitaly-t/excellent/wiki/Inheritance
[TypeScript]:https://github.com/vitaly-t/excellent/wiki/TypeScript
[EController.find]:https://vitaly-t.github.io/excellent/EController.html#find
[EController.findOne]:https://vitaly-t.github.io/excellent/EController.html#findOne
[ERoot.find]:https://vitaly-t.github.io/excellent/ERoot.html#find
[ERoot.findOne]:https://vitaly-t.github.io/excellent/ERoot.html#findOne
[ERoot.bind]:https://vitaly-t.github.io/excellent/ERoot.html#bind
[EController.bind]:https://vitaly-t.github.io/excellent/EController.html#bind
[addAlias]:https://vitaly-t.github.io/excellent/ERoot.html#addAlias