Like.js is a micro framework used to define behaviors. A behavior declare how one or many HTML elements will react to some events.
Like.js is a small, understandable, standalone library. I created it for fun and also out
it for anything real yet but it reflects they way I would go about developing a web application with jQuery right now.
A very simple example
Like.js expose an unique object in the global scope: like. The most important method is like.a.
It is used to define a behavior associated with a CSS class. eg:
As soon as the popup behavior is declared, all elements in the page with the CSS class
like-popup will respond to the click event.
The callback function is called with the DOM element as a first parameter and the event as the second.
The fact that Like.js define behaviors using classes brings
Easy discovery: When reading the HTML document classes like like-popup
will immediatly reveal a behavior and gives the reader an idea of what the behavior is doing
in this context.
Simplicity: Removing or adding a behavior is as simple as adding/removing
the like-popup class. Both can be done
easily in the HTML document or directly in the browser inspector for debugging.
Automatism: Events are automatically handled by a central event delegation dispatcher.
You never bind events to any elements.
Centralisation and inspection: Defined behaviors are available in a central registry.
They can be inspected, removed, added or disabled at will.
Dynamic creation of elements is easy: Because there is no events binded on any elements
(to the exception of the document where all events are delegated), inserting new elements in the HTML document is
effortless (Ajax, Pjax).
Configuration in the DOM: As many elements might share the same behavior, it's
natural to customize the behavior effects using the element attributes.
This helps creating reusable behaviors and put the settings where it matters: close
to the HTML elements that uses them.
Example 1: a positive number behavior
This first example illustrate the use of several events including 2 pseudo events.
There is 2 pseudo events in like.js.
likeInit is triggered immediatly after the behavior as been declared. This is the reason why the first
input doesn't have the wrong value.
likeInsert on the other hand is triggered immediatly when new behavioral DOM elements
are inserted in the document using like.html(dom, html).
like.a enables you to dispatch events to different handler by passing
directly an map of callables instead of a string of events.
The keyword this in the context of a behavior is a Like object scoped with
the current DOM element. Therefore you can use methods like data or byClass
or any other Like methods.
Example 3: event bubbling
The keyword this in the context of the callback is a Like object. DOM operations apply
on the current DOM element when applicable.
like.js, like jQuery, will interupt the bubbling when false
is returned in the callback.
Example 4: multiple behaviors interactions, usage of event driven programmation
If you prefix a data atribute with json: like.data will parse the JSON and return it automatically.
The trigger method will create an event on the fly that will bubble up the DOM tree.
Why using classes and not data attributes?
To make a standalone framework classes seemed an easier fit because native support
to fetch classes is common and fast.
Classes can also be used for styling, if it make sense in the context of the behavior.
Eg. if you have a button behavior, you probably want the button to look the same all accross you
application and therefore you could use the like-button class for style in this case.