【規範】前端編碼規範——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