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