В качестве продолжения «30 лучших практик HTML и CSS» на этой неделе мы рассмотрим JavaScript! После того, как вы просмотрели список, обязательно сообщите нам, с какими маленькими советами вы столкнулись!
И если вам нужна помощь с исправлениями ошибок JavaScript, настройкой или чем-то еще, обязательно ознакомьтесь с ассортиментом JavaScript-услуг, предлагаемых в Envato Studio.
1. Используйте === вместо ==
JavaScript использует два разных типа операторов равенства: === | ! == и == | ! = Рекомендуется всегда использовать первый набор при сравнении.
«Если два операнда имеют одинаковый тип и значение, то === выдает истину, а! == — ложь». — JavaScript: хорошие части
Однако при работе с == и ! = Вы столкнетесь с проблемами при работе с разными типами. В этих случаях они попытаются привести значения безуспешно.
2. Eval = Bad
Для тех, кто незнаком, функция «eval» дает нам доступ к компилятору JavaScript. По сути, мы можем выполнить результат строки, передав его в качестве параметра «eval».
Это не только существенно снизит производительность вашего скрипта, но также представляет огромный риск для безопасности, поскольку дает слишком много власти передаваемому тексту. Избегай это!
3. Не используйте короткие руки
Технически, вы можете избежать использования большинства фигурных скобок и точек с запятой. Большинство браузеров правильно интерпретируют следующее:
|
1
2
|
if(someVariableExists)
x = false
|
Однако учтите это:
|
1
2
3
|
if(someVariableExists)
x = false
anotherFunctionCall();
|
Можно подумать, что приведенный выше код будет эквивалентен:
|
1
2
3
4
|
if(someVariableExists) {
x = false;
anotherFunctionCall();
}
|
К сожалению, он был бы неправ. На самом деле это означает:
|
1
2
3
4
|
if(someVariableExists) {
x = false;
}
anotherFunctionCall();
|
Как вы заметите, отступ имитирует функциональность фигурной скобки. Излишне говорить, что это ужасная практика, которую следует избегать любой ценой. Единственный раз, когда фигурные скобки должны быть опущены, это однострочники, и даже это очень обсуждаемая тема.
|
1
|
if(2 + 2 === 4) return ‘nicely done’;
|
Всегда думай о будущем
Что делать, если позже вам нужно добавить больше команд к этому оператору if. Для этого вам необходимо переписать этот блок кода. Итог — действуйте осторожно при опускании.
4. Используйте JS Lint
JSLint — это отладчик, написанный Дугласом Крокфордом. Просто вставьте ваш скрипт, и он быстро отыщет любые заметные проблемы и ошибки в вашем коде.
«JSLint берет исходный код JavaScript и сканирует его. Если он обнаруживает проблему, он возвращает сообщение, описывающее проблему и приблизительное местоположение в источнике. Проблема не обязательно является синтаксической ошибкой, хотя часто это так. JSLint смотрит на некоторый стиль условные обозначения, а также структурные проблемы. Это не доказывает, что ваша программа правильная. Она просто предоставляет другой набор глаз, чтобы помочь выявить проблемы ».
— Документация JSLint
Перед тем как подписать скрипт, запустите его через JSLint, чтобы убедиться, что вы не допустили никаких бессмысленных ошибок.
5. Поместите Сценарии в нижней части вашей страницы
Этот совет уже был рекомендован в предыдущей статье этой серии. Хотя это очень уместно, я вставлю информацию.
Помните — основная цель — сделать загрузку страницы максимально быстрой для пользователя. При загрузке скрипта браузер не может продолжить работу, пока не будет загружен весь файл. Таким образом, пользователю придется ждать дольше, прежде чем заметить какой-либо прогресс.
Если у вас есть файлы JS, единственной целью которых является добавление функциональности — например, после нажатия кнопки — продолжайте и разместите эти файлы внизу, непосредственно перед закрывающим тегом body. Это абсолютно лучшая практика.
Лучше
|
1
2
3
4
5
|
<p>And now you know my favorite kinds of corn.
<script type=»text/javascript» src=»path/to/file.js»></script>
<script type=»text/javascript» src=»path/to/anotherFile.js»></script>
</body>
</html>
|
6. Объявите переменные вне оператора For
При выполнении длинных операторов «for» не заставляйте двигатель работать тяжелее, чем он должен. Например:
Плохо
|
1
2
3
4
5
|
for(var i = 0; i < someArray.length; i++) {
var container = document.getElementById(‘container’);
container.innerHtml += ‘my number: ‘ + i;
console.log(i);
}
|
Обратите внимание, как мы должны определять длину массива для каждой итерации, и как мы пересекаем dom, чтобы найти элемент «контейнер» каждый раз — крайне неэффективно!
Лучше
|
1
2
3
4
5
|
var container = document.getElementById(‘container’);
for(var i = 0, len = someArray.length; i < len; i++) {
container.innerHtml += ‘my number: ‘ + i;
console.log(i);
}
|
Бонус указывает человеку, который оставляет комментарий, показывающий нам, как мы можем улучшить код, приведенный выше.
7. Самый быстрый способ построить строку
Не всегда тянитесь к своему удобному выражению «for», когда вам нужно перебрать массив или объект. Будьте изобретательны и найдите самое быстрое решение для работы под рукой.
|
1
2
|
var arr = [‘item 1’, ‘item 2’, ‘item 3’, …];
var list = ‘<ul><li>’ + arr.join(‘</li><li>’) + ‘</li></ul>’;
|
Я не буду утомлять вас тестами; вам просто нужно поверить мне (или проверить себя) — это самый быстрый способ!
Использование нативных методов (например, join ()), независимо от того, что происходит за уровнем абстракции, обычно намного быстрее, чем любая неродная альтернатива.
— Джеймс Падолси, james.padolsey.com
8. Уменьшить глобалы
«Сокращая свое глобальное присутствие до одного имени, вы значительно уменьшаете вероятность плохого взаимодействия с другими приложениями, виджетами или библиотеками».
— Дуглас Крокфорд
|
1
2
3
4
5
6
|
var name = ‘Jeffrey’;
var lastName = ‘Way’;
function doSomething() {…}
console.log(name);
|
Лучше
|
1
2
3
4
5
6
|
var DudeNameSpace = {
name : ‘Jeffrey’,
lastName : ‘Way’,
doSomething : function() {…}
}
console.log(DudeNameSpace.name);
|
Обратите внимание на то, как мы «сократили свою площадь» до просто смешного объекта «DudeNameSpace».
9. Прокомментируйте ваш код
Сначала это может показаться ненужным, но, поверьте мне, вы ХОТИТЕ прокомментировать свой код как можно лучше. Что произойдет, когда вы вернетесь к проекту через несколько месяцев, но обнаружите, что не можете легко вспомнить, каково было ваше мышление. Или что, если одному из ваших коллег потребуется пересмотреть ваш код? Всегда, всегда комментируйте важные разделы вашего кода.
|
1
2
3
4
|
// Cycle through array and echo out each name.
for(var i = 0, len = array.length; i < len; i++) {
console.log(array[i]);
}
|
10. Примите прогрессивное улучшение
Всегда компенсируйте, когда JavaScript отключен. Может возникнуть соблазн подумать: «У большинства моих зрителей включен JavaScript, поэтому я не буду об этом беспокоиться». Однако это было бы огромной ошибкой.
Вы нашли время, чтобы увидеть свой красивый слайдер с отключенным JavaScript? ( Загрузите панель инструментов веб-разработчика для простого способа сделать это.) Это может полностью сломать ваш сайт. Как правило, создавайте свой сайт, предполагая, что JavaScript будет отключен. Затем, как только вы это сделаете, начните постепенно улучшать свой макет!
11. Не передавайте строку в «SetInterval» или «SetTimeOut»
Рассмотрим следующий код:
|
1
2
3
|
setInterval(
«document.getElementById(‘container’).innerHTML += ‘My new number: ‘ + i», 3000
);
|
Этот код не только неэффективен, но и функционирует так же, как и функция «eval». Никогда не передавайте строку в SetInterval и SetTimeOut. Вместо этого передайте имя функции.
|
1
|
setInterval(someFunction, 3000);
|
12. Не используйте выражение «С»
На первый взгляд, заявления «с» кажутся разумной идеей. Основная концепция заключается в том, что они могут использоваться для краткого доступа к глубоко вложенным объектам. Например…
|
1
2
3
4
|
with (being.person.man.bodyparts) {
arms = true;
legs = true;
}
|
— вместо того —
|
1
2
|
being.person.man.bodyparts.arms = true;
being.person.man.bodyparts.legs= true;
|
К сожалению, после некоторого тестирования выяснилось, что они «ведут себя очень плохо при настройке новых участников». Вместо этого вы должны использовать var.
|
1
2
3
|
var o = being.person.man.bodyparts;
o.arms = true;
o.legs = true;
|
13. Используйте {} вместо нового объекта ()
Существует несколько способов создания объектов в JavaScript. Возможно, более традиционным методом является использование «нового» конструктора, например так:
|
1
2
3
4
5
6
|
var o = new Object();
o.name = ‘Jeffrey’;
o.lastName = ‘Way’;
o.someFunction = function() {
console.log(this.name);
}
|
Однако этот метод получает штамп «плохой практики», хотя на самом деле это не так. Вместо этого я рекомендую использовать гораздо более надежный метод буквального объекта.
Лучше
|
1
2
3
4
5
6
7
|
var o = {
name: ‘Jeffrey’,
lastName = ‘Way’,
someFunction : function() {
console.log(this.name);
}
};
|
Обратите внимание, что если вы просто хотите создать пустой объект, {} добьется цели.
|
1
|
var o = {};
|
«Литералы объектов позволяют нам писать код, который поддерживает множество функций, но при этом делает его относительно простым для разработчиков нашего кода. Нет необходимости напрямую вызывать конструкторы или поддерживать правильный порядок аргументов, передаваемых функциям и т. Д.» — dyn-web.com
14. Используйте [] вместо New Array ()
То же самое относится и к созданию нового массива.
Ладно
|
1
2
3
|
var a = new Array();
a[0] = «Joe»;
a[1] = ‘Plumber’;
|
Лучше
|
1
|
var a = [‘Joe’,’Plumber’];
|
«Распространенной ошибкой в программах JavaScript является использование объекта, когда требуется массив, или массива, когда требуется объект. Правило простое: когда имена свойств представляют собой небольшие последовательные целые числа, следует использовать массив. В противном случае используйте объект «. — Дуглас Крокфорд
15. Длинный список переменных? Опустите ключевое слово «Var» и используйте вместо него запятые
|
1
2
3
|
var someItem = ‘some string’;
var anotherItem = ‘another string’;
var oneMoreItem = ‘one more string’;
|
Лучше
|
1
2
3
|
var someItem = ‘some string’,
anotherItem = ‘another string’,
oneMoreItem = ‘one more string’;
|
… Должен быть довольно очевидным. Я сомневаюсь, что здесь есть какие-то реальные улучшения скорости, но это немного очищает ваш код.
17. Всегда, всегда используйте точки с запятой
Технически, большинство браузеров позволяют вам избегать использования точек с запятой.
|
1
2
3
4
|
var someItem = ‘some string’
function doSomething() {
return ‘something’
}
|
Сказав это, это очень плохая практика, которая потенциально может привести к гораздо большим, и труднее найти, проблемам.
Лучше
|
1
2
3
4
|
var someItem = ‘some string’;
function doSomething() {
return ‘something’;
}
|
18. «За»
Зацикливая элементы в объекте, вы можете также обнаружить, что вы также получаете функции метода. Чтобы обойти это, всегда заключайте код в оператор if, который фильтрует информацию.
|
1
2
3
4
5
|
for(key in object) {
if(object.hasOwnProperty(key) {
…then do something…
}
}
|
По ссылке из JavaScript: Хорошие части, Дуглас Крокфорд.
19. Используйте функцию Firebug «Таймер» для оптимизации вашего кода
Нужен быстрый и простой способ определить, сколько времени занимает операция? Используйте функцию «таймера» Firebug для регистрации результатов.
|
1
2
3
4
5
|
function TimeTracker(){
console.time(«MyTimer»);
for(x=5000; x > 0; x—){}
console.timeEnd(«MyTimer»);
}
|
20. Читай, Читай, Читай …
Несмотря на то, что я большой поклонник блогов по веб-разработке (как этот!), На самом деле нет никакой замены для книги, когда вы перекусываете или перед сном. Всегда держите на тумбочке книгу по веб-разработке. Вот некоторые из моих любимых JavaScript.
- Объектно-ориентированный JavaScript
- JavaScript: хорошие части
- Обучение jQuery 1.3
- Изучение JavaScript
Прочитайте их … несколько раз. Я все еще делаю!
21. Самоисполняющиеся функции
Вместо вызова функции довольно просто заставить функцию запускаться автоматически при загрузке страницы или при вызове родительской функции. Просто заключите вашу функцию в круглые скобки, а затем добавьте дополнительный набор, который по существу вызывает функцию.
|
1
2
3
4
5
6
|
(function doSomething() {
return {
name: ‘jeff’,
lastName: ‘way’
};
})();
|
22. Сырой JavaScript всегда может быть быстрее, чем с помощью библиотеки
Библиотеки JavaScript, такие как jQuery и Mootools, могут сэкономить огромное количество времени при кодировании — особенно с операциями AJAX. При этом всегда помните, что библиотека никогда не может быть такой же быстрой, как сырой JavaScript (при условии, что вы правильно написали код).
jQuery «каждый» метод отлично подходит для зацикливания, но использование нативного выражения «для» всегда будет на унцию быстрее.
23. Крокфорд в JSON.Parse
Хотя в JavaScript 2 должен быть встроенный анализатор JSON, на момент написания этой статьи нам все еще нужно реализовать свой собственный. Дуглас Крокфорд, создатель JSON, уже создал парсер, который вы можете использовать. Его можно скачать ЗДЕСЬ .
Просто импортировав скрипт, вы получите доступ к новому глобальному объекту JSON, который затем можно использовать для анализа вашего файла .json.
|
1
2
3
4
5
6
|
var response = JSON.parse(xhr.responseText);
var container = document.getElementById(‘container’);
for(var i = 0, len = response.length; i < len; i++) {
container.innerHTML += ‘<li>’ + response[i].name + ‘ : ‘ + response[i].email + ‘</li>’;
}
|
24. Удалить «Язык»
Несколько лет назад нередко находили атрибут «language» в тегах скрипта.
|
1
2
3
|
<script type=»text/javascript» language=»javascript»>
…
</script>
|
Однако этот атрибут давно устарел; так что оставь это.
Вот и все, ребята
Итак, у вас есть это; двадцать четыре важных совета для начинающих JavaScripters. Дайте мне знать ваши быстрые советы! Спасибо за прочтение. Какую тему должна освещать третья часть этой серии?
Подпишитесь на нас в Твиттере или подпишитесь на RSS-канал NETTUTS, чтобы получать ежедневные обзоры и статьи о веб-разработке.
И обязательно ознакомьтесь с тысячами элементов JavaScript, доступных на Envato Market. Там наверняка найдется что-то, что поможет вам в разработке JavaScript.