JavaScript
ptr = object.classList
Nous allons juste développer la méthode add et donnerons le reste du code à étudier.
Nous savons récupérer les classes associées à un nœud du DOM.
| HTML | <element class="p" ... > |
|---|---|
| JavaScript | |
typeof(object.className)
Mise en place de la fonction add
Pour manipuler (ajouter, supprimer) un string, il est fréquent de transformer le string en tableau pour utiliser les méthodes efficaces sur les tableaux.- transforme string en tableau
- ajoute la class au tableau
- transforme tableau en string
Voici les fonctions de base
var t = document.getElementById("f");
var classTab,
classString;
console.log(" type of = " , typeof(t.className));
// string->tab
classTab = t.className.split(" ");
console.log(classTab);
//tab->string
classString = classTab.join(" ");
console.log(classString);
JS Bin on jsbin.com
Nous pouvons tester la présence d'une classe avant ajout
JS Bin on jsbin.com
Amélioration du code
Cela marche, parfait, mais c'est maintenant que la partie intéressante commence !
- Créer des fonctions pour réutiliser notre code de base
- Introduire des éléments de test
Création de fonctions de base
var classesSeparator = " ";
function splitClasses(classesString) {
return classesString.split(classesSeparator);
}
function joinClasses(classes) {
return classes.join(classesSeparator);
}
function indexInClasses(className, classes) {
if (!className || !classes || !classes.length)
return false;
return classes.indexOf(className);
}
Amélioration du code
Il est foncdemental d'imaginer que ce code va rentrer en conflit avec une autre bibliothèque JS. Imaginer que notre fonction add soit utilisée ainsi add(1,2) ?
Les améliorations consistent
//code
})();
exemple :
var _classesSeparator = " ";
Les améliorations consistent
- Création d'un espace de noms
- Mise en évidence des fonctions internes
- Retour d'un objet pointant sur les fonctions
Création d'un espace de nom
Classes = (function () {//code
})();
Mise en évidence des fonctions et variables internes
Nous marquons ces items avec un _exemple :
var _classesSeparator = " ";
Retour de l'objet
La partie la plus subtile.
Classes = (function () {
...
return {
"add": add
};
})();
Le principe reste simple.
Une fonction anonyme s'auto exécute et renvoie un objet que l'on affecte à Classes.
Classes est un objet qui a un méthode add qui pointe en réalité sur la méthode add que nous avons définie et qui fait appelle à des fonctions internes qui ne sont plus atteignable : TOP !
Pour finir, on peut evisager d'écrire l'ensemble des fonctions utiles.
JS Bin on jsbin.com