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

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

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

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

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

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

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

// длинная запись
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!';

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

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