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. 

  2. ajoute la class au tableau
    3. 

  3. transforme tableau en string
    4. 




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. 

  2. Introduire des éléments de test
    3. 




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. 

  2. Mise en évidence des fonctions internes
    3. 

  3. Retour d'un objet pointant sur les fonctions
    4. 




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

























Libellés :
,