optimiser le code jQuery

Question

Salutations,

juste construit quelques trucs avec jQuery, tout fonctionne parfaitement (!), Mais je voudrais qu'il soit aussi optimzed que possible .. ce que de petits changements que je peux faire pour mon code?

$(document).ready(function() { 

// hide the indicator, we use it later 
$(".indicator").hide(); 

// start the animation of the progressbar 
$(".fill").animate({ width: "50px",}, 4000, function() { $(".indicator").effect("pulsate", { times:999 }, 2000);}); 

// notify-me ajax function 
$(".btn-submit").click(function() { 

    // get the variable email and put it in a new variable 
    var email = $("input#mail").val(); 
    var dataString = 'mail='+email; 

    $.ajax({ 
    type: "POST", 
    url: "/mail.php", 
    data: dataString, 
    dataType: "json", 
    success: function(msg){ 

    // JSON return, lets do some magic 
    if(msg.status == "ok") { 
    $("#response-box").fadeIn("slow").delay(2000).fadeOut("slow"); 
    $("#fade").fadeIn("slow").delay(2000).fadeOut("slow"); 
    $("#response-box .inner").html("<h1>Thank you.</h1>We'll keep in touch!"); 
    $("#mail").val("e.g. name@example.com"); 
    } else { 
    $("#response-box").fadeIn("slow").delay(2000).fadeOut("slow"); 
    $("#fade").fadeIn("slow").delay(2000).fadeOut("slow"); 
    $("#response-box .inner").html("<h1>Oops.</h1>Please try again!"); 
    } 
    } 
    }); 

    //make sure the form doesn't post 
    return false; 

}); 

}); 

Answer 1

Il y a deux principales choses dans votre code que je changerais:

Premièrement: dataString = 'mail='+email; Ce n'est pas la meilleure façon de régler ce paramètre de demande. email pourrait facilement contenir des caractères qui devraient être encodés lorsqu'ils sont mis dans une requête HTTP. Vous pouvez le faire en utilisant jQuery.param:

dataString = jQuery.param({mail: email}); 

Cela encoder des caractères qui ont une signification particulière dans une requête HTTP, et doit rendre le code plus fiable. Sinon, et un peu plus rapide, vous pouvez utiliser la fonction native de JS encodeURIComponent:

datastring = 'mail=' + encodeURIComponent(email); 

Deuxièmement, vous utilisez return false pour éviter d'action survenant par défaut. Je préfère utiliser event.preventDefault. C'est d'abord stylistique - cela rend plus clair ce que vous avez l'intention d'accomplir; Deuxièmement, vous pouvez le mettre au début de votre fonction de gestionnaire. Par conséquent, si vous avez une erreur dans le reste de votre fonction pour une raison quelconque, l'action par défaut est toujours empêchée.

Il peut y avoir d'autres améliorations qui pourraient être réalisées en fonction des sélecteurs, mais il est impossible de dire sans voir votre code HTML.