z-hook-finder

What is it

This module was created to handle a BEM-like solution to find JS "hooks".

Here a JS hook means the same for a module as a BEM element means for a block.

As an additional "convention", I use a js- prefix for the classnames, which is used to differenciate JS classes from classes used solely for design by CSS.

Example, explanations:

<!-- The "module" JS module -->
<div id="js-module">
    <div class="js-module__button"></div>
    <div class="js-module__button"></div>
    <div class="js-module__button"></div>
</div>

var HookFinder = require('z-hook-finder');
 
var finder = new HookFinder($('#js-module'), 'js-module__');
// Alternatively you can pass the separator "__" or something else as the third
// parameter: `new HookFinder($('#js-module'), 'js-module', '__');`
 
finder.find('button');
// -> returns the jQuery object for the DOM element
 
finder.find('button', 2);
// -> returns only the first 2 buttons, and outputs a console error

Since this is a CommonJS module, it must be used alongside with Browserify, or something similar, like WebPacker.

License

MIT