Introducing Attach.js

Fri, 02 Aug 2013

Attach.js is a DOM instantiation API designed to tidy up and encapsulate attaching JavaScript to the page.

Attach.js removes dependancy on messy CSS selectors when attaching JavaScript to the page. Attach.js also encapsulates all your DOM "attachments" so that they can easily be reattached when the page is dynamically updated (ie. via AJAX).

I have written Attach.js in pure JavaScript but in the examples I have shown how to use it with jQuery and Mootools.

Simple example.

<div class="someSelector" data-attach="pluginName">..</div>
<div class="anotherSelector" data-attach="SomeThing">..</div>

Attach.add('pluginName', function(el){
  $(el).pluginName();
});
Attach.add('SomeThing', function(el){
   new SomeThing($(el));
});

$(document).ready(function(){
  Attach.run();
});

For more examples and source code:

Attach.js website and GitHub Project.