jQuery复习总结（八）编程规范 让代码从二比变为文艺++++

jQuery编程规范

DOM MANIPULATION

二比

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

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

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

普通

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

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

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

文艺

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

    // 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 = $("#item");
    
 // Chaining
    elem.attr("title", elem.text()).css("color", "red").fadeOut();

要尽量减少dom的操作，dom操作代价是巨大的，能用简单的selector就用简单的，当我们能直接用id选择就直接用id，而不是像二比版本的使用复杂无意义的选择器，其次我们可以将jquery搜索匹配到的dom元素用变量存储起来，再次使用时即可不必再进行dom搜索匹配，最后当我们作用的元素是同一个，我们把所有的操作都chain起来，这样代码简洁易维护，要充分利用jQuery的优点

DOM INSERTION

普通

// 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>");
    });

文艺

// 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);

我们碰到向页面中插入元素的操作时，特别是在for循环里插入，插入的次数较多时，我们应尽量减少dom的操作，方法是文艺方法里，用一个类似buffer的东西先全部整理好li，最后再一起插入到list里，这样减少了大量的重复的dom操作

EVENT HANDLING

二比

$("#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?!");
        }
    });

文艺

var list = $("#longlist");
    list.on("mouseenter", "li", function(){
        $(this).text("Click me!");
    });
    list.on("click", "li", function() {
        $(this).text("Why did you click me?!");
    });

二比犯了同样的错误，我们最好将jQuery查询dom操作节省，再查出后我们赋值给一个变量，普通版本进行了改进，但是，除了查询赋值给变量优化了一点，剩下一模一样。假如我们现在的list里有n个li，前两种方法，它们在on下要进行总共2n个handler，代价是昂贵的，但文艺方法让handler绑定在list上，然后在内部生成一个过滤器，如果list的子元素是li，就实现后面的方法，这样总共绑定的handler只有两个，巨大的优化