加載jQuery

1.堅(jiān)持使用CDN來(lái)加載jQuery，這種別人服務(wù)器免費(fèi)幫你托管文件的便宜干嘛不占呢。點(diǎn)擊查看使用CDN的好處，點(diǎn)此查看一些主流的jQuery CDN地址。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<script>window.jQuery || document.write('<script src="js/jquery-1.11.0.min.js" type="text/javascript"><\/script>')</script>

2.安全起見，最好還是提供一個(gè)本地備份以便在無(wú)法從遠(yuǎn)程CDN服務(wù)器獲取jQuery時(shí)網(wǎng)站也能工作，如上面代碼所示。詳情見此。

3.使用裸協(xié)議的URL（也就是說(shuō)去掉http:或者h(yuǎn)ttps:），如上面代碼展示的那樣。

4.如果可能，盡量將你的JavaScript和jQuery代碼放到頁(yè)面底部。詳情移步這里，或者查看一個(gè)HTML5頁(yè)面標(biāo)準(zhǔn)模板。

5.該使用哪個(gè)版本？

如果你想兼容IE678請(qǐng)表用2.x的版本
針對(duì)極少數(shù)不用考慮兼容性的幸運(yùn)兒，極力推薦使用最新版本的jQuery
當(dāng)從CDN服務(wù)器加載jQuery時(shí)，最好把版本寫全（比如1.11.0而不是1.11或者直接寫個(gè)1）
千萬(wàn)莫重復(fù)加載

6.如果你同時(shí)還使用了其他JS框架諸如Prototype, MooTools, Zepto云云，因?yàn)樗麄円彩褂昧?code>$符號(hào)，所以你就表再用美刀符號(hào)來(lái)進(jìn)行jQuery?編碼了，而請(qǐng)用’jQuery’代替。并且調(diào)用保證$.noConflict()不會(huì)有沖突出現(xiàn)。

7.要檢測(cè)瀏覽器對(duì)一些新特性是否支持，請(qǐng)用Modernizr。

關(guān)于變量

1.jQuery類型的變量最好加個(gè)$前綴。

2.時(shí)常將jQuery選擇器返回的內(nèi)容存進(jìn)變量以便重用

var $products = $("div.products"); // 慢
var $products = $(".products"); // 快

3.使用駝峰命名

關(guān)于選擇器

1.盡量ID選擇器。其背后機(jī)理其實(shí)是調(diào)用原生的document.getElementById()，所以速度較其他選擇器快。

2.使用類選擇器時(shí)表指定元素的類型。不信你看這個(gè)性能比較

var $products = $("div.products"); // 慢
var $products = $(".products"); // 快

3.ID父親容器下面再查找子元素請(qǐng)用.find()方法。這樣做快的原因是通過(guò)id選擇元素不會(huì)使用Sizzle引擎。詳情看這里

4.多級(jí)查找中，右邊盡量指定得詳細(xì)點(diǎn)而左邊則盡量簡(jiǎn)單點(diǎn)。了解更多

// 丑陋
$("div.data .gonzalez");

// 優(yōu)化后
$(".data td.gonzalez");

5.避免冗余。詳情或者查看性能比較

$(".data table.attendees td.gonzalez");
 
// 好的方式：去掉了中間的冗余
$(".data td.gonzalez");

6.指定選擇的上下文。

// 劣質(zhì)的代碼：因?yàn)樾枰闅v整個(gè)DOM來(lái)找到.class
$('.class');

// 高品代碼：因?yàn)橹恍柙谥付ㄈ萜鞣秶鷥?nèi)進(jìn)行查找
$('.class', '#class-container');

7.表使用萬(wàn)能選擇器。查看具體闡釋

$('div.container > *'); // 差
$('div.container').children(); // 棒

8.警惕隱式的萬(wàn)能選擇器。省略的情況下其實(shí)使用的就是*號(hào)通配符。更多信息

$('div.someclass :radio'); // 差
$('div.someclass input:radio'); // 棒

9.ID已經(jīng)表示唯一了，背后使用的是document.getElementById()，所以表跟其他選擇器混搭了。

$('#outer #inner'); // 臟
$('div#inner'); // 亂
$('.outer-container #inner'); // 差
$('#inner'); // 干凈利落，后臺(tái)只需調(diào)用document.getElementById()

DOM操作相關(guān)

1.操作任何元素前先將其從文檔卸載，完了再貼回去。這事兒還能說(shuō)細(xì)點(diǎn)

var $myList = $("#list-container > ul").detach();
//...一大堆對(duì)$myList的處理
$myList.appendTo("#list-container");

2.代碼里將HTML組織好后再一次性貼到DOM中去。具體來(lái)說(shuō)，性能比較

// 這樣不好
var $myList = $("#list");
for(var i = 0; i < 10000; i++){
    $myList.append("<li>"+i+"</li>");
}
 
// 這樣好
var $myList = $("#list");
var list = "";
for(var i = 0; i < 10000; i++){
    list += "<li>"+i+"</li>";
}
$myList.html(list);
 
// 但這樣更好
var array = []; 
for(var i = 0; i < 10000; i++){
    array[i] = "<li>"+i+"</li>"; 
}
$myList.html(array.join(''));

3.不要處理不存在的元素。詳情

// 無(wú)良的做法：jQuery后臺(tái)要跑完三個(gè)函數(shù)后才會(huì)知道這個(gè)元素其實(shí)根本不存在
$("#nosuchthing").slideUp();
// 應(yīng)該這樣
var $mySelection = $("#nosuchthing");
if ($mySelection.length) {
    $mySelection.slideUp();

事件相關(guān)

1.一個(gè)頁(yè)面只寫一個(gè)文檔ready事件的處理程序。這樣代碼既清晰好調(diào)試，又容易跟蹤代碼的進(jìn)程。

2.表用匿名函數(shù)來(lái)做事件的回調(diào)。匿名函數(shù)不易調(diào)試維護(hù)測(cè)試和復(fù)用。或許你想較真，看看這里吧

$("#myLink").on("click", function(){...}); // 表這樣
 
// 這樣
function myLinkClickHandler(){...}
$("#myLink").on("click", myLinkClickHandler);

3.處理文檔ready事件的回調(diào)也表用匿名函數(shù)，匿名函數(shù)不易調(diào)試維護(hù)測(cè)試和復(fù)用:(

$(function(){ ... }); // 糟糕的做法：無(wú)法利用此函數(shù)也無(wú)法為其寫測(cè)試用例
 
// 好的做法
$(initPage); // 抑或 $(document).ready(initPage);
function initPage(){
    // 這里你可以進(jìn)行程序的初始化了
}

4.進(jìn)一步，最好也將ready事件的處理程序放到外部文件中引入到頁(yè)面，而頁(yè)面中內(nèi)嵌的代碼只需調(diào)用即可。

<script src="my-document-ready.js"></script>
<script>
	// 初始化一些必要的全局變量
	$(document).ready(initPage); // 抑或 $(initPage);
</script>

5.千萬(wàn)表寫內(nèi)聯(lián)到HTML的JS代碼，這是調(diào)試的夢(mèng)魘！應(yīng)該總是用jQuery來(lái)綁定事件自帶程序，這樣也方便隨時(shí)動(dòng)態(tài)地取消綁定。

<a id="myLink" href="#" onclick="myEventHandler();">my link</a> <!--不好 -->
$("#myLink").on("click", myEventHandler); // GOOD

6.如果可能盡量在綁定事件處理程序時(shí)使用一個(gè)命名空間，這樣可以方便地取消綁定而不會(huì)影響其他綁定。

$("#myLink").on("click.mySpecialClick", myEventHandler); // 不錯(cuò)
// 之后，讓我們優(yōu)雅地解除綁定
$("#myLink").unbind("click.mySpecialClick");

異步操作

1.直接用$.ajax()而表去用.getJson() 或 .get(),因?yàn)閖Query內(nèi)部還是將其轉(zhuǎn)為前者

2.表對(duì)HTTPS站點(diǎn)使用HTTP去發(fā)起請(qǐng)求，最好干脆就表指定（將HTTP或者HTTPS從你的URL中移除）

3.表在鏈接里面嵌參數(shù)，請(qǐng)使用專門的參數(shù)設(shè)置來(lái)傳遞

// 不易閱讀的代碼...
$.ajax({
    url: "something.php?param1=test1&param2=test2",
    ....
});
 
// 更易閱讀...
$.ajax({
    url: "something.php",
    data: { param1: test1, param2: test2 }
});

4.盡量指明數(shù)據(jù)類型以便你自己清楚要處理什么樣的數(shù)據(jù)（見下方會(huì)提到的Ajax模板）

5.對(duì)于異步動(dòng)態(tài)加載的內(nèi)容，最好使用代理來(lái)綁定事件處理程序。這樣的好處是對(duì)于之后動(dòng)態(tài)加載的元素事件同樣有效。你或許想了解更多

$("#parent-container").on("click", "a", delegatedClickHandlerForAjax);

6.使用Promise模式。更多例子

$.ajax({ ... }).then(successHandler, failureHandler);
 
// 抑或
var jqxhr = $.ajax({ ... });
jqxhr.done(successHandler);
jqxhr.fail(failureHandler);

7.標(biāo)準(zhǔn)的Ajax模板一分。追尋根源

var jqxhr = $.ajax({
    url: url,
    type: "GET", // 默認(rèn)為GET,你可以根據(jù)需要更改
    cache: true, // 默認(rèn)為true,但對(duì)于script,jsonp類型為false,可以自行設(shè)置
    data: {}, // 將請(qǐng)求參數(shù)放這里.
    dataType: "json", // 指定想要的數(shù)據(jù)類型
    jsonp: "callback", // 指定回調(diào)處理JSONP類型的請(qǐng)求
    statusCode: { // 如果你想處理各狀態(tài)的錯(cuò)誤的話
        404: handler404,
        500: handler500
    }
});
jqxhr.done(successHandler);
jqxhr.fail(failureHandler);

動(dòng)畫與特效

1.保持一個(gè)始終如一風(fēng)格統(tǒng)一的動(dòng)畫實(shí)現(xiàn)

2.緊遵用戶體驗(yàn)，表濫用動(dòng)畫特效

使用簡(jiǎn)潔的顯示隱藏，狀態(tài)切換，滑入滑出等效果來(lái)展示元素
使用預(yù)設(shè)值來(lái)設(shè)置動(dòng)畫的速度’fast’，’slow’，或者400（中等速度）

插件相關(guān)

1.始終選擇一個(gè)有良好支持，完善文檔，全面測(cè)試過(guò)并且社區(qū)活躍的插件

2.注意所用插件與當(dāng)前使用的jQuery版本是否兼容

3.一些常用功能應(yīng)該寫成jQuery插件。一分jQuery插件的編寫模板

鏈?zhǔn)骄浞?/h1>

1.除了用變量將jQuery選擇器返回的結(jié)果保存，還可以利用好鏈?zhǔn)秸{(diào)用。

$("#myDiv").addClass("error").show();

2.當(dāng)鏈?zhǔn)秸{(diào)用多達(dá)3次以上或代碼因綁定回調(diào)略顯復(fù)雜時(shí)，使用換行和適當(dāng)?shù)目s進(jìn)來(lái)提高代碼的可讀性。

$("#myLink")
    .addClass("bold")
    .on("click", myClickHandler)
    .on("mouseover", myMouseOverHandler)
    .show();

3.對(duì)于特別長(zhǎng)的調(diào)用最好還是用變量保存下中間結(jié)果來(lái)簡(jiǎn)化代碼。

其他

1.使用對(duì)象字面量來(lái)傳遞參數(shù)

$myLink.attr("href", "#").attr("title", "my link").attr("rel", "external"); // 糟糕：調(diào)用了三次attr
// 不錯(cuò)，只調(diào)用了一次attr
$myLink.attr({
    href: "#",
    title: "my link",
    rel: "external"
});

2.表將CSS與jQuery雜揉

$("#mydiv").css({'color':red, 'font-weight':'bold'}); // 不好
.error {/* 不錯(cuò) */
    color: red;
    font-weight: bold;
}
$("#mydiv").addClass("error");

3.時(shí)刻關(guān)注官方Changelog，表使用摒棄了的方法。點(diǎn)此查看所有廢棄的方法

4.適時(shí)地使用原生JavaScript。一些與此有關(guān)的性能比較

$("#myId"); // 多少還是會(huì)遜色于...
document.getElementById("myId");

REFERENCE

轉(zhuǎn)自：http://www.cnblogs.com/Wayou/p/jquery_best_practise.html

原文：Coding Standards & Best Practices?http://lab.abhinayrathore.com/jquery-standards/

原文的reference

jQuery Performance:?http://learn.jquery.com/performance/?
jQuery Learn:?http://learn.jquery.com?
jQuery API Docs:?http://api.jquery.com/?
jQuery Coding Standards and Best Practice:?http://www.jameswiseman.com/blog/2010/04/20/jquery-standards-and-best-practice/?
jQuery Plugin Boilerplate:?http://stefangabos.ro/jquery/jquery-plugin-boilerplate-revisited/?

欧美中文字幕第一页-欧美中文字幕一区-欧美中文字幕一区二区三区-欧美中文字幕在线-欧美中文字幕在线播放-欧美中文字幕在线视频

jQuery的編碼標(biāo)準(zhǔn)和最佳實(shí)踐 – WEB前端開發(fā)