首頁 > JQuery > 10大撰寫jQuery技巧

10大撰寫jQuery技巧

2011年11月2日     發表評論 閱讀評論
如果這篇文章有幫助到,請大方的給個讚+1!


Jquery,這一套神奇好用的JavaScript框架,不會用則以,會用的時候一整個愛不釋手,寫Jquery的時候有些方法要注意,可以增加不少的效能,這是一篇蠻久的文章,自己做一下備份,也提醒一下自己在寫程式的時候要特別注意一下嚕!

1.Be Lazy(懶一點)

能不寫太多就不要寫太多

// Don’t
if ($(‘#item’).get(0)) {
$(‘#item’).someFunction();
}

// Or
if ($(‘#item’).length) {
$(‘#item’).someFunction();
}

// Just do
$(‘#item’).someFunction();

 

2.Use shortcuts(使用捷徑)

Jquery有很多捷徑可以使用,以下就是一個例子

// You can but..
$(document).ready(function(){
// …
});

// There is a shorter equivalent
$(function(){
// …
});

3.Chain(鍊結)

同一個物件不要重覆呼叫,一值連下去就對了!

// Don’t
$(‘#frame’).fadeIn();
$(‘#frame .title’).show();
$(‘#frame a:visited’).hide();

// Do
$(‘#frame’).fadeIn()
.find(‘.title’).show().end()
.find(‘a:visited’).hide();

4. Group queries(任務編組)

同樣的事情一起做會比較快!

// Ugly
$(‘div.close’).click(closeCallback);
$(‘button.close’).click(closeCallback);
$(‘input.close’).click(closeCallback);

// Not ugly
$(‘div.close, button.close, input.close’)
.click(closeCallback);

 

5. Select siblings like a pro(用Pro的作法處理相鄰元素)

就是要你寫得好看一點

// Don’t
$(‘#nav li’).click(function(){
$(‘#nav li’).removeClass(‘active’);
$(this).addClass(‘active’);
});

// Do
$(‘#nav li’).click(function(){
$(this).addClass(‘active’)
.siblings().removeClass(‘active’);
});

6. Use each and map(使用each和map)

用each代替for迴圈

// Try to avoid
var output = [];
for (var i=0;i < arr.length; i++) {
output.push(arr[i]);
}

// Do
var output = $.map(arr, function() {

});

// Or
var output = [];
$.each(arr, function(index, value) {
output.push(value);
});

7. Use namespaces(使用名稱空間)

Events can be namespaced

$(‘input’).bind(‘blur.validation’, function(e){
// …
});

The data method also accept namespaces
$(‘input’).data(‘validation.isValid’, true);

8. triggerHandler is great(triggerHandler盡量用)

事件榜事件,就是要一起做!

Instead of
var refreshFrame = function() {
$(‘#frame’).load(‘http://reddit.com’);
};

$(‘.button’).click(refreshFrame);

You can do
$(‘.button’).click(function() {
$(‘#frame’).load(‘/page/frame.html’);
}).triggerHandler(‘click’);

// You can also use a shortcut
$(‘.button’).click(function() {
$(‘#frame’).load(‘/page/frame.html’);
}).click();

9. Custom events(客製化事件)

將事件客制化的分開寫入plug-in中

$(‘.button’).click(function() {
$(‘div#frame’).load(‘/page/frame.html’, function(){
$(this).triggerHandler(‘frameLoaded’);
});
});

// PluginA.js
$(‘#frame’).bind(‘frameLoaded’, function(){
$(this).show(‘slide’, {direction: ‘top’});
});

// PluginB.js
$(‘div’).bind(‘frameLoaded’, function(){
// do something else
});

 

10. Test !(測試)

導入測試框架QUnit

module(“A simple test");

test(“The frame should appear #button is clicked", function() {
expect(1);
$(‘#button’).click();
ok($(‘#frame’).is(‘:visible’), “The frame is visible" );
});

 

以上就是前人的經驗,趕快把他學起來,要不頁面的事件(events)一多起來真的是蠻LAG的,至於有多大的效果,有機會大家再來測試看看吧

資料引用於:http://haineault.com/blog/84/


如果文章有幫助到您,請不吝的給本站贊助,任何的鼓勵都是分享的動力!

Categories: JQuery Tags: ,
  1. 目前尚無任何的評論。
  1. 目前尚無任何 trackbacks 和 pingbacks。