Jquery中文網 www.4271936.live
Jquery中文網 >  jQuery  >  jquery 教程  >  正文 jQuery最佳實踐

jQuery最佳實踐

發布時間:2016-09-18   編輯:www.4271936.live
jquery中文網為您提供jQuery最佳實踐等資源,歡迎您收藏本站,我們將為您提供最新的jQuery最佳實踐資源

原文地址:http://lab.abhinayrathore.com/jquery-standards/
第一次翻譯,有不對不妥的地方請拍磚。
jQuery最佳實踐
在寫出更好的JQuery代碼的時候有一些標準和最佳實踐,這些標準不包括JS的標準或最佳實踐,如果有任何疑問,建議或改進,請在我的博客留言。
最后更新時間:芝加哥時間2014。3。17,13:15

加載Jquery
1.使用CDN服務加載jq到你的頁面里

<script type="text/javascript" src="http://ajax.useso.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>
幾個比較流行的CDN服務:
Google: https://developers.google.com/speed/libraries/devguide 
Microsoft: http://www.asp.net/ajaxlibrary/cdn.ashx
jQuery: http://jquery.com/download/
cdnjs: http://cdnjs.com
OSSCdn: http://osscdn.com 

2.準備一個本地的同版本的的JQ。(CDN服務失效的時候檢測window.jQuery是否存在,不存在則加載本地服務器上的文件)
3.使用相對協議加載(如第一條使用//,而不使用http://或https://)
4.如果有可能,始終保持js和jq文件在頁面的最后加載
5.選擇什么版本?
如果你的網站需要支持IE6、7、8,請不要選擇2.X版本。
對于新的應用,如果沒有插件的兼用性問題,還是推薦使用最新的版本。
當從cdn加載jq,始終指定你要加載的完整的版本數。
不要使用多個版本
6.如果使用了其他比如Prototype, MooTools, Zepto etc. 等也使用$的庫,試著不要用$調用jquery的函數,用 jQuery代替,可以使用$.noConflict()方法把$的控制權交給其他的庫。
7.對于先進的瀏覽器特性,使用Modernizr.

**JQuer變量 **
1.使用$前綴緩存JQ的對象
2.緩存JQ選擇器返回的對象達到重用的目的
3.使用駝峰式命名變量

選擇器
1.盡可能的使用ID選擇器,因為它是通過 document.getElementById()處理的。
2.當使用class選擇器的時候不(需)要使用元素類型

var $products = $("div.products"); // SLOW
var $products = $(".products"); // FAST 

3.對于ID->child這種嵌套結構,使用find()方法,因為它不通過Sizzle選擇器引擎處理。

// 糟糕的,一個使用Sizzle引擎的嵌套選擇 
$productIds = $("#products div.id");
//好的,#products已經通過 document.getElementById()選擇,所以只有div.id需要通過Sizzle引擎選擇一下就可以了
$productIds = $("#products").find("div.id");         

4.選擇器右側的內容要盡量詳細,左側則不需要

// 糟糕的
$("div.data .gonzalez");
//好的
$(".data td.gonzalez");

5.避免過度的描述

// 糟糕的
$(".data table.attendees td.gonzalez");
// 好的,盡可能的去掉中間的不必要的部分 
$(".data td.gonzalez");     

6.給選擇器指定上下文

$('.class');//慢的,需要遍歷整個dom去查找.class
$('.class', '#class-container');//快的,因為它僅在class-container元素下查找

7.不使用全局選擇器(*)

$('div.container > *'); // 糟糕的
$('div.container').children(); // 好的 

8.避免隱式的使用*
9.不要嵌套ID,因為它通過document.getElementById()查找,不需要也不應該跟其他的選擇器混在一起。

DOM操作
1.在操作前始終把存在的元素分離出來并且在操作后恢復它。

var $myList = $("#list-container > ul").detach();
//很多復雜的東西在$myList
$myList.appendTo("#list-container");

2.使用字符串或者array.join()而不是.append()
性能對照:http://jsperf.com/jquery-append-vs-string-concat

// 糟糕的
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.不要操作不存在的元素,

// 糟糕的,在這個操作實現之前先運行了3個方法
$("#nosuchthing").slideUp();
// GOOD
var $mySelection = $("#nosuchthing");
if ($mySelection.length) {
    $mySelection.slideUp();
}

事件
1.每個頁面僅使用一個Document Ready handler,方便快速的調試和跟蹤
2.不要使用匿名方法,調試,維護,測試或重用很困難。

$("#myLink").on("click", function(){...}); // BAD
// GOOD
function myLinkClickHandler(){...}
$("#myLink").on("click", myLinkClickHandler);
  1. Document ready事件處理器不應該作為一個匿名方法,再說一次,匿名方法不利于調試和跟蹤。
$(function(){ ... }); // BAD: 你永遠無法重用或者測試這個方法
// GOOD
$(initPage); // or $(document).ready(initPage);
function initPage(){
    // 頁面初始化和調用其他函數的處理器 
}    
  1. Document ready處理器應該從外部文件加載并且內聯的腳本可以用來初始化處理器和設置
<script src="my-document-ready.js"></script>
<script>
     // 這里可以定義需要的變量
     $(document).ready(initPage); // or $(initPage);
</script>

5.不要在HTML內使用行為標記(內聯腳本),這些是調試的噩夢,始終使用JQuery綁定事件保持一致性,這樣也容易添加或移除事件。

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

6.如果可能,對于事件使用自定義的命名空間,這樣更容易移除指定的事件

AJAX
1.避免使用.getJson() 或 .get(),而是直接使用$.ajax()方法
2.不要使用http或https請求,寧愿選擇無模式的URLs,從url中去掉http或https
3.不要在url中加參數,用data對象傳遞它們。

// Less readable...
$.ajax({
    url: "something.php?param1=test1&param2=test2",
    ....
});
// More readable...
$.ajax({
    url: "something.php",
    data: { param1: test1, param2: test2 }
});

4.指定數據格式,它能更快速的知道你正在使用哪種數據。(Ajax Template example部分)
5.Ajax加載的內容使用委派的事件處理程序,委派事件的優點是可以處理后加載到文檔里的事件。

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

6.使用promise接口

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

7.一個簡單完整的ajax模板

var jqxhr = $.ajax({
    url: url,
    type: "GET", // 默認是GET,可以換成你需要的方式
    cache: true, // 默認是true,但是對于dataType 
為'script' 和 'jsonp'類型默認是false,所以按需調整。
    data: {}, // 把需要提交的參數寫在這里
    dataType: "json", // 指定數據類型
    jsonp: "callback", // only specify this to match the name of callback parameter your API is expecting for JSONP requests.
    statusCode: { // 如果想處理具體的錯誤代碼,使用的狀態代碼映射設置
        404: handler404,
        500: handler500
    }
});
jqxhr.done(successHandler);
jqxhr.fail(failureHandler);

效果和動畫
1. 采取嚴謹和一致的方法來實現動畫功能。
2. 直到被UX需求驅動否則不要過度做動畫效果。
嘗試使用簡單的show/hide, toggle and slideUp/slideDown功能切換元素。
使用預定的參數”slow”, “fast” 或者400 (中等速度).

插件
1.始終使用有良好支持,文檔,測試和社區支持的插件
2.檢查插件與你所使用的jQuery版本是否兼容
3.任何常見的可重用組件應該實現為一個jQuery插件,點擊這里查看jQuery插件樣板代碼。

鏈式操作
1.使用鏈式操作代替變量緩存和多次操作
2.每當鏈長超過3個鏈接或得到,因為活動任務的復雜,使用適當的換行和縮進使代碼的可讀性。

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

3.對于較長的鏈式操作可以把對象緩存到一個變量里。

雜項
1.為參數使用對象字面量。

$myLink.attr("href", "#").attr("title", "my link").attr("rel", "external"); // BAD, 3 calls to attr()
// GOOD, only 1 call to attr()
$myLink.attr({
    href: "#",
    title: "my link",
    rel: "external"
});

2.不要混合使用CSS與jQuery。

$("#mydiv").css({'color':red, 'font-weight':'bold'}); // BAD
.error { color: red; font-weight: bold; } /* GOOD */
$("#mydiv").addClass("error"); // GOOD

3.不要使用過時的方法,始終要注意新版本中一些摒棄的方法并且試著不要使用它們,點擊這里查看過時方法的列表
4.必要時結合使用jQuery的原生JavaScript。參見下面給出的例子的性能差異:http://jsperf.com/document-getelementbyid-vs-jquery/3

$("#myId"); // 它始終比下邊的慢一點
document.getElementById("myId");

資源
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的自定義事件代碼,觸發,綁定簡單實例
寫出高效jquery代碼的19條指南
關于jquery性能最佳實踐的討論,與求教
jquery如何根據值設置默認的選中項
Jquery 在頁面加載后執行的幾種方式
使用jquery實現IE下按backspace相當于返回操作
jquery禁用右鍵單擊功能屏蔽F5刷新
jquery高級編程的最佳實踐詳解
JQuery最佳實踐之精妙的自定義事件
jquery判斷小數點兩位和自動刪除小數兩位后的數字

[關閉]
微信下载APP完成任务如何赚钱 贵州11选五奖金有多少 安徽十一选五开奖图表 四川快乐十二开奖结果手机版 江苏十一选五走势图 全天免费北京pk拾计划 黑龙江福彩22选5 如何玩广东快乐十分 秒速飞艇计算公式 河南快三新玩法介绍计划 080博彩通