Comment créer facilement un framework Javascript Partie 2

KalyParker

Traduction de l'article How to Easily Create a JavaScript Framework, Part 2 de Teylor Feliz paru sur AdmixWeb.
Translated with the permission of AdmixWeb and the author.

Commentez ?

- Titre : Comment créer facilement un framework Javascript Partie 2

- Auteur : KalyParker

- Parution : 4 février 2010

- Mise à jour : 1 octobre 2010

- Licence : Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright ® 2020 Teylor Feliz. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts. Droits de diffusion permanents accordés à Developpez LLC.

Sommaire

- I. Introduction

- II. La navigation DOM partie 2

- III. Méthodes supplémentaires pour le fun

- IV. Conclusion

- V. Remerciements

I - Introduction

La semaine dernière, j'ai parlé de l'importance du langage de programmation JavaScript, et comment il est devenu très populaire parmi les programmeurs à cause de ses diverses fonctionnalités. Comme je l'ai précédemment mentionné, aujourd'hui les programmeurs peuvent créer beaucoup plus facilement des applications Web avec JavaScript, c'est la raison pour laquelle on continue à l'apprendre et à l'utiliser. La semaine dernière, j'ai également expliqué étape par étape la création de notre propre framework JavaScript, que j'ai appelé « VOZ ». Dans le tutoriel de cette semaine, je vais le compléter à partir du code de la semaine dernière. Je vais principalement l'étoffer un peu, en ajoutant des méthodes utiles et d'autres méthodes supplémentaires un peu plus fun. Lisez la suite pour suivre l'évolution du framework ! N'hésitez pas à laisser vos commentaires, et amusez-vous !

II - La navigation DOM partie 2

Dans la partie précédente de la série, nous avons présenté la méthode « $$.getById() », aujourd'hui nous allons créer d'autres méthodes similaires pour utiliser DOM plus facilement. Ces techniques simples d'utilisation s'appelleront « getByName », « getByTag » et « getByClass ».

Méthode « getByName »
La méthode « getByName » peut prendre plus d'un paramètre et permet d'obtenir tous les éléments ayant un nom spécifique.

// Récupère les éléments par nom
// Peut prendre plus d'un paramètre
getByName:function(){
var tempElems = [];// tableau temporaire pour sauvegarder les éléments trouvés
for(var i = 0;i<arguments.length;i++){
if(typeof arguments[i] === 'string'){// Vérifie que le paramètre est une chaîne
var e = document.getElementsByName(arguments[i]);
for(var j=0;j<e.length;j++){
tempElems.push(e[j]);
}
}
}
this.elems = tempElems; // Tous les éléments sont copiés dans la propriété elems
return this;// Renvoie this dans l'ordre d'appel
},

Méthode « getByTag »
La méthode « getByTag » a la capacité de trouver tous les éléments ayant un nom de balise spécifique.

// Récupère les éléments par nom de balise
// Peut prendre plus d'un paramètre
getByTag:function(){
var tempElems = []; // tableau temporaire pour sauvegarder les éléments trouvés
for(var i = 0;i<arguments.length;i++){
if(typeof arguments[i] === 'string'){// Vérifie que le paramètre est une chaîne
var e = document.getElementsByTagName(arguments[i]);
// Recherche des éléments ayant le nom de la balise et sauvegarde dans le tableau e
for(var j=0;j<e.length;j++){
tempElems.push(e[j]); // Ajoute l'élément à tempElems
}
}
}
this.elems = tempElems; //  Tous les éléments sont copiés dans la propriété elems
return this;// Renvoie this dans l'ordre d'appel
},

Méthode « getByClass »
La méthode « getByClass » retourne tous les éléments ayant le nom de classe spécifié. La recherche peut être filtrée dans la page entière ou sur un conteneur parent et sur un type de balise défini pas l'utilisateur.

// Récupère les éléments par Nom de classe
// name est le nom de la classe
// type est le nom de balise recherché
// parent est le parent du groupe spécifique
getByClass:function(name,type,parent){
var tempElems = [];// tableau temporaire pour sauvegarder les éléments trouvés
var pattern = new RegExp("(^| )" + name + "( |$)"); // Expression régulière pour savoir si l'élément a une classe
// Recherche des éléments par nom de balise avec la possibilité de choisir le parent, et sélection d'une balise
// en particulier ou de la totalité des balises
var e = (parent || document).getElementsByTagName(type || '*')
for(var i=0;i<e.length;i++){
if(pattern.test(e[i].className)){// Si l'élément a un nom de classe alors...
tempElems.push(e[i]); // Ajout de l'élément à tempElems
}
}
this.elems = tempElems; //  Tous les éléments sont copiés dans la propriété elems
return this;// Renvoie this dans l'ordre d'appel
},

Méthode « checked »
Cette méthode coche ou décoche simplement les boutons radio ou les cases à cocher trouvés.

// Coche ou décoche un bouton radio ou une case à cocher
// bol peut être true ou false;
checked:function(bol){
for(var i=0;i<this.elems.length;i++){
// Vérifie si l'élément est un input de type case à cocher ou radio bouton, car c'est le même objet dans les deux cas
if(this.elems[i].nodeName.toLowerCase()==='input' && (this.elems[i].getAttribute('type') == 'checkbox'
|| this.elems[i].getAttribute('type') == 'radio')){
this.elems[i].checked = bol; // Affecte vrai ou faux
}
}
return this;
},

III - Méthodes supplémentaires pour le fun

Méthode « even et odd »
La méthode « even » correspond aux éléments d'un tableau dont l'indice est pair. Par exemple 0, 2, 4, 6, 8, 10…
La méthode « odd » correspond aux éléments d'un tableau dont l'indice est impair. Par exemple 1, 3, 5, 7, 9…

// Récupère les éléments d'un tableau dont l'indice est pair. Exemple 0, 2, 4, 6, 8, 10...
// Méthode assez sympa pour colorer les lignes d'une table
even:function(){
var tempElems = [];
for(var i=0;i<this.elems.length;i+=2){
tempElems.push(this.elems[i]);
}
this.elems = tempElems;
return this;
},
// Récupère les éléments d'un tableau dont l'indice est impair. Exemple 1, 3, 5, 7, 9...
// Méthode assez sympa pour colorer les lignes d'une table
odd:function(){
var tempElems = [];
for(var i=1;i<this.elems.length;i+=2){
tempElems.push(this.elems[i]);
}
this.elems = tempElems;
return this;
},

Méthode « setOpacity »
Les méthodes « setOpacity » affectent en pourcentage ou en valeur l'opacité voulue sur un élément.

// Fonction assez sympa pour opacifier des éléments
// level est le niveau d'opacité souhaité
setOpacity: function(level){
for(var i = 0;i<this.elems.length;i++){
if(this.elems[0].filters){ // Si le navigateur est ie, alors on définit l'opacité ainsi
this.elems[i].style.filter='alpha(opacity='+level+')';
}
else{ // et pour tous les autres navigateurs ...
this.elems[i].style.opacity=level/100;
}
}
return this;// Renvoie this dans l'ordre d'appel
},

IV - Conclusion

Exemple du framework JavaScript VOZ

Visitez le lien ci-dessus pour voir la deuxième partie de notre framework VOZ en action ! Aussi, attendez la troisième partie de cette série sur ce framework JavaScript, qui est en cours de rédaction. J'espère que vous avez trouvé ce tutoriel amusant et facile à suivre ! N'hésitez pas à laisser vos commentaires, car comme toujours j'apprécie de recevoir les impressions d'autres amoureux du Web !

V - Remerciements

Je tiens ici à remercier l'équipe de Developpez.com pour ses relectures attentives et ses suggestions, et en particulier Bovino et Bérénice MAUREL.