jQuery 使用技巧及常注意問題

jQuery這項技能在面試的時候,已經從"加分"變成"必備",由此可知,如果想走web開發,jQuery已經是不可或缺的技術,但jQuery雖然好上手,網路上的教學資源也很多,但有幾件事情是在使用jQuery你一定要知道的
1.使用Google CDN-hosted並且保持最新版本

使用Google CDN的好處是,有許多網站都有使用CDN,所以訪客在拜訪你的網站之前,可能已經先下載過jQuery,之後拜訪你的網站就可以直接從快取中使用,而不用重新下載,增加網站讀取速度,至於保持jQuery最新的版本,除了可以修復一些bug,還可以增加performance

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

有些人可能會發現,為什麼少了http:,原因是假如網站遊走在http和https之間,使用這種忽略 scheme 的部分,就可以避免因為開啟了https的網頁,但jQuery是http所產生的安全性問題
2.在開發時搭配Cheat Sheet

其實不只是初學者,對於資深的開發者也建議使用cheat sheets,可以方便直接查詢,也省去google的麻煩

http://oscarotero.com/jquery/

http://www.javascripttoolbox.com/jquery/cheatsheet/

http://devcheatsheet.com/tag/jquery/
3.不能單純只使用CDN

剛剛第一點講到建議使用Google CDN,但有一點必須要注意的是,CDN有時候會有失效的問題,像某些地區會連不到Google CDN,這時候就要有locally的jQuery可以備用,判別的JavaScript語法可以這樣寫

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery-1.8.1.min.js"><\/script>')</script>

這段程式碼會在抓不到Google CDN時,去抓取自家主機上的jQuery,讓網站不至於因為這樣而掛掉
4.重複使用jQuery selector

為了優化jQuery,千萬不要這樣寫

$("#mySmashingID").css("color", "pink");
$("#mySmashingID").css("font", "Verdana");
$("#mySmashingID").text("Some error message goes here!");

假如要針對同個selectors做操作,不應該重複呼叫自己,而是要利用jQuery鏈結的特性串起來

$("#mySmashingID").css({ "color": "pink", "font": "Verdana"}).text("Some error message goes here!!");

5.將重複使用的selector宣告一個變數存起來

假如你會針對一個selector在很多地方使用到

$(‘#mySmashingGag’).appendTo(‘#mysidebar’);
$(‘#mySmashingGag’).addClass(‘widget’);
$(‘#mySmashingGag’).hide();
$(‘#mySmashingGag’).fadeIn(‘fast’);

你應該將他存入一個變數,並且使用變數來操作,這樣也可以增加效能,而不會一直去做selector

var mySmashingGag = $(‘#mySmashingGag’);
mySmashingGag.appendTo(‘#mysidebar’);
mySmashingGag.addClass(‘widget’);
mySmashingGag.hide();
mySmashingGag.fadeIn(‘fast’);

6.使用ID而不要使用class

jQuery骨子裡其實還是JavaScript,所以不管如何速度再快也比不上原生的JavaScript快,所以如果使用ID來選取元素的話,就會使用JavaScript的原生方法 getElementByID,效能就會比較快,相反的不是使用原生方法的class效能就會比較慢

不要使用class

// Selecting each item at once
for (i = 0; i < 900; i++) {
    var selectedItem = $('.mySmashingItem' + i);
}

使用ID

// Selecting each item at once
for (i = 0; i < 900; i++) {
    var selectedItem = $('#mySmashingItem' + i);
}

7.使用縮寫

正常來說會這樣寫

$(document).ready(function (){
    // your awesome code here
});

但其實可以這樣寫

$(function (){
    // your awesome code here
});

8.使用context

當你再使用選取器(selectors)的時候,jQuery會針對整個頁面去做搜索直到找到為止,可是其實我們可以縮小範圍

例如原本的寫法

$(‘.mySmashingGag’).on(‘click’, showMenu);

但我們可以這樣寫

$(‘.mySmashingGag’, ‘#mySidebar’).on(‘click’, showMenu);

這樣他就會在ID為mySidebar去搜尋class為mySmashingGag的元素

這些其實不難,但都是養成正確寫jQuery的好習慣:)

留言

這個網誌中的熱門文章

c語言-關於#define用法

PHP教學 - 資料型態(Data Type) - 上

CMD常用網管指令