Portabilidade de código Prototype para jQuery

Os quadros javascript mudam com o tempo e alguns deixam espaço para outros. Este é o caso para o framework Prototype que foi suplantado nos últimos anos por jQuery.

Vejamos neste exemplo as diferenças de chamar uma função Ajax para o tratamento de um formulário de contacto minimalisto.
O script de processamento do lado do servidor chama-se processForm.php. Retorna uma cadeia de caracteres começando por 'ack' se tudo correr bem ou 'err' se um erro ter encontrado, depois um separador (':::') e, finalmente, a mensagem a ser exibida.
A função javascript displayMessage que usamos aqui mostrará a mensagem de uma maneira diferente dependendo do seu tipo, mas não será desenvolvida.

Nós nos concentramos aqui a destacar as diferenças e as semelhanças entre os dois códigos, assim não vamos procurar torná-los muito específicos aos seus quadros respectivos, a ideia sendo facilitar a migração de um quadro para outro.

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]);
                }
            });
        }
    });
});

A diferença notável entre as duas implementações é a compacidade relativa do código jQuery. Quando Prototype requer duas funções, uma para o envio da requisição e a outra para o seu tratamento, jQuery só precisa de uma.

A função sendContactForm é definida como uma variável javascript fora do bloco $(document).ready a fim de poder chamá-la diretamente no código HTML (exemplo: <form onsubmit="sendContactForm($('#email').val(), $('#subject').val(), $('#message').val())" />).

Como este exemplo o mostra, a portabilidade de Prototype para jQuery é relativamente fácil para as funções Ajax. É o mesmo para as funções de apresentação simples geridas por Scriptaculous de um lado e jQuery do outro.

Portage de code de Prototype à jQuery (em francês)
Porting Prototype code to jQuery (em inglês)
Migración de código Prototype al framework jQuery (em espanhol)