Como fazer um seletor $ () legal

Eu sei que 98% das vezes, tudo que você precisa é baixar o jQuery, mas você pode aprender algumas pequenas coisas sobre como os frameworks funcionam criando seu próprio tiny-framework.

(Esta é a minha primeira escrita em inglês, não me culpe)

Talvez você tenha aprendido que pode usar funções que funcionam como construtores e criar novos objetos de instância brilhantes. Algo assim:

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!"
});

E talvez você saiba que o símbolo $ é válido em JavaScript e pode ser usado como o nome de qualquer objeto:

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);
}

Usando este código, você pode criar novos objetos a partir de consultas querySelectorAll, como $ (“body”) $ (“# myDivId”) $ (“. MyClass”).

A próxima etapa é adicionar alguns métodos ao protótipo dos objetos da instância, para que estejam disponíveis para todas as instâncias:

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

E agora você pode fazer algumas coisas interessantes como:

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

Se você escrever $ (“div”). Length, ele funcionará e retornará o número de elementos div no documento. Escreva apenas $ (“div”) e você verá que o valor retornado não é um Array, mas um objeto myToolbox. Portanto, se quisermos contornar isso e retornar um Array como resposta, podemos herdar o protótipo do Array:

$.prototype = myToolbox.prototype = [];

Aqui está o código final, divirta-se!

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";
};