САМОСТОЯТЕЛЬНОЕ ОБУЧЕНИЕ ДЛЯ ВЕБ РАЗРАБОТЧИКОВ
×

JS Учебник

JS Главная JS Введение JS Где установить? JS Вывод JS Заявления JS Синтаксис JS Комментарии JS Переменные JS Let JS Const JS Операторы JS Арифметика JS Присваивание JS Типы данных JS Функции JS Объекты JS События JS Строки JS Методы строк JS Поиск строк JS Шаблоны строк JS Числа JS Методы чисел JS Массивы JS Методы массива JS Сортировка массива JS Итерация массива JS Постоянный массив JS Даты JS Формат дат JS Методы получения дат JS Методы набора дат JS Объекты Math JS Случайные числа JS Булевы JS Сравнения JS Оператор If...Else JS Оператор Switch JS Цикл For JS Цикл For In JS Цикл For Of JS Цикл While JS Оператор Break JS Повторяющиеся JS Наборы JS Карты JS Typeof JS Преобразование JS Битовые JS Выражения JS Ошибки JS Область JS Подъемный JS Строгий JS Ключевое слово this JS Стрелки JS Классы JS JSON JS Отладчик JS Стиль JS Практика JS Ошибки JS Эффективность JS Слова

JS Версии

JS Версии JS 2009 (ES5) JS 2015 (ES6) JS 2016 JS 2017 JS 2018 JS IE/Edge JS История

JS Объекты

Определение объекта Свойства объекта Методы объекта Отображение объекта Доступ объекта Конструкторы объекта Прототипы объекта Повторяющиеся объекты Набор объектов Карты объекта Справочник объектов

JS Функции

Определение функций Параметры функции Обращение к функции Вызов функции Применение функции Закрытие функции

JS Классы

Введение класса Наследование класса Статистический класс

JS Асинхронный

JS Обратный вызов JS Асинхронный JS Обещания JS Асинхронный

JS HTML DOM

DOM Введение DOM Методы DOM Документы DOM Элементы DOM HTML DOM Формы DOM CSS DOM Анимация DOM События DOM Прослушиватель DOM Навигация DOM Узлы DOM Коллекция DOM Список узлов

JS Браузер BOM

JS Window JS Экран JS Расположение JS История JS Навигатор JS Предупреждение JS Синхронизация JS Куки

JS Веб APIы

Веб API Введение Веб API История Веб API Хранилище Веб API Работник Веб API Извлечь Веб API Геолокации

JS AJAX

AJAX Введение AJAX XMLHttp AJAX Запрос на сервер AJAX Ответ с сервера AJAX Файл XML AJAX Файл PHP AJAX Файл ASP AJAX База данных AJAX Приложения AJAX Примеры

JS JSON

JSON Введение JSON Синтаксис JSON или XML JSON Типы данных JSON Парсинг JSON Строки JSON Объекты JSON Массивы JSON PHP JSON HTML JSON JSONP

JS или jQuery

jQuery Селекторы jQuery Элементы jQuery CSS jQuery DOM

JS Примеры

JS Примеры JS HTML DOM JS HTML Ввод JS HTML Объекты JS HTML События JS Браузер JS Редактор JS Упражнения JS Викторина JS Сертификат

JS Справочник

JavaScript Объекты HTML DOM Объекты


JavaScript - Руководство стиля



Всегда используйте одни и те же соглашения о кодировании для всех ваших проектах JavaScript.


JavaScript Соглашения о кодировании

Соглашения о кодировании - это рекомендации по стилю программирования. Обычно они охватывают:

  • Правила именования и объявления для переменных и функций
  • Правила использования пробелов, отступов и комментариев
  • Практику и принципы программирования

Соглашения о кодировании безопасного качества:

  • Улучшает читаемость кода
  • Упрощает обслуживание кода

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

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


Имена переменных

В Schoolsw3 мы используем camelCase (Верблюжий Регистр), для имен идентификаторов (переменных и функций).

Все имена начинаются с letter.

В нижней части этой страницы вы найдете более широкое обсуждение правил именования.

firstName = "Щипунов";
lastName = "Андрей";

price = 19.90;
tax = 0.20;

fullPrice = price + (price * tax);

Отступы вокруг операторов

Всегда ставьте пробелы вокруг операторов (= + - * /) и после запятых:

Примеры:

var x = y + z;
var values = ["Вольво", "Сааб", "Фиат"];


Отступы в коде

Всегда используйте 2 пробела для отступов кодовых блоков:

Functions:

function toCelsius(fahrenheit) {
return (5 / 9) * (fahrenheit - 32);
}

Не используйте табы (табуляторы) для отступов. Разные редакторы по-разному интерпретируют табы.


Правила объявлений (инструкций)

Общие правила для простых объявлений:

  • Всегда заканчивайте простое объявление точкой с запятой.

Примеры:

var values = ["Вольво", "Сааб", "Фиат"];

var person = {
firstName: "Щипунов",
lastName: "Андрей",
age: 50,
eyeColor: "blue"
};

Общие правила для сложных (составных) объявлений:

  • Поместите открывающую скобку в конец первой строки.
  • Используйте один пробел перед открывающей скобкой.
  • Поместите закрывающую скобку на новую строку без пробелов в начале.
  • Не заканчивайте сложное заявление точкой с запятой.

Функции:

function toCelsius(fahrenheit) {
return (5 / 9) * (fahrenheit - 32);
}

Цикл:

for (i = 0; i < 5; i++) {
x += i;
}

Условное выражение:

if (time < 20) {
greeting = "Добрый день";
} else {
greeting = "Добрый вечер";
}

Правила объекта

Общие правила определения объектов:

  • Поместите открывающую скобку на той же строке, что и имя объекта.
  • Используйте двоеточие плюс один пробел между каждым свойством и его значением.
  • Используйте кавычки вокруг строковых значений, а не вокруг числовых значений.
  • Не добавляйте запятую после последней пары "свойство-значение".
  • Поместите закрывающую скобку на новую строку без пробелов в начале.
  • Всегда заканчивайте определение объекта точкой с запятой.

Пример

var person = {
firstName: "Щипунов",
lastName: "Андрей",
age: 50,
eyeColor: "blue"
};

Короткие объекты могут быть записаны сжатыми в одну строку, используя только пробелы между свойствами, например:

var person = {firstName:"Щипунов", lastName:"Андрей", age:50, eyeColor:"blue"};

Длина строки < 80

Для удобства чтения избегайте строки длиной более 80 символов.

Если JavaScript объявление (инструкция, оператор) не помещается в одну строку, лучше всего его разбить после объявления или запятой.

Пример

document.getElementById("demo").innerHTML =
"Привет Андрей.";
Попробуйте сами »

Соглашения об именах

Всегда используйте одно и то же соглашение об именах для всего вашего кода. Например:

  • Имена переменных и функций записываются как camelCase (Верблюжий Регистр)
  • Глобальные переменные записываются в UPPERCASE - ВЕРХНЕМ РЕГИСТРЕ. (Мы так не делаем, но это встречается довольно часто)
  • Константы (например, число PI) записываются в UPPERCASE - ВЕРХНЕМ РЕГИСТРЕ

Следует ли использовать hyp-hens, camelCase, или under_scores в именах переменных?

Программисты часто обсуждают этот вопрос. Ответ зависит от того, кого вы спрашиваете:

Дефисы в HTML и CSS:

Атрибуты HTML5 могут начинаться с data- (data-quantity, data-price).

CSS использует дефисы в именах свойств (font-size).

Дефисы могут быть ошибочно приняты за попытки вычитания. В именах JavaScript нельзя использовать дефисы.

Подчеркивания:

Многие программисты предпочитают использовать символы подчеркивания (date_of_birth), особенно в базах данных SQL.

Подчеркивание часто используется в документации PHP.

PascalCase:

PascalCase часто предпочитают программисты на языке C.

camelCase:

camelCase используется самим JavaScript, jQuery и другими библиотеками JavaScript.

Не начинайте имена со знака $. Это приведет к конфликту со многими именами библиотек JavaScript.


Загрузка JavaScript в HTML

Используйте простой синтаксис для загрузки внешних скриптов (атрибут type не нужен):

<script src="myscript.js"></script>

Доступ к HTML элементам

Последствие использования "грязных", "беспорядочных" HTML стилей может привести к ошибкам JavaScript:

Эти два оператора JavaScript выдадут разные результаты:

var obj = getElementById("Demo")

var obj = getElementById("demo")

Если возможно, используйте то же соглашение об именах (как JavaScript) в HTML.

Посетите руководство по HTML стилю.


Расширения файлов

Файлы HTML должны иметь расширение .html ( разрешено .htm).

Файлы CSS должны иметь расширение .css.

Файлы JavaScript должны иметь расширение .js.


Используйте имена файлов в нижнем регистре

Большинство веб серверов (Apache, Unix) чувствительны к регистру имени файлов:

london.jpg недоступен как London.jpg.

Другие веб-серверы (Microsoft, IIS) не чувствительны к регистру:

london.jpg можно открыть как London.jpg или london.jpg.

Если вы используете сочетание верхнего и нижнего регистра, вы должны быть предельно последовательны.

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

Чтобы избежать этих проблем, всегда используйте имена файлов в нижнем регистре (если возможно).


Производительность

Соглашения о кодировании не используются компьютерами. Большинство правил мало влияют на выполнение программ.

В маленьких скриптах отступы и лишние пробелы не имеют значения.

Для кода, находящегося в разработке, предпочтение следует отдавать удобочитаемости. Большие производственные скрипты следует минимизировать насколько это возможно.