Like.js - Introduction

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 of frustration dealing with big and messy JavaScript applications. It's experimental and I never used 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:

like.a("popup", "click", function(dom, event){...});

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.

Want to know how this works? Have look at the documentation

What's good about it?

The fact that Like.js define behaviors using classes brings some benefits:

Example 1: a positive number behavior

This first example illustrate the use of several events including 2 pseudo events.


HTML


    
  
  

Code




  

Notes

There is 2 pseudo events in like.js.

Example 2: tool tip

HTML


    
  
  

Code




  

Notes

  1. like.a enables you to dispatch events to different handler by passing directly an map of callables instead of a string of events.
  2. 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

HTML


    
  
  

Code



  

Notes

  1. The keyword this in the context of the callback is a Like object. DOM operations apply on the current DOM element when applicable.
  2. 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

HTML



  
  

Code





Notes

  1. If you prefix a data atribute with json: like.data will parse the JSON and return it automatically.
  2. 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.

Can I use it right now?

I woudn't recommend it. Like.js is feature limited and not extensively tested. I would use it as an inspiration but not for anything serious.

What's next?

  1. Custom events. Event driven programmation.
  2. Callback of hell avoidance mechanisms.

Help?

Want to help or ask for more features? please ask on github.

Fork me on GitHub