工程师，请优化你的代码

转自：http://suqing.iteye.com/blog/1751629

Ajax
jQuery ready事件
事件处理
DOM操作

1.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);
});

非常灵活

2.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!
    });
});

3.事件处理

大部分项目这么写：

$("#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）

4.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();

使用链式调用

5.另外一个操作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