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