Some sites don’t need big JavaScript architectures, only bits of small behaviors that will affect certain elements. I prefer to put them into a directory called behaviors
.
- Each file is a self-contained piece of code that only affects a single element type.
- Name each one of the files according to the
class
(orrole
) it affects. - They should also be independent of each other, and therefore, order-agnostic.
Example project
...
└── javascripts/
└── behaviors/
├── colorpicker.js
├── modal.js
├── select2.js
├── tooltip.js
└── wow.js
// select2.js -- affects `.select2`
$(function () {
$(".select2").select2();
})
// wow.js -- affects `.wow`
$(function () {
new WOW().init();
})
// tooltips.js -- affects `.tooltip`
$(document).on('hover', '.tooltip', function () {
...
});
Using behaviors
Just include them all into one file. In Rails, this should be as easy as:
//= require_tree ./behaviors
This JavaScript will be safe to include in all pages.