JavaScript-хаки для хипстеров
Писать код на JavaScript — в основном чистая радость, за исключением тех моментов, когда это не так.
Все время, пока мы пишем код, нас не покидает страх об ошибках во время исполнения кода в браузере. Конечно, это заставляет нас расти, как программистов. И, в общем-то, у нас нет других вариантов, кроме как мысленно представить себе, как будет исполняться та или иная строчка кода, пока мы пишем код.
Вот почему настолько важно, чтобы код был аккуратным, компактным и красивым. Таким, чтобы вы могли в него влюбиться. Иначе JavaScript отпугнет вас раз и навсегда.
Я собрал несколько забавных сниппетов и приемов, которые я использую вместо скучного, многословного кода. Некоторые из них делают ваш код более читаемым, компактным, чистым. Другие — просто отлично помогают в отладке приложения.
Все эти сниппеты я нашел в открытых источниках (до выхода Node.js
весь код
JavaScript так или иначе был открытым), но я опубликую их тут так, как будто я
сам все это придумал.
Хипстер-хак №1 - вызов метода
Меня действительно бесят конструкции if/else, и я нашел довольно полезный шаблон, который вызывает нужную функцию в зависимости от булевой переменной.
// Тоска
if (success) {
obj.start();
} else {
obj.stop();
}
// По-хипстерски
var method = (success ? 'start' : 'stop');
obj[method]();
Хипстер-хак №2 - склеивание строк
Хорошо известно, что строки притягиваются друг к другу. Рано или поздно вам
придется соединить их вместе. Я совершенно не люблю склеивать их через +
, в
этой ситуации меня выручает метод join()
.
['имя', 'фамилия'].join(' '); // = 'имя фамилия';
['молоко', 'кофе', 'сахар'].join(', '); // = 'молоко, кофе, сахар'
Хипстер-хак №3 - оператор по умолчанию ||
По умолчанию в JavaScript совершенно неизвестно, что находится внутри того или
иного объекта. Мы можем получить объект как аргумент функции, можем прочитать
его из сети или из конфигурационного файла. В этом случае, удобно использовать
оператор ||
и альтернативный аргумент, если первый аргумент ложен.
// Переменная примет значение 'Без имени', если
// myName пустая (или null, или undefined)
var name = myName || 'Без имени';
// проверим, что у нас есть объект options
var doStuff = function(options) {
options = options || {};
// ...
};
Хипстер-хак №4 - оператор проверки на существование &&
Еще один очень полезный прием, схожий с оператором по умолчанию ||.
Позволяет сократить использование оператора if
, отчего код станет
гораздо проще для восприятия.
// Скучно
if (isThisAwesome) {
alert('yes'); // не исполнится
}
// Круто!
isThisAwesome && alert('yes');
// Более безопасный вариант
var aCoolFunction = undefined;
aCoolFunction && aCoolFunction(); // не запустится и не обрушит ваш код
Хипстер-хак №5 - заглушка XXX
Мой личный патентованный способ, который вы также можете использовать в своей
работе. Если я пишу код, и в это время мне необходимо свериться с отображением
приложения в браузере, или поправить другую часть приложения, я добавляю в код
строчку вида xxx
.
Естественно, при первом же запуске код сломается, и я могу быстро вернуться
к этому месту и все починить. Эту заглушку гораздо проще искать в коде, обычно
никто, кроме меня, не использует xxx
. Помимо прочего, это прием избавляет
меня от написания развернутых комментариев к TODO.
var z = 15;
doSomeMath(z, 10);
xxx // Отличная заглушка. Только я использую xxx,
// эту строчку проще найти, чем TODO
doSomeMoreMath(z, 15);
Хипстер-хак №6 - замерить время
Вы никогда не задумывались, что быстрее — цикл через i++
или i--
?
Я, честно говоря, не думал об этом. А тем, кому есть до этого хоть какое-то
дело, я бы посоветовал использовать внутренние методы консоли для скорости.
Эти методы позволяют находить медленные циклы или другой код, который
блокирует цикл выполнения событий.
var a = [1,2,3,4,5,6,7,8,9,10];
console.time('testing_forward');
for (var i = 0; i < a.length; i++);
console.timeEnd('testing_forward');
// output: testing_forward: 0.041ms
console.time('testing_backwards');
for (var i = a.length - 1; i >= 0; i--);
console.timeEnd('testing_backwards');
// output: testing_backwards: 0.030ms
Хипстер-хак №7 - отладка
Этот прием я узнал от знакомого мне разработчика на Java. Понятия не имею, как
вышло так, что он его знал, а я нет, но с тех пор я использую этот прием.
Просто напишите в коде debugger
.
var x = 1;
debugger; // Всё, код перестает исполняться, удачной отладки
x++;
var x = Math.random(2);
if (x > 0.5) {
debugger; // Условная точка прерывания
}
x--;
Хипстер-хак №8 - олдскульная отладка
Мне, как разработчику, всегда было комфортнее использовать printf
-отладку, а
не отлаживать код построчно. Если вы разделяете мои пристрастия, то вам нужно
будет предварительно «вытащить» внутренние переменные в глобальное
пространство имен, для того, чтобы время от времени их просматривать. Не
забудьте убрать эти данные перед тем, как делать коммит в систему контроля
версий или выкладывать ваше приложение в продакшн.
var deeplyNestedFunction = function() {
var private_object = {
year: '2013'
};
// Глобальный объект для отладки
pub = private_object;
};
// Теперь его можно вызывать из консоли
pub.year;
Хипстер-хак №9 - сверхлегкие шаблоны
Как, вы еще занимаетесь конкатенацией строк через оператор +
? Ведь есть
способ, который гораздо лучше подходит для добавления ваших данных в строку.
Он называется шаблонизацией, вот мини-фреймворк для этого способа, размером
буквально в 2,5 строчки кода.
var firstName = 'Таль';
var screenName = 'ketacode'
// Чудовищно
'Привет, меня зовут ' + firstName + ', а мой твиттер — @' + screenName;
// Отлично
var template = 'Привет, меня зовут {first-name}, а мой твиттер - @{screen-name}';
var txt = template.replace('{first-name}', firstName)
.replace('{screen-name}', screenName);
Как, вы все это уже знали?
Даже мой патентованный оператор XXX
?! Ну что ж, готов признать, вы настоящий
хипстер от JavaScript, давайте поговорим об этом в твиттере.