Хорошие советы и рекомендации для "упорядочения" вашего Javascript и jQuery

Ответ 1

Очень хороший способ помочь minifiers - передать переменные в функцию self invoking:

(function(window, document, $, undefined) {
      // all of your application logic goes in here
}(window, window.document, jQuery));

A minifier создаст ярлыки для аргументов, например a, b, c, d.

(function(a, b, c, d) {
}(window, window.document, jQuery));

Теперь window, document и jQuery (если он используется) и undefined value доступны довольно часто. Это поможет еще больше уменьшить размер файла.

Несколько ярких ярлыков Javascript описаны в этой статье.

Например, используйте ~~ вместо Math.floor().

var floored = Math.floor(55.2115);  // = 55

Забастовкa >

var floored = ~~(55.2115);  // = 55

Еще одна очень аккуратная вещь: почти все переводчики Javascript конвертируют числа для вас. Например, мы хотим иметь setTimeout, который срабатывает через 3 минуты. Вместо того, чтобы делать это как

setTimeout(function() {
}, 180000);

или 60 * 3 * 1000, мы можем просто вызвать:

setTimeout(function() {
}, 18e4);

Что, вероятно, имеет гораздо больше смысла, на гораздо больших количествах, но в любом случае: -)

Ответ 2

Мне нравится

for(var i = arr.length;i--;)

Он не сохраняет такой код, но имеет два преимущества:

• доступ .length только один раз
• "быстрее", чем традиционный цикл for

Но он работает только в том случае, если порядок обработки массива не имеет значения.

Я думаю, что, наверное, все знают, как установить значения по умолчанию, используя логический OR:

function(must, option) {
    option = option || "defaultValue";
}

Если option не задано, значение undefined равно false. JavaScript возвращает значение переменной, которая выполняет выражение (или значение последнего, если выражения не выполнены, я думаю). Конечно, это зависит от того, какие значения могут иметь значения option, т.е. Это не будет работать, если одно возможное значение false.

Быстрый способ конвертировать числовые строки в числа - это добавить +. Нет необходимости использовать, например. parseInt:

var n = +"123";
// instead of `var n = parseInt("123", 10)`

Ответ 3

Ничего не стоит хлопот - с помощью minification и gzip, сохраняя один символ здесь и два, безусловно, ненужная микрооптимизация. Вы можете сэкономить несколько байт, да, может быть, даже сто или две, но за счет вашего времени разработки, когда вы могли бы сделать что-то потрясающее.

Ответ 4

Я бы просто написал код в понятной для чтения форме, затем использовал закрытие Google или подобное, чтобы оптимизировать и сжать его.

http://code.google.com/closure/

Цитата с сайта Closure:

Компилятор Closure компилирует JavaScript в компактный высокопроизводительный код. компилятор удаляет мертвый код и перезаписывает и сводит к минимуму то, что осталось, чтобы оно загружалось и работает быстро. Он также проверяет синтаксис, ссылки на переменные и типы и предупреждает об общих ошибках JavaScript.

Ответ 5

if (conditional && conditional) {
    doSomething();
}

может стать:

conditional && conditional && doSomething();

Ответ 6

Это замечательная идея. Но я думаю, что более важно, чтобы код был читабельным, понятным и поддерживаемым, чем оптимизированный для размера. Вся уменьшенная версия jQuery 1.5 имеет размер только 85 КБ. Это меньше, чем многие изображения на многих веб-сайтах.

Многие люди пишут код вроде:

$('a#click_me').bind('click', function(){
    $(this).children('img').hide();
    ... etc...
    $(this).parent().addClass('xyz');
});
$('a#click_me').css('width',  '10px');
$('a#click_me').css('height', '10px');

вместо:

$('a#clickme').css({width: '10px', height: '10px'}).click(function(){
    var $this = $(this), href=this.href;
    $('img', this).hide();
    ... etc ...
    $this.parent().addclass('xyz');
});

то есть. используйте карты ({a: b, c: d}), где это возможно (например, в css() выше).

Используйте цепочку $(selector).method1().method2().

Использовать, например. $('img', this), а не $this.children('img');

Не используйте один и тот же селектор, сохраняйте результат в переменной (например, $this).

При необходимости используйте элемент JavaScript, а не jQuery, например,

href = this.href;   rather than   href = $(this).attr('href');