优化jQuery代码

时间:2011-01-17 22:51:44

标签: jquery optimization

问候,

用jQuery构建了一些东西,一切都很完美(!),但我希望它尽可能地优化。我可以对代码做些什么小改动?

  $(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;

 });

});

1 个答案:

答案 0 :(得分:1)

我的代码中有两个主要内容我会改变:

首先:dataString = 'mail='+email;这不是设置此请求参数的最佳方式。 email可以很容易地包含在放入HTTP请求时应编码的字符。您可以使用jQuery.param

执行此操作
dataString = jQuery.param({mail: email});

这将编码在HTTP请求中具有特殊含义的字符,并且应该使代码更可靠。或者,稍快一点,您可以使用本机JS函数encodeURIComponent

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

其次,您正在使用return false来避免发生默认操作。我更喜欢使用event.preventDefault。这首先是风格 - 它使你更清楚你想要达到的目标;其次,您可以将它放在处理函数的开头。因此,如果您出于某种原因在函数的其余部分中出现错误,则仍会阻止默认操作。

可能在选择器方面可以实现一些其他增强功能,但如果没有看到您的HTML,就无法判断。