Способы сокращения JavaScript кода

Octane, 19.08.2008

Продолжая предыдущую статью, о том, «как короче записывать PHP-код», хочу показать Вам несколько похожих приемов, но на языке JavaScript.

Используем сокращенную форму записи создания объектов типа «Object» и «Array»

// Создаем Object:
var obj = new Object();
// сокращенная запись:
var obj = {};

// Создаем Array:
var obj = new Array();
// сокращенная запись:
var obj = [];

Используем возможности логических операции JavaScript по-максимуму

JavaScript предоставляет очень широкие возможности работы с логическими выражениями. Например, «логическое сложение» можно выполнить с любыми объектами, в результате будет возвращен первый найденный элемент:

// длинная запись
function $tag(tag, node) {
  var list = [];
  if(node) {
    list = node.getElementsByTagName(tag);
  }
  else {
    list = document.getElementsByTagName(tag);
  }
  return list;
}

// запись короче
function $tag(tag, node) {
  if(!node) node = document;
  return node.getElementsByTagName(tag);
}

// еще короче
function $tag(tag, node) {
  return (node || document).getElementsByTagName(tag);
}

Вариант с «логическим сложением» не единственный, внимательно прочтите раздел «Логические выражения» в Вашей книге по JavaScript и особое внимание уделите тому, что является результатом выполнения логического выражения, т. к. в JavaScript они могут возвращать не только «true» или «false».

В операциях присваивания очень удобно использовать «тернарный оператор»:

var a;
if(b < c) a = b;
else a = c;

//тоже самое
var a = b < c ? b : c;

Используем «Object» вместо «switch»

Конечно, полностью заменить функционал «switch» использованием «Object» не получится, но в большинстве случаев требуется всего лишь выбор действия по ключу:

function showMessage(type) {
  var msg;
  switch(type) {
    case 'error': msg = 'Error!'; break;
    case 'warning': msg = 'Warning!'; break;
    case 'notify': msg = 'All ready!'; break;
    case 'confirm': msg = 'Are you ready?'; break;
    default: msg = 'Nothing...';
  }
  alert(msg);
}

showMessage('warning');

Меня сильно раздражает в этой записи необходимость постоянно повторять «case … break;». Давайте перепишем этот код, используя «Object»:

var messages = {
  error: 'Error!',
  warning: 'Warning!',
  notify: 'All ready!',
  confirm: 'Are you ready?',
  show: function(type) {
    alert(this[type] || 'Nothing...');
  }
};

messages.show('notify');

Как видим, код немного сократился, а самое главное исчезли все эти «case … break;» и инициализация переменной «msg». А если в проекте бы было 100 типов сообщений, при использовании первого способа пришлось бы 100 раз написать «case … break;»…

Самая короткая запись кода только для IE

Чтобы выполнить код только для IE совсем не обязательно делать громоздкие условия, с поиском подстроки «MSIE» в строке «navigator.userAgent» или проверять наличие «window.ActiveXObject».

if(navigator.userAgent.search('MSIE') != -1) {
	alert('This is Internet Explorer!');
}

Достаточно всего лишь заключить этот код в специальные комментарии (Conditional Compilation), которые понимает только IE:

//@cc_on	alert('This is Internet Explorer!');

Подробнее про «Conditional Compilation» можно прочитать в моей статье «<abbr> и <q> в Internet Explorer».

Используем правила обращения к методам и атрибутам объекта

Для работы с атрибутами узла DOM можно использовать стандартные правила обращения к методам и атрибутам объекта JavaScript:

node.setAttribute('title', 'Hello!');
// тоже самое
node.title = 'Hello!';
// или 
node['title'] = 'Hello!';

Более того, такой способ часто оказывается единственным кросс-браузерным решением.

Продолжение будет…

Подписаться на обновления блога

Вам понравился наш блог, хотите следить за обновлениями? Подпишитесь на RSS рассылку или рассылку по электронной почте. Так же вы можете следить за нами в Twitter.

Категории: JavaScript | Комментировать

Комментарии (11)

  1. Splurov / 20.08.2008 в 21:21

    Вы не совсем правы на счёт последнего пункта: xpoint.ru/know-how/JavaScript/Atributyi.

  2. Octane / 20.08.2008 в 23:11

    В чем же я не прав, там как раз и говорится о том, что удобнее и проще использовать правила доступа к атрибутам и методам объекта JavaScript, чем DOM-методы «setAttribute» и «getAttribute». И проводится пример с атрибутом «className», который даже в MSDN рекомендуют изменять, как свойство объекта.

  3. Splurov / 21.08.2008 в 07:19

    Octane, в том, что это «тоже самое». И там есть пример иллюстрирующий это.

    P.S. Было-бы очень хорошо иметь возможность подписаться на комментарии по почте.

  4. Octane / 21.08.2008 в 12:01

    А ну да, в этом согласен, атрибут и свойство разные вещи, под «тоже самое» имел ввиду, что будет тот же эффект. Хотя у этого способа есть и недостаток, например, чтобы удалить событие, назначенное по «onclick», нужно присвоить ему значение «null», а вот чтобы сбросить значение «className», надо присвоить пустую строку. Об этом надо помнить…

    Подписку на комментарии по e-mail обязательно добавлю, еще не успел этого сделать, блог совсем новый :-)

  5. Дон Кихот / 18.09.2008 в 02:28

    Рискну предложить еще несколько методов.
    Можно еще логические выражения сокращать, т.к. вместо false/true можно использовать 0/1. Например:

    var elem = 1; // 1 вместо false
    if (elem) {
    // делаем чего-то
    }

    Далее, несколько извращенных методов :)
    Объявление переменных в цепочки:

    var a, b, c = a + b, someVar = ( a + someFunc(b));

    Использование возвращаемых значений операндов:

    pHeight = Math.floor((pWidth = wScr - dx - padding) * dim_pic);

    Тут присваивается pWidth и одновременно передается в floor.
    Конечно, такими методами много не сэкономишь, но все же )))

  6. Octane / 18.09.2008 в 20:40

    Дон Кихот, спасибо, действительно полезные советы.

    Далее, несколько извращенных методов :)
    Объявление переменных в цепочки:

    Объявление переменных через запятую — нисколько не извращение, так гораздо удобнее и короче, не понимаю зачем многие пишут «var» для каждой переменной.
    Использование возвращаемых значений операндов приходилось на практике применять только один раз, для организации кэширования функции «getElementById»:

    function $(arg) {
    	return typeof arg == 'string' ? this.cache[arg] || (this.cache[arg] = document.getElementById(arg)) : arg;
    }
    
    $.cache = {};

    Но всеравно полезный пример :-)

  7. real / 28.01.2009 в 21:09

    оо прикольно, часто пользуюсь яваскриптом, пригодится)

  8. Дмитрий / 04.05.2009 в 03:12

    У вас тут просто изумительный дизайн.
    Приятно было зайти.

  9. Доска объявлений / 02.11.2009 в 00:01

    Даже не задумывался об оптимизации. Будем пробовать :)

  10. idesign / 14.11.2009 в 21:25

    Даже никогда и не знал что можно сократить код Java и объявлять например массив просто квадратными скобками…Я использую AJAX в некоторых сайтах и кода очень много, спасибо теперь займусь оптимизацией

  11. вася / 27.01.2012 в 00:08

    ещё иногда бывает удобно использовать эээ.. короткую запись функций
    было:

    function myNewMegaFunc(a,b){
    return a+b;
    }
    myNewMegaFunc(3,4);

    стало:

    (function myNewMegaFunc(a,b){ return a+b })(3,4);

    Ну это конечно все знают :) но пусть будет для копилки знаний для новяков.

Оставить комментарий

480×60
480×60