How to write a jQuery like library

jQuery is a great JavaScript Library, it helps to write less and simplifies JavaScript programming

But often there is no need to include jQuery, because the necessary functions are few. It might be fun and useful to build a small library on the jQuery model, lighter and with the only features we need.

In the following examples we would pack a library on the jQuery model, we’ll call it Sambuca, in honor of our favorite liquor here at dotmaui.com

The wrapper

    
var Sambuca;
Sambuca = function(selector) {

    var self = {};
    self.selector = selector;
    self.elements = (typeof selector === 'object') ?
        new Array(self.selector) :
        document.querySelectorAll(self.selector);

    //Our functions will be put here        

    return self;

};

window.Sambuca = Sambuca;
window.$ === undefined && (window.$ = Sambuca)

The trick is the document.querySelectorAll () function that select the items just like jQuery does, see the documentation.

Now we have a $ object accessible throughout the document, but for now, it’s not useful. Let’s see how to add functions such jQuery, eg: .show () and .hide () functions.

Functions

The functions of this library will always return self.

self.show = function() { //show an element

    for (var i = 0; i < self.elements.length; i++) {
        self.elements[i].style.display = '';
    }

    return self;
};

self.hide = function() {

    for (var i = 0; i < self.elements.length; i++) {
        self.elements[i].style.display = 'none';
    }

    return self;

};

Now we can use our library just like we did with jQuery:

$("#myelm").hide();

or

$("div.myclass p#foo").show();

You can also create methods like jQuery $.each (), this snippet must be pasted after the wrapper:

(function($) {
    Sambuca.each = function(o, fn, ctx) {

        var breaker = null;
        var hasOwnProperty = Object.prototype.hasOwnProperty,
            nativeForEach = Array.prototype.forEach;

        if (o == null)
            return;

        if (nativeForEach && o.forEach === nativeForEach) {
            o.forEach(fn, ctx);
        } else if (o.length === +o.length) {
            for (var i = 0, l = o.length; i < l; i++)
                if (i in o && fn.call(ctx, o[i], i, o) === breaker) return;
        } else {
            for (var key in o)
                if (hasOwnProperty.call(o, key))
                    if (fn.call(ctx, o[key], key, o) === breaker) return;
        }
    };
})(Sambuca);

It can be used as follows:

$.each([1, 2, 3, 4], function(n) {
	console.log(n);
})

Now you can continue by adding the features that interest you. We did it and we created a small javascript library, just starting from this example, obviously called SambucaJS.
You can view it here:

https://dotmaui.com/pastebin/hexsntl4

Or use it in your projects:

<script src="https://cdn.dotmaui.com/dotmaui/js/sambucajs-0.1.js"></script>

Here is the full example of this post:

var Sambuca;
Sambuca = function (selector) {
    
    var self = {};
    self.selector = selector;
    self.elements = (typeof selector === 'object') 
                  ? new Array(self.selector) 
                  : document.querySelectorAll(self.selector);

    
    self.show = function () { //show an element

        for (var i = 0; i < self.elements.length; i++) {
            self.elements[i].style.display = '';
        }

        return self;
    };    

    self.hide = function () {

        for (var i = 0; i < self.elements.length; i++) {
            self.elements[i].style.display = 'none';
        }

        return self;

    };
    
    return self;

};

window.Sambuca = Sambuca;
window.$ === undefined && (window.$ = Sambuca);

(function($) {

    var _extend = function(o) {
        $.each(Array.prototype.slice.call(arguments, 1), function(a) {
            for (var p in a)
                if (a[p] !== void 0) o[p] = a[p];
        });
        return o;
    };

    Sambuca.each = function(o, fn, ctx) {

        var breaker = null;
        var hasOwnProperty = Object.prototype.hasOwnProperty,
            nativeForEach = Array.prototype.forEach;

        if (o == null)
            return;

        if (nativeForEach && o.forEach === nativeForEach) {
            o.forEach(fn, ctx);
        } else if (o.length === +o.length) {
            for (var i = 0, l = o.length; i < l; i++)
                if (i in o && fn.call(ctx, o[i], i, o) === breaker) return;
        } else {
            for (var key in o)
                if (hasOwnProperty.call(o, key))
                    if (fn.call(ctx, o[key], key, o) === breaker) return;
        }
    };
})(Sambuca);