Comment créer facilement un framework Javascript
Partie 4

Dans Comment créer facilement un framework Javascript - Partie 3, nous avons découvert de nouvelles techniques : « Attendre jusqu'au chargement du DOM », « Modification de la fonction 'setStyle()' », « Méthodes set et get pour les éléments d'entrée » et « Effets amusants : 'fadeIn()' et 'fadeOut()' ». Cette semaine, je vais terminer la série de tutoriels sur le Framework Javascript « VOZ » en ajoutant de nouvelles méthodes utiles dans un framework Javascript. En bonus, je vais utiliser un peu d'AJAX dans ce framework. N'hésitez pas à utiliser ce framework tel quel ou en ajoutant vos propres méthodes. J'espère que vous trouverez ce dernier article de la série aussi intéressant que les trois premiers ! N'hésitez pas à laisser vos commentaires, et amusez-vous !

Ici, nous allons faire l'inverse de la méthode « ON » qui est utilisée pour ajouter des événements aux éléments. Précédemment, nous ne pouvions pas supprimer l'événement que nous avions ajouté sur un élément, maintenant si. Par exemple :

// Supprime des événements sur les éléments
// Par exemple $$.getById('elem').un('click',alertme);
un:function(action,callback){
    // Vérifie si la méthode removeEventListener est disponible     
    // Ceci fonctionne pour tous les principaux navigateurs sauf IE
      if(this.elems[0].removeEventListener){
         for(var i = 0;i < this.elems.length;i++){
    // Suppression de l'événement sur les éléments
          this.elems[i].removeEventListener(action,callback,false);    
     }
  }
  // Si le navigateur est IE :( nous utilisons la méthode detachEvent
  else 
  {
     for(var i = 0;i < this.elems.length;i++){
         // Suppression de l'événement sur les éléments, uniquement pour IE
         this.elems[i].detachEvent('on'+action,callback);
     }
  }
  return this;
}

Avec cette méthode, nous avons juste besoin d'enregistrer l'Objet de l'élément à l'intérieur du framework, pour pouvoir l'utiliser. Comme pour les autres méthodes, la description se trouve directement dans le code. Par exemple :

// Récupère les éléments par instance
// Par exemple, si vous faites référence au corps du document, vous devrez utiliser "document.body" au lieu de "document"
getByInstance:function(elem){
    var elems = [];
    elems.push(elem);
    this.elems = elems;
  return this;
}

Cette méthode fait la même chose que la méthode JavaScript innerHTML, avec comme particularité de pouvoir ajouter du code HTML dans l'élément trouvé. Par exemple :

// Méthode innerHTML pour insérer du code HTML à un élément
// html est le paramètre contenant le code html à insérer dans l'élément
innerHTML:function(html){
    for(var i = 0;i < this.elems.length;i++){
     this.elems[i].innerHTML= html;
  }
  return this;
}

Cette méthode est une autre façon d'insérer du texte dans le DOM. Cependant, faites attention, car cela remplacera tout le précédent contenu de l'élément. Dans mon travail, je trouve cette méthode très utile. Voici un exemple :

// Insertion de texte dans un élément             
// Remplacement du précédent contenu
text:function(text){
     text = document.createTextNode(text);
    for(var i = 0; i < this.elems.length;i++){
       this.elems[i].innerHTML = '';
     this.elems[i].appendChild(text);
  }
  return this;
}

Nous y voilà. Commençons par créer un objet pour pouvoir utiliser les requêtes GET/POST en AJAX. L'objet a seulement deux méthodes. La première, « getxhr() », est utilisée pour obtenir un XMLHttpRequest sans se préoccuper du navigateur. Pour Internet Explorer, nous nous limiterons aux versions 6 ou supérieures. L'autre méthode est « sendRequest() », qui est celle que nous utiliserons pour créer une requête AJAX. Créons l'objet AJAX à l'intérieur du framework « VOZ » de façon à l'utiliser comme cela : « $$.AJAX.method. » Vous pouvez ainsi récupérer l'objet AJAX et l'utiliser en dehors du framework pour une autre utilisation, cela ne l'empêchera pas de fonctionner normalement.

AJAX:{}

1. Méthode « getxhr »
   
   Cette méthode est créée spécialement pour les développeurs qui ne veulent pas utiliser de framework AJAX et préfèrent créer leur propre requête. Cette méthode renverra simplement l'objet XMLHttpRequest. Par exemple :

    

   Sélectionnez

   // Cette méthode crée un objet XHR
   // Si vous voulez créer vos propres requêtes AJAX, utilisez cette fonction
   // Par ex. : var myXHR = $$.AJAX.getxhr();
   getxhr:function(){
           var xhr = (window.XMLHttpRequest) ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
           return xhr;
   }

   Maintenant nous disposons d'une méthode pour créer un objet xhr multinavigateur. Utilisons-la dans la méthode « sendRequest ».

2. Méthode « sendRequest »
   
   La méthode « sendRequest » peut être utilisée pour les deux types de requêtes : GET et POST. Nous devons juste le préciser dans un des paramètres. Par exemple :

// Paramètres de sendRequest(method, url, ValuesToSend, callbackObject)

L'utilisation de cet objet est assez facile :

$$.AJAX.sendRequest('post','contact.php',{nom:'Al',email:'pacino@mail.com', message:'Hello world'},        
            {success:function(x){alert(x.responseText)}});

Le dernier argument est un objet contenant trois méthodes différentes :

• Success
  Lorsque la requête est satisfaisante.
• Loading
  Fonctionne après l'envoi de la requête (du client) et avant la réception de la réponse (du serveur).
• Et, Error
  S'il y a une erreur de n'importe quel type lors de l'envoi de la requête.

// Méthode principale AJAX
// Paramètres de sendRequest(method, url, ValuesToSend, callbackObject)
// Exemple : $$.AJAX.sendRequest('get','client.php',{clientId:1234, prenom:'James', nom:'Bond'}, 
//                {success:function(){alert('oui')}, loading:function(){alert('Attendez SVP')}, 
//                error:function(){alert('Non')}});
sendRequest:function(m,url,valObj,callObj){
    // Nous créons ici l'objet xhr
    var myxhr = this.getxhr();
    // Puisque nous devons envoyer les valeurs dans une chaine de caractère. 
    //   Exemple : monurl.php?parametre1=valeur1&parametre2=valeur2...
    // Nous allons créer la variable 'values' qui sauvegardera celles-ci 
    // En parcourant l'objet valObj nous récupérons son nom et sa valeur
    // Enfin nous utilisons encodeURLComponent pour échapper les caractères spéciaux 
    var values ='?';
    for(var k in valObj){
        values+= encodeURIComponent(k) + '=' + encodeURIComponent(valObj[k]) + '&';
    }
    // Si la méthode choisie est 'GET', nous ajoutons les valeurs à l'url 
    // Comme nous n'avons pas besoin d'envoyer les valeurs par le xhr.send, nous mettons à null la variable 'values'
    if(m === 'get'){
        url+=values;
        values= null;
    }
    // Ouverture de la connexion AJAX
    myxhr.open(m,url,true);
 
    // Si la méthode est 'POST'
    // Nous devons supprimer le '?' au début de la valeur de la variable 'values' 
    // Et définir l'entête requis pour la méthode 'POST'
    if(m=='post'){
        values=values.substring(1,values.length-1);
        myxhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    }
    // Envoi de la requête avec AJAX 
    myxhr.send(values);
    // Si elle est disponible, exécute la fonction de chargement du callObj 
    if(callObj.loading){ callObj.loading();}
    // Lorsque 'readyState' vaut 4
    myxhr.onreadystatechange = function(){
        if(myxhr.readyState==4){
            switch(myxhr.status){
                // Si le status vaut 200 cela veut dire que tout s'est bien passé, 
                // on appelle la fonction success de callObj.
                case 200: if(callObj.success)callObj.success(myxhr); break;
                // Si le status vaut 403, 404 ou 503, cela signifie qu'il y a eu un problème,
                // on appelle la fonction error de callObj.
                case 403, 404, 503 :  if(callObj.error)callObj.error(myxhr); break;
                default:  callObj.error(myxhr);    
            }
        }
    }
}

Exemple du framework JavaScript VOZ partie 4

Fichier js VOZ partie 4

Visitez le lien ci-dessus pour voir la dernière partie de notre framework VOZ en action ! Aussi, restez connectés pour de futurs tutoriels Javascript et AJAX sur lesquels je travaille actuellement et qui devraient arriver dans les prochains mois. [Notes de traduction : les autres tutoriels de l'auteur sont disponibles sur son site admixweb]
Comme toujours, 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 l'avis des amoureux du Web !

Je tiens ici à remercier l'équipe de Developpez.com pour ses relectures attentives et ses suggestions, et en particulier eusebe19.