83eq8w
Last Updated: March 08, 2016
·
2.5K
· emi420
Image

How to make a cool $() selector

I know that %98 of times all you need is download jQuery, but you can learn some little things of how frameworks work making your own tiny-framework.

(This is my first write in english, don't blame on me)

Maybe you've learned that you can use functions that works as constructors and make new shiny instance objects. Something like this:

var Dog = function(options) {
    this.name = options.name;
    this.voice =  options.voice;
};

var dogMaker = function(options) {
   return new Dog(options);
};

var myDog = dogMaker({
    name: "Tango",
    voice: "woof!"
});

And maybe you know, that the $ symbol is valid in JavaScript, and can be used as the name of any object:

var myToolbox = function(query) {
     var el = document.querySelectorAll(query),
         i;
     for(i = 0; i < el.length; i++) {
         this[i] = el[i];
     }
     this.length = i;
}

var $ = function(query) {
    return new myToolbox(query);
}

Using this code you can create new objects from querySelectorAll queries, like $("body") $("#myDivId") $(".myClass").

The next step is to add some methods to the prototype of the instance objects, so will be available to all instances:

myToolbox.prototype = {
    show: function() {
        this[0].style.display = "block";
    },
    hide: function() {
        this[0].style.display = "none";
    }
}

And now you can do some interesting things like:

$("body").show();
$("body").hide();

If you write $("div").length, it will work and return the number of div elements on the document. Write only $("div") and you will see that the returned value is not an Array, but a myToolbox object. So if we want to workaround this and return an Array as the response, we can inherits Array's prototype:

$.prototype = myToolbox.prototype = [];

Here is the final code, enjoy it!

var myToolbox = function(query) {
     var el = document.querySelectorAll(query);
     for(i = 0; i < el.length; i++) {
         this[i] = el[i];
     }
     this.length = i;
}

var $ = function(query) {
    return new myToolbox(query);
}

$.prototype = myToolbox.prototype = [];

myToolbox.prototype.show = function() {
    this[0].style.display = "block";
};

myToolbox.prototype.hide = function() {
    this[0].style.display = "none";
};
Say Thanks
Respond

7 Responses
Add your response

5302
D0e7a53bc25c2827451d9f5b14561e05

Nice writeup. I sometimes think that prototypal inheritance is so much more powerful than class-based inheritance. (That's assuming it's used the right way.)

over 1 year ago ·
5303
D95539de48ba1ce5a49b018f0e836626

rally informative, thanks mate!

over 1 year ago ·
5430

drop the loop and use:

this.push.apply(this, document.querySelectorAll(query));

and drop the return too ... there is no need to return this; in JavaScript, that is what a constructor returns in any case.

over 1 year ago ·
5433
Image

@webreflection I like to be explicit in this example, because is for educational purposes. But if anyone use this code, these tips are useful.

Thanks!

over 1 year ago ·
5437
Cr

Here's a more portable/maintainable approach for a jQuery-like library:
https://gist.github.com/elclanrs/5341331

over 1 year ago ·
5606

emi420 ... returning this in a constructor is not educational, is just wrong understanding/teaching of how a constructor work, sorry

over 1 year ago ·
5801
Image

@webreflection Ok, 'return this' is valid, but the constructor returns 'this' anyway. Removed from the code.

Regards

over 1 year ago ·