Pop! Goes the Weasel.js

Pop! Goes the Weasel.js is a tiny set of functions I have identified as being essential to me and my purpose of conquering the world of JavaScript utilities. Are you ready for the Pop! Goes the Weasel.js-revolution? I hope so. Because this weasel is about to go pop!

Etymology

The name Pop! Goes the Weasel came to me when I entered the space-time continuum through the backdoor of my neighborhood Starbucks. I caught a glimpse of past, present and future and realized mankind does not invent to improve upon itself but because it's bored. So, why Pop! Goes the Weasel? Simple. Because the weasel goes pop!

Real Talk

Enough nettling witticism. Here's the deal: I don't like fluoride in my toothpaste and I don't use jQuery. When I write JavaScript I attach and remove event-listeners, hide and show elements and tamper with the class attribute. I may also make a few asynchronous requests. My repertoire of tasks does not end there but the aforementioned are steps I take over and over again and in a quiet hour of deep reflection I concluded it was worth introducing shortcuts for these actions, e.g. addEventListener shortened to on and returning a Promise that performs an asynchronous GET request via get. Looks familiar? So then you might ask yourself: "Why is this fool not using jQuery?" I could waste another paragraph of this markdown on that topic but I think you already know the answer. Exactly. The weasel went pop.

Usage

Include a reference to the Pop! Goes the Weasel.js script in the header of your HTML document or anywhere in the body before you want to use its functionality. There is no $(document).ready(); function in Pop! Goes the Weasel.js (it's up to you to do what's good at the right time). On the other hand, much like jQuery, you can fetch DOM elements (and convert them into Pop! Goes the Weasel.js objects) per CSS Selectors. However, the fastest way to select an element via its id is by omitting the leading pound symbol.

(function($) {
    // This invokes document.getElementById("weasel");
    var weaselPop = $("weasel");

    // Appending an indice returns
    // the DOM element.
    var weaselDOM = $("weasel")[0];

    // All elements with the class .tupenny
    // that are children of #weasel in a
    // Pop! Goes the Weasel.js object.
    var tupennies = $("#weasel .tupenny");
})(PopGoesTheWeasel);

Pop! Goes the Weasel.js has eight genius-vomit-fantastic functions you can invoke on the element(s) you retrieve; functions are chain-able (except for hasClass and get) as you can see in the below examples. Be careful with handling many class-names in a single go for class-related functions. For example, when removing many classes it's better to chain functions than to pass all of them as a single argument, e.g. removeClass("tupenny treacle") may or may not work; better use removeClass("tupenny").removeClass("treacle").

• Use hasClass("class-name") to test whether or not an element has a class.

• Use addClass("class-name") to add a class to a given element.

• Use removeClass("class-name") to remove a class from a given element.

(function($) {
    if ($("weasel").hasClass("didnt-pop")) {
        $("weasel").removeClass("didnt-pop").addClass("pop");
    }
})(PopGoesTheWeasel);

• Use on("click", pop) to attach an event-listener to a given element.

• Use off("click", pop) to detach an event-listener from a given element.

(function($) {
    var popAlert = function (e) {
        alert("Pop!");
    };

    // Note, you have to pass the event-listener
    // to the off function as well.
    $("weasel").on("click", popAlert).off("click", popAlert);
})(PopGoesTheWeasel);

• Use show() to change the CSS display property of a given element to 'block'.

• Use hide() to change the CSS display property of a given element to 'none'.

• Use get("http://pop.goes.the/weasel.json") to perform a XHR GET request. get(url) returns a Promise. Note, you don't have to instantiate PopGoesTheWeasel when using get(url), i.e. call it as a function with ().

(function($) {
    $.get("http://pop.goes.the/weasel.json")
        .then(function (response) {
            return JSON.parse(response)
        })
        .then(function (response) {
            // Do something with JSON object
        }, function (error) {
            // Handle error
        });
})(PopGoesTheWeasel);

Compatibility

Because Pop! Goes the Weasel.js returns a Promise when executing get you should test for its support/load a polyfill (use Modernizr). Once you've taken care of that Pop! Goes the Weasel.js should work properly in Internet Explorer 8+ and most mobile browsers.

Finally

Pop! Goes the Weasel.js is not meant to grow until it reaches the size of jQuery to provide many a feature that alter the API of a scripting language to such extent it becomes its own language. Instead, it should shrink and eventually become unnecessary.