工程师，请优化你的代码

1. Ajax
2. jQuery ready事件
3. 事件处理
4. DOM操作

 

 

 Ajax

 

大部分项目这么写：

 function getName(personid) {
    var dynamicData = {};
    dynamicData["id"] = personID;
    $.ajax({
      url: "getName.php",
      type: "get",
      data: dynamicData,
      success: function(data) {
        // Updates the UI based the ajax result
        $(".person-name").text(data.name);  
      }
    });
  }

  getName("2342342");

 

 最佳实践： 

function getName(personid) {
    var dynamicData = {};
    dynamicData["id"] = personid;
    return $.ajax({
      url: "getName.php",
      type: "get",
      data: dynamicData
    });
  }

  getName("2342342").done(function(data) {
    // Updates the UI based the ajax result
    $(".person-name").text(data.name); 
  });

 非常灵活

  

jQuery ready事件

 

大部分项目用这段代码做闭包

 

 $("document").ready(function() {
    // The DOM is ready!
    // The rest of the code goes here
  });

 或者用简写

 

 

$(function() {
    // The DOM is ready!
    // The rest of the code goes here
});

 

• 如果你清楚代码的执行环境 
• 如果你不关注页面加载性能
• 如果你不关注最佳实践

。。。这么写就没问题

 

更好的写法是

// IIFE - Immediately Invoked Function Expression
  (function($, window, document) {

    // The $ is now locally scoped 

   // Listen for the jQuery ready event on the document
   $(function() {

     // The DOM is ready!

   });

   // The rest of the code goes here!

  }(window.jQuery, window, document));
  // The global jQuery object is passed as a parameter

 

更进一步，最佳写法：

// IIFE - Immediately Invoked Function Expression
  (function(yourcode) {

    // The global jQuery object is passed as a parameter
  	yourcode(window.jQuery, window, document);

  }(function($, window, document) {

    // The $ is now locally scoped 

   // Listen for the jQuery ready event on the document
   $(function() {

     // The DOM is ready!

   }));

 

  

 

事件处理

 

大部分项目这么写：

  $("#longlist li").on("mouseenter", function() {

    $(this).text("Click me!");

  });

  $("#longlist li").on("click", function() {

    $(this).text("Why did you click me?!");

  });

 

更好的写法：

 var listItems = $("#longlist li");
  listItems.on({

    "mouseenter": function() {

      $(this).text("Click me!");

    },

    "click": function() {

      $(this).text("Why did you click me?!");

    }

  });

 DRY ( Don't repeat yourself. )

 

 最佳实践：

var list = $("#longlist");

  list.on("mouseenter", "li", function(){

    $(this).text("Click me!");

  });

  list.on("click", "li", function() {

    $(this).text("Why did you click me?!");

  });

 使用事件代理（Event Delegation）

 

DOM操作

大部分项目这么写：

$('.class1').click(function() {
   some_function();
});

$('.class2').click(function() {
   some_function();
});

 

• 如果你喜欢重复的编码
• 如果你不关心代码性能
• 如果你不关注最佳实践

更好的实现方法：

$('.class1').$('.class2').click(function() {
   some_function();
});

 

大部分项目这么写：

/ Set's an element's title attribute using it's current text
  $(".container input#elem").attr("title", $(".container input#elem").text());

  // Set's an element's text color to red
  $(".container input#elem").css("color", "red");

  // Makes the element fade out
  $(".container input#elem").fadeOut();

 

• 如果你喜欢重复的编码
• 如果你不关心代码性能
• 如果你不关注最佳实践

。。。这么写没问题

 

更好的实现方法：

// Set's an element's title attribute using it's current text
  $("#elem").attr("title", $("#elem").text());

  // Set's an element's text color to red
  $("#elem").css("color", "red");

  // Makes the element fade out
  $("#elem").fadeOut();

 简化你的选择器

 

最佳实践：

  // Stores the live DOM element inside of a variable
  var elem = $("#elem");

  // Set's an element's title attribute using it's current text
  elem.attr("title", elem.text());

  // Set's an element's text color to red
  elem.css("color", "red");

  // Makes the element fade out
  elem.fadeOut();

 使用变量缓存你的选择器

 

或者是用更简单的写法：

// Stores the live DOM element inside of a variable
  var elem = $("#elem");

  // Chaining
  elem.attr("title", elem.text()).css("color", "red").fadeOut();

 使用链式调用

 

另外一个操作DOM的示例

大部分项目这么写：

// Dynamically building an unordered list from an array
  var localArr = ["Greg", "Peter", "Kyle", "Danny", "Mark"],
  	list = $("ul.people");

  $.each(localArr, function(index, value) {

    list.append("<li id=" + index + ">" + value + "</li>");

  });

 最佳实践：只append一次

// Dynamically building an unordered list from an array
  var localArr = ["Greg", "Peter", "Kyle", "Danny", "Mark"],
  	list = $("ul.people"),
  	dynamicItems = "";

  $.each(localArr, function(index, value) {

    dynamicItems += "<li id=" + index + ">" + value + "</li>";

  });

  list.append(dynamicItems);

 

 

 

 

参考资料：

http://gregfranko.com/jquery-best-practices/

http://stackoverflow.com/questions/18307078/jquery-best-practises-in-case-of-document-ready

http://gregfranko.com/jquery-best-practices/#/29