Concevoir son propre framework Javascript

Concevoir son propre framework Javascript

Html5, CSS3, Javascript Tutoriels

L’objectif de ce tutoriel n’est pas de réinventer la roue, mais de comprendre comment la plupart des frameworks Javascript fonctionnent. Cela dit, concevoir son propre framework Javascript peut être une activité très ludique tant par l’aspect « do it yourself » que par l’aspect pédagogique.
Notre framework se nommera myJS et possèdera, comme tout bon framework, un alias représenté par le signe dollar.

Je ne vous fournirais pas une solution prête à l’emploi mais uniquement les bases nécessaires. A vous de venir enrichir cette base avec vos propres méthodes (selon vos besoins).

La base de notre framework

Voici à quoi ressemble le socle de notre framework. Dans cet état, nous avons déclaré notre framework, son alias, et mis en place, via le système de prototypage de Javascript, un système qui exécutera nos méthodes à partir de la requête CSS passée en paramètre. Les éléments récupérés par la requête CSS sont stockés dans une variable _elements.

(function(win){
	
   var myJS = function(query){
      return new myJS.core.init(query);
   };

   myJS.core = myJS.prototype = {
      constructor: myJS,
      _elements: new Array(),
		
      init: function(query){
         if(query){
            var elements = document.querySelectorAll(query);
            for(var element in elements)
               this._elements.push(element);
         }
         return this;
      }
   };

   myJS.core.init.prototype = myJS.core;

   myJS.extend = myJS.core.extend = function(){
      var target = null, 
      donor = null, 
      length = arguments.length;
	
      target = length == 1 ? this : arguments[0];
      donor = length == 1 ? arguments[0] : arguments[1];
	
      for(var key in donor){
         var method = donor[key];
         if(!donor.hasOwnProperty(method))
            target[key] = method;
      }
      return target;
   };

   win.myJS = win.$ = myJS;
})(window);

Vous remarquerez la présence de la méthode extend() qui nous permettra d’implémenter les fonctionnalités à notre framework.

L’ajout des fonctionnalités

Nous allons maintenant ajouter les fonctionnalités à notre framework. Pour commencer nous allons ajouter trois méthodes basiques : show(), hide() et remove(). La première masquera nos éléments Html, la seconde les affichera et la troisième les supprimera du DOM.

myJS.extend(myJS.core, {

   show: function(){
      for(var i in this._elements)
         this._elements[i].style.display = 'block';
      return this;
   },
   hide: function(){
      for(var i in this._elements)
         this._elements[i].style.display = 'none';
      return this;
   },
   remove: function(){
      for(var i in this._elements)
         this._elements[i].parentNode.removeChild(this._elements[i]);
   }

});

Cette portion de code est à placer dans la closure générale de notre framework.
Nous pouvons dès à présent tester notre framework. Exemple :

$('span, p').remove();

La présence de return this; dans nos méthodes nous permet d’enchainer les appels. Exemple :

$('span, p').hide().show();

Apperçu de notre framework

(function(win){
	
   var myJS = function(query){
      return new myJS.core.init(query);
   };

   myJS.core = myJS.prototype = {
      constructor: myJS,
      _elements: new Array(),
		
      init: function(query){
         if(query){
            var elements = document.querySelectorAll(query);
            for(var element in elements)
               this._elements.push(element);
         }
         return this;
      }
   };

   myJS.core.init.prototype = myJS.core;

   myJS.extend = myJS.core.extend = function(){
      var target = null, 
      donor = null, 
      length = arguments.length;
	
      target = length == 1 ? this : arguments[0];
      donor = length == 1 ? arguments[0] : arguments[1];
	
      for(var key in donor){
         var method = donor[key];
         if(!donor.hasOwnProperty(method))
            target[key] = method;
      }
      return target;
   };

   win.myJS = win.$ = myJS;

   myJS.extend(myJS.core, {

      show: function(){
         for(var i in this._elements)
            this._elements[i].style.display = 'block';
         return this;
      },
      hide: function(){
         for(var i in this._elements)
            this._elements[i].style.display = 'none';
         return this;
      },
      remove: function(){
         for(var i in this._elements)
            this._elements[i].parentNode.removeChild(this._elements[i]);
      }

   });
})(window);

Pour voir notre framework en action, cliquez ici.

A propos de l'auteur

Commentaires

* KeywordLuv ! Entrez VotreNom@VosMotsClés dans le champ "Nom" pour bénéficier d'un mot-clef ciblé.