Pages

myClassList : Ecriture d'une API

Nous allons écrire une classe JS simulant classList.

JavaScript
ptr = object.classList



C'est un vrai exercice de programmation.

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
Notons que le type retourné est "string"

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.

  1. transforme string en tableau
  2. ajoute la class au tableau
  3. 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 !
  1. Créer des fonctions pour réutiliser notre code de base
  2. 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);
    }
JS Bin on jsbin.com

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


  1. Création d'un espace de noms
  2. Mise en évidence des fonctions internes
  3. 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 !


JS Bin on jsbin.com

Pour finir, on peut evisager d'écrire l'ensemble des fonctions utiles.
  JS Bin on jsbin.com