HOW TO CREATE A SIMPLE JAVASCRIPT LIBRARY IN JQUERY STYLE

https://bjarneo.codes/how-to-create-a-simple-javascript-library-like-jquery/

In this blog post I’ll show you a simple approach to create a JavaScript library that uses the same syntax as jQuery called method chaining. Lets call our library Q.

Example of how we could use Q: Q(‘.class’).hide();

Why?

You may think “why the heck would I need to create my own library when we got jQuery”, and the answer is simple. YOU DO NOT NEED TO USE JQUERY FOR EVERYTHING. If you’re eager to learn how JavaScript actually work, and/or you’re creating a small application, use your own code and test it in different browsers / browser versions.

How?

First we start off creating our html:

<!DOCTYPE html>
<html>
<head>
    <title>Q Library</title>
</head>
<body>
    <div class="wrapper">
        <h1>This is a headline</h1>
    </div>
</body>
</html>

Javascript skeleton:

// Anonymous function
(function () {
    // Q returns new Library object that hold our selector. Ex: Q('.wrapper')
    var Q = function (params) {
        return new Library(params);
    };

    // In our Library we get our selector with querySelectorAll (we do not support < ie8)
    // We also add selector length, version and twitter/github or whatever you like as information about your library.
    var Library = function (params) {
        // Get params
        var selector = document.querySelectorAll(params),
            i = 0;
        // Get selector length
        this.length = selector.length;
        this.version = '0.1.0';
        this.twitter = 'http://www.twitter.com/bjarneo_';

        // Add selector to object for method chaining
        for (; i < this.length; i++) {
            this[i] = selector[i];
        }

        // Return as object
        return this;
    };

    // Assign our Q object to global window object.
    if(!window.Q) {
        window.Q = Q;
    }
})();

// Example usage:
Q('.wrapper');

Now if you use console in Chrome or Firebug in Firefox you'll see we got our object holding information about the library. Selector, length, version and twitter:

Try to write Q('.wrapper').length and see what result you got.

How to extend the library with methods

// put this code between Library and if(!window.Q)


    // Extend the Library object.
    Q.fn = Library.prototype =
    {
        /**
         * Hide element(s) from DOM
         * @returns {*}
         */
        hide: function () {
            var len = this.length;
            // Here we simply loop through our object (this) and set the css to display none.
            //If you got more that 1 node from DOM selected with querySelectorAll, you would hide them all.
            while (len--) {
                this[len].style.display = 'none';
            }

            // It's important to return this if you want to chain methods!
            return this;
        },

        /**
         * Show element(s) from DOM
         * @returns {*}
         */
        show: function () {
            var len = this.length;
            while (len--) {
                this[len].style.display = 'block';
            }

            return this;
        }
    };

aponxi/Jquery style js framework.md

HOW TO CREATE A SIMPLE JAVASCRIPT LIBRARY IN JQUERY STYLE

Why?

How?