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的好習慣:)
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的好習慣:)
留言
張貼留言