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

1. Ajax
2. jQuery ready事件
3. 事件处理
4. 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 variablevar elem = $("#elem");// Set's an element's title attribute using it's current textelem.attr("title", elem.text());// Set's an element's text color to redelem.css("color", "red");// Makes the element fade outelem.fadeOut();

使用变量缓存你的选择器

或者是用更简单的写法：

// Stores the live DOM element inside of a variablevar elem = $("#elem");// Chainingelem.attr("title", elem.text()).css("color", "red").fadeOut();

使用链式调用

5.另外一个操作DOM的示例

大部分项目这么写：

// Dynamically building an unordered list from an arrayvar localArr = ["Greg", "Peter", "Kyle", "Danny", "Mark"],list = $("ul.people");$.each(localArr, function (index, value) {    list.append("
" + value + "
");});

最佳实践：只append一次：

// Dynamically building an unordered list from an arrayvar localArr = ["Greg", "Peter", "Kyle", "Danny", "Mark"],list = $("ul.people"),dynamicItems = "";$.each(localArr, function (index, value) {    dynamicItems += "
" + value + "
";});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