【規范】前端編碼規范——jquery 規范

使用單引號

不推薦

$("div").html("<img src='1.jpg'>");

推薦

$('div').html('<img src="1.jpg">');

緩存變量

DOM 遍歷是昂貴的，所以盡量將會重用的元素緩存。

不推薦

var h = $('#element').height();
$('#element').css('height', h - 20);

推薦

var $element = $('#element'),
    h = $element.height();
$element.css('height', h - 20);

避免全局變量

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

不推薦

$element = $('#element');
h = $element.height();
$element.css('height',h - 20);

推薦

var $element = $('#element'),
    h = $element.height();
$element.css('height',h - 20);

使用駝峰式命名

使用駝峰式命名，在前面添加 $ 作為前綴，以便於標示為 jquery 對象。

不推薦

var first = $('#first'),
    second = $('#second'),
    value = $first.val();

推薦

var $first = $('#first'),
    $second = $('#second'),
    value = $first.val();

使用單 var 模式

將多條 var 語句合並為一條語句，建議將未賦值的變量放到后面。

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

使用 on 來處理事件

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

不推薦

$first.click(function(){
    $first.css('border', '1px solid red');
    $first.css('color', 'blue');
});
$first.hover(function(){
    $first.css('border', '1px solid red');
});

推薦

$first.on('click', function(){
    $first.css('border', '1px solid red');
    $first.css('color', 'blue');
});
$first.on('hover', function(){
    $first.css('border', '1px solid red');
});

精簡 jquery

一般來說，最好盡可能合並屬性。

不推薦

$first.click(function(){
    $first.css('border', '1px solid red');
    $first.css('color', 'blue');
});

推薦

$first.on('click', function(){
    $first.css({
        'border':'1px solid red',
        'color':'blue'
    });
});

鏈式操作

jquery 能夠很輕易的實現鏈式操作。

不推薦

$second.html(value);
$second.on('click', function(){
    alert('hello everybody');
});
$second.fadeIn('slow');
$second.animate({height: '120px'}, 500);

推薦

$second.html(value).on('click', function(){
    alert('hello everybody');
}).fadeIn('slow').animate({height: '120px'}, 500);

維持代碼的可讀性

伴隨着精簡代碼和使用鏈式的同時，可能帶來代碼的難以閱讀。添加縮進和換行能起到很好的效果。

不推薦

$second.html(value).on('click', function(){
    alert('hello everybody');
}).fadeIn('slow').animate({height: '120px'}, 500);

推薦

$second.html(value)
    .on('click', function() {
        alert('hello everybody');
    })
    .fadeIn('slow')
    .animate({
        height: '120px'
    }, 500);

選擇短路求值

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

不推薦

function initVar($myVar) {
    if (!$myVar) {
        $myVar = $('#selector');
    }
}

推薦

function initVar($myVar) {
    $myVar = $myVar || $('#selector');
}

避免通用選擇符

不推薦

$('.container > *');

推薦

$('.container').children();

緩存父元素

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

不推薦

var $container = $('#container'),
    $containerLi = $('#container li'),
    $containerLiSpan = $('#container li span');

推薦

var $container = $('#container '),
    $containerLi = $container.find('li'),
    $containerLiSpan= $containerLi.find('span');

避免隱式通用選擇符

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

不推薦

$(':button');

推薦

$('input:button');

優化選擇符

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

不推薦

$('div#myid');
$('div#footer a.myLink');

推薦

$('#myid');
$('#footer .myLink');

避免多個 id 選擇符

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

不推薦

$('#outer #inner');

推薦

$('#inner');

熟記技巧

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

不推薦

$('#id').data(key, value);

推薦

$.data('#id', key, value);

堅持最新版本

新版本通常更好：更輕量級，更高效。當然你需要考慮你要支持的代碼的兼容性。例如，2.0 版本不支持 ie 6/7/8。

摒棄棄用方法

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

不推薦

$('#stuff').live('click', function() {
    console.log('hooray');
});

推薦

$('#stuff').on('click', function() {
    console.log('hooray');
});

利用 CDN

CDN 能保證選擇離用戶最近的緩存並迅速響應。（推薦 jquery 官網提供的 CDN）。

必要時組合 jquery 和 javascript 原生代碼

如上所述，jquery 就是 javascript，這意味着用 jquery 能做的事情，同樣可以用原生代碼來做。原生代碼的可讀性和可維護性可能不如 jquery，而且代碼更長。但也意味着更高效（通常更接近底層代碼可讀性越差，性能越高）。牢記沒有任何框架能比原生代碼更小，更輕，更高效。

參考文獻

• http://www.css88.com/archives/5240