dimanche 25 mars 2012

Portage de code de Prototype à jQuery

Les frameworks javascript évoluent au fil du temps et certains laissent place à d'autres. C'est le cas pour le framework Prototype qui a été supplanté depuis quelques années par jQuery.

Voyons dans cet exemple les différences d'appel à une fonction Ajax de traitement d'un formulaire de contact minimaliste.
Le script de traitement côté serveur s'appelle processForm.php. Il renvoie une chaîne de caractères commençant par 'ack' dans le cas où tout se passe bien ou 'err' si une erreur a été rencontrée, puis un séparateur (':::') et enfin le message à afficher.
La fonction javascript displayMessage utilisée ici va afficher le message de façon différente suivant son type, mais ne sera pas développée.

Nous nous attachons ici à mettre en avant les différences et les similarités entre les deux codes, aussi nous ne chercherons pas à les rendre trop spécifiques à leurs frameworks respectifs, l'idée étant de faciliter le portage d'un framework à l'autre.

Prototype

function sendContactForm(email, subject, message) {
    new Ajax.Request('processForm.php', {
        method: 'post',
        parameters: {
            email: email,
            subject: subject,
            message: message
        },
        onSuccess: function(transport){processSendContactForm(transport.responseText)}
    });
}

function processSendContactForm(response) {
    if (response != '') {
        var tmp = response.split(':::');
        // tmp[0] is either 'ack' (acknowledgment) or 'err' (error)
        displayMessage(tmp[0], tmp[1]);
    }
}

jQuery

var sendContactForm;
$(document).ready(function(){
    $(function() {
        sendContactForm = function(email, subject, message) {
            $.ajax({
                type: "POST",
                url: "processForm.php",
                cache: false,
                data: "email=" + email + "&subject=" + subject + "&message=" + message,
                success: function(response){
                    // tmp[0] is either 'ack' (acknowledgment) or 'err' (error)
                    displayMessage(tmp[0], tmp[1]);
                }
            });
        }
    });
});
La différence notable entre les deux implémentations est la compacité relative du code jQuery. Là où Prototype nécessite deux fonctions, une pour l'envoi de la requête et l'autre pour son traitement, jQuery n'en a besoin que d'une.

La fonction sendContactForm est définie en tant que variable javascript en dehors du bloc $(document).ready afin de pouvoir l'appeler directement dans le code HTML (exp. : <form onsubmit="sendContactForm($('#email').val(), $('#subject').val(), $('#message').val())" />).

Comme cet exemple le montre, le portage de Prototype vers jQuery est relativement aisé pour les fonctions Ajax. Il en va de même pour les fonctions d'affichage simple gérées par Scriptaculous d'un côté et jQuery de l'autre.


Porting Prototype code to jQuery (en anglais)
Migración de código Prototype al framework jQuery (en espagnol)
Portabilidade de código Prototype para jQuery (en portugais)

Aucun commentaire:

Enregistrer un commentaire