<< m2e-egit for Eclipse | Home

A Tiny Scrap of JavaScript

Fifteen years ago, when "Web 2.0" was a thing, Ben Nolan's Behaviour.js enlightened me to the virtues of declarative programming.  Developing for a web-browser really lends itself to this approach.  Using "sheets" to target particular JavaScript code at selected DOM elements provides a way to separate, in a consistent way, the behaviorial aspects of a web-page.  For a while I'd subscribed to his advice to use JQuery instead, and this was incredibly effective but always felt like I was cheating.  Including JQuery in a web-page for a tiny bit of convenience was just heavy handed.  Now, 15 years later, I've finally weened myself off of that crutch too.  Below is a tiny scrap of JavaScript that leverages the native JavaScript Document.querySelectorAll() function...

function attachBehaviors(behaviors) {
    Object.entries(behaviors).forEach(([selector, behavior], index) => {
        document.querySelectorAll(selector).forEach(elm => {
            behavior.call(this, index, elm);
        });
    });
}
export {attachBehaviors};

With this function available, now pass a "sheet"...

attachBehaviors({
    'a.externallink': function(idx, elm) {
        elm.addEventListener('click', function(evt) {
            evt.preventDefault();
            window.open(evt.target.href);
        });
    },
    'form#uploadForm': function(idx, elm) {
        elm.addEventListener('submit', function(evt) {
            evt.preventDefault();
            processFiles();
        });
    }
});
Social Bookmarks :  Add this post to Slashdot    Add this post to Digg    Add this post to Reddit    Add this post to Delicious    Add this post to Stumble it    Add this post to Google    Add this post to Technorati    Add this post to Bloglines    Add this post to Facebook    Add this post to Furl    Add this post to Windows Live    Add this post to Yahoo!

Export this post as PDF document  Export this post to PDF document




Add a comment Send a TrackBack