如何高效使用jquery-js教程-PHP中文網

身為程式設計師你一定會用到 jQuery 和 javascript，那麼如果我們想發展出一個很好的程式那麼如何更有效率的使用 jQuery 和 javascript，來提升你的 jQuery 和 javascript 程式碼呢？好的程式碼會帶來速度的提升，快速渲染和回應意味著更好的使用者體驗。所以本節內容就是為大家帶來 jQuery 和 javascript的高效使用方法。

首先，在腦中牢牢記住 jQuery 就是 javascript。這意味著我們應該採取相同的編碼慣例，風格指南和最佳實踐。

首先，如果你是 javascript 新手，我建議您閱讀《24 JavaScript Best Practices for Beginners》，這是一篇高品質的 javascript 教程，接觸 jQuery 之前最好先閱讀。

當你準備使用jQuery，我強烈建議你遵循下面這些指南:

1. 快取變數

DOM 遍歷是昂貴的，所以盡量將會重複使用的元素快取.

//糟糕h=$(&#39;#element&#39;).height();$(&#39;#element&#39;).css(&#39;height&#39;,h-20);
//建议$element=$(&#39;#element&#39;);h=$element.height();$element.css(&#39;height&#39;,h-20);

登入後複製

2. 避免全域變數

jQuery 與 javascript 一樣，一般來說，最好確保你的變數在函數作用域內。

//糟糕$element=$(&#39;#element&#39;);h=$element.height();$element.css(&#39;height&#39;,h-20);
//建议var $element=$(&#39;#element&#39;);var h=$element.height();$element.css(&#39;height&#39;,h-20);

登入後複製

3. 使用匈牙利命名法

在變數前加 $ 前綴，以便於辨識出 jQuery 物件。

//糟糕
var first=$(&#39;#first&#39;);
var second=$(&#39;#second&#39;);
var value=$first.val();

登入後複製

// 建议 - 在 jQuery 对象前加 $ 前缀    
var $first=$(&#39;#first&#39;);
var $second=$(&#39;#second&#39;),
var value=$first.val();

登入後複製

4. 使用 var 鏈（單 var 模式）

將多條 var 語句合併為一條語句，我建議將未賦值的變數放到後面。

var 
  $first=$(&#39;#first&#39;),
  $second=$(&#39;#second&#39;),
  value=$first.val(),
  k=3,
  cookiestring=&#39;SOMECOOKIESPLEASE&#39;,
  i,
  j,
  myArray={};

登入後複製

5. 請使用 'on'

在新版 jQuery 中，更短的 on("click") 用來取代類似 click() 這樣的函數。在之前的版本中 on() 就是 bind()。自從 jQuery 1.7 版本後，on() 附加事件處理程序的首選方法。然而，出於一致性考慮，你可以簡單的全部使用 on() 方法。

//糟糕$first.click(function(){    $first.css(&#39;border&#39;,&#39;1px solid red&#39;);    $first.css(&#39;color&#39;,&#39;blue&#39;);});
$first.hover(function(){    $first.css(&#39;border&#39;,&#39;1px solid red&#39;);})
// 建议$first.on(&#39;click&#39;,function(){    $first.css(&#39;border&#39;,&#39;1px solid red&#39;);    $first.css(&#39;color&#39;,&#39;blue&#39;);})
$first.on(&#39;hover&#39;,function(){    $first.css(&#39;border&#39;,&#39;1px solid red&#39;);})

登入後複製

6. 精簡 javascript

一般來說，最好盡可能合併函數。

//糟糕$first.click(function(){    $first.css(&#39;border&#39;,&#39;1px solid red&#39;);    $first.css(&#39;color&#39;,&#39;blue&#39;);});
//建议$first.on(&#39;click&#39;,function(){    $first.css({        &#39;border&#39;:&#39;1px solid red&#39;,        &#39;color&#39;:&#39;blue&#39;    });});

登入後複製

7. 鍊式運算

jQuery 實作方法的鍊式運算是非常容易的。下面利用這一點。

//糟糕$second.html(value);$second.on(&#39;click&#39;,function()
{    alert(&#39;hello everybody&#39;);});$second.fadeIn(&#39;slow&#39;);$second.animate({height:&#39;120px&#39;},500);
//建议$second.html(value);$second.on(&#39;click&#39;,function()
{    alert(&#39;hello everybody&#39;);}).fadeIn(&#39;slow&#39;).animate({height:&#39;120px&#39;},500);

登入後複製

8. 維持程式碼的可讀性

伴隨著精簡程式碼和使用鍊式的同時，可能帶來程式碼的難以閱讀。加入縮緊和換行能起到很好的效果。

//糟糕$second.html(value);$second.on(&#39;click&#39;,function()
{    alert(&#39;hello everybody&#39;);}).fadeIn(&#39;slow&#39;).animate({height:&#39;120px&#39;},500);
//建议$second.html(value);$second    .on(&#39;click&#39;,function(){ alert(&#39;hello everybody&#39;);})    .fadeIn(&#39;slow&#39;)    .animate({height:&#39;120px&#39;},500);

登入後複製

9. 選擇短路求值

短路求值是一個從左到右求值的表達式，用&&（邏輯與）或||（邏輯或）操作符。

//糟糕function initVar($myVar) {    if(!$myVar) {        $myVar=$(&#39;#selector&#39;);    }}
//建议function initVar($myVar) {    $myVar=$myVar || $(&#39;#selector&#39;);}

登入後複製

10. 選擇捷徑

精簡程式碼的其中一個方法是利用程式設計捷徑。

//糟糕if(collection.length > 0){..}
//建议if(collection.length){..}

登入後複製

11. 繁重的操作中分離元素

如果你打算對 DOM 元素做大量操作（連續設定多個屬性或 css 樣式），建議先分離元素然後在新增。

//糟糕var     $container=$("#container"),    $containerLi=$("#container li"),    $element=null;
$element=$containerLi.first(); //... 许多复杂的操作
//建议var     $container=$("#container"),    $containerLi=$container.find("li"),    $element=null;
$element=$containerLi.first().detach(); //... 许多复杂的操作
$container.append($element);

登入後複製

12. 熟記技巧

你可能對使用 jQuery 中的方法缺少經驗，一定要查看的文檔，可能會有一個更好或更快的方法來使用它。

//糟糕$(&#39;#id&#39;).data(key,value);
// 建议 (高效)  $.data(&#39;#id&#39;,key,value);

登入後複製

13. 使用子查詢快取的父元素

如如前面所提到的，DOM 遍歷是一項昂貴的操作。典型做法是快取父元素並在選擇子元素時重複使用這些快取元素。

//糟糕var     $container=$(&#39;#container&#39;),    $containerLi=$(&#39;#container li&#39;),    $containerLiSpan=$(&#39;#container li span&#39;);
// 建议 (高效)  var     $container=$(&#39;#container &#39;),    $containerLi=$container.find(&#39;li&#39;),    $containerLiSpan= $containerLi.find(&#39;span&#39;);

登入後複製

14. 避免通用選擇符

將通用選擇子放到後代選擇符中，效能非常糟糕。

//糟糕$(&#39;.container > *&#39;);
//建议$(&#39;.container&#39;).children();

登入後複製

15. 避免隱含通用選擇符

通用選擇符有時是隱式的，不容易發現。

//糟糕$(&#39;.someclass :radio&#39;);
//建议$(&#39;.someclass input:radio&#39;);

登入後複製

16. 最佳化選擇符

例如，id 選擇符應該是唯一的，所以沒有必要添加額外的選擇符。

//糟糕$(&#39;div#myid&#39;); $(&#39;div#footer a.myLink&#39;);
// 建议$(&#39;#myid&#39;);$(&#39;#footer .myLink&#39;);

登入後複製

17. 避免多個ID 選擇符

在此強調，ID 選擇符應該是唯一的，不需要添加額外的選擇符，更不需要多個後代ID 選擇符。

//糟糕$(&#39;#outer #inner&#39;);
//建议$(&#39;#inner&#39;);

登入後複製

18. 堅持最新版本

新版本通常更好：更輕量級，更有效率。顯然，你需要考慮你要支援的程式碼的兼容性。例如，2.0 版本不支援 ie 6/7/8。

19. 摒棄棄用方法

關注每個新版本的廢棄方法是非常重要的並儘量避免使用這些方法。

//糟糕- live 已经废弃   $(&#39;#stuff&#39;).live(&#39;click&#39;,function() {  console.log(&#39;hooray&#39;);});
// 建议$(&#39;#stuff&#39;).on(&#39;click&#39;,function() {  console.log(&#39;hooray&#39;);});
// 注：此处可能不当，应为live能实现实时绑定，delegate或许更合适

登入後複製

20. 利用 CDN

Google的 CND 能保證選擇離用戶最近的快取並迅速回應。（使用GoogleCND請自行搜尋地址，此處地址以不能使用，推薦 jquery 官網提供的 CDN）。

21. 必要時組合 jQuery 和 javascript 原生程式碼

如上所述，jQuery 是 javascript，這意味著用 jQuery 能做的事情，同樣可以用原生程式碼來做。原生程式碼（或 vanilla）的可讀性和可維護性可能不如 jQuery，而且程式碼更長。但也意味著更有效率（通常更接近底層程式碼可讀性越差，效能越高，例如：彙編，當然需要更強大的人才可以）。牢記沒有任何框架能比原生程式碼更小，更輕，更有效率（註：測試連結已失效，可上網搜尋測試程式碼）。

鑑於 vanilla 和 jQuery 之間的效能差異，我強烈建議吸收兩人的精華，使用（可能的話）和 jQuery 等價的原生程式碼。

這篇文章的目的是提高 jQuery 的性能和其他一些好的建議。如果你想深入的研究對這個主題你會發現很多樂趣。記住，jQuery 並非不可或缺，僅是一種選擇。思考為什麼要使用它。 DOM 操作？ ajax？模版？ css 動畫？還是選擇符引擎？或許 javascript 微型框架或 jQuery 的定製版是更好的選擇。

以上就是有效率地使用 jQuery 和 javascript的方法，看完這篇文章，希望對大家的開發有幫助。