Онлайн-курсы по JavaScript
Выбрать другой урок из курса
Обсуждение
Теория урока

Создание понятного кода на JavaScript

Ошибки в программе достаточно сложно найти. И чтобы упростить себе задачу, нужно писать код правильно и красиво (читаемо). Хороший код должен быть: удобочитаемым, непротиворечивым, предсказуемым, правильно оформленным, а так же он должен иметь документацию.

Важные моменты по оформлению кода

Отступы

Если вы не делаете отступы, то код невозможно читать. Обычно отступы оформляют символом табуляции, но есть и те, кто отступ делает при помощи пробелов, в основном 3-4 пробела. Далее пример правильной и не правильной расстановки отступов:

Пример 1
/* Правильные отступы */
var answer, arr = [1, 2, 3, 4, 5, 6, 7], sum = 0;
for (var i = 0, max = arr.length; i < max; i++) {
    if (arr[i] % 2 === 0) {
        answer = {
            sum: sum += arr[i]
        };
    }
}

/* А тут все плохо */
var answer, arr = [1, 2, 3, 4, 5, 6, 7], sum = 0;
for (var i = 0, max = arr.length; i < max; i++) {
if (arr[i] % 2 === 0) {
answer = {
sum: sum += arr[i]
};
}
}
Фигурные скобки

Всегда используйте фигурные скобки, даже если они не нужны. С технической точки зрения, если тело конструкции if, while или for состоит из одной инструкции, то фигурные скобки можно не писать. Всегда написанные фигурные скобки упрощают последующие внесение изменений. Далее пример, как правильно, а как нет:

Пример 2
/* Правильная запись */
for (var i = 0; i < 5; i++) {
    alert(i);
}

/* А такая нет */
for (var i = 0; i < 5; i++)
    alert(i);
Местоположение открывающей скобки

Есть два типа программистов:

Пример 3
if (a > b) {
    ...
}

if (a > b)
{
    ...
}

Как писать открывающую фигурную скобку решать вам. Мы уже знаем, JavaScript сам подставляет точки с запятой и здесь возникает проблема во втором способе. Допустим, вы напишите вот такой кусок кода:

Пример 4
return
{
    id: 1
};

И что сделает интерпретатор? Он подставить точку с запятой после return и получится, что функция вернет undefined. То есть интепретатор видит этот кусок кода так:

Пример 5
return undefined;
{
    id: 1
};
Пробелы

Пробелы нужно использовать правильно. Вы когда пишите на бумаге, оставляете после запятой пустое пространство? Наверно да. И при перечислении чего-либо в JavaScript нужно делать пробел после запятой. Где нужно ставить пробел, чтобы код был понятным?

1. После точек с запятой в инструкции for

Пример 6
for (var i = 0; i < 100; i++) {...}

2. При объявлении нескольких переменных в инструкции for

Пример 7
for (var i = 0, max = arr.length; i < max; i++) {...}

3. После запятых, между элементами массива

Пример 8
var newArr = [1, 2, 3];

4. После запятых, между аргументами функций и перед фигурными скобками

Пример 9
function helloWorld(a, b, c, d) {...}

5. Так же ставить пробелы перед и после:

Пример 10
+ - * = / < > % <= >= == === !== != && || += -= *= /* и так далее */

6. Не нужно ставить пробелы перед первым аргументом функции и после последнего. Это относится и к объектам и массивам

Пример 11
function helloWorld( a, b ) {...} /* Перед a и после b пробел, который не нужен */
var arr = [ 1, 2, 3 ] /* Перед 1 и после 3 пробел, который не нужен */
<
×
>
Не публикуйте свой код прямо в комментариях. Во-первых, он плохо отображается. Во-вторых, он может содержать для кого-то «спойлеры», т.е. ответы на практику. Воспользуйтесь специальными сервисами: cssdeck.com или jsfiddle.net.
Комментарии, содержащие код (пару строк не считается), будут безжалостно удаляться.