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

JS Учебник

JS Главная JS Введение JS Что? Где? Куда? JS Вывод JS Заявления JS Синтаксис JS Комментарии JS Переменные JS Операторы JS Арифметика JS Присваивания JS Типы данных JS Функции JS Объекты JS События JS Строки JS Методы строк JS Числа JS Методы чисел JS Массивы JS Методы массива JS Сортировка массива JS Итерация массива JS Объекты дат JS Формат дат JS Метод получения дат JS Метод набора дат JS Математические... JS Случайные числа JS Булевы JS Сравнение... JS Заявления if...else JS Заявление switch JS Цикл for JS Цикл while JS Заявление break... JS Преобразование... JS Битовые... JS Регулярные выражения JS Ошибки JS Область JS Подъемный JS Строгий JS Ключевое слово this JS Ключевое слово let JS Константы JS Функция стрелки JS Классы JS Отладчик JS Руководство стиля JS Практика JS Распространенные ошибки JS Эффективность JS Зарезервированные слова JS Версии JS Версия ES5 JS Версия ES6 JS Версия 2016 JS Версия 2017 JS JSON

JS Формы

JS Формы JS Формы API

JS Объекты

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

JS Функции

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

JS Прочее

Классы введение Наследование класса Статические методы... JS Обратный вызов JS Асинхронный JS Обещания JS Асинхронный синтаксис

JS HTML DOM

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

JS Браузера BOM

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

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 Веб API

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

JS или jQuery

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

JS Примеры

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

JS Справочник

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


На сайте нет рекламы

JavaScript Практика



Избегайте глобальных переменных, избегайте new, избегайте ==, избегайте eval()


Избегайте глобальных переменных

Сведите к минимуму использование глобальных переменных.

Сюда входят все типы данных, объекты и функции.

Глобальные переменные и функции могут быть перезаписаны другими скриптами.

Вместо этого используйте локальные переменные и узнайте, как использовать закрытие.


Всегда объявлять локальные переменные

Все переменные, используемые в функции, должны быть объявлены как локальные переменные.

Локальные переменные должны быть объявлены с var ключевым словом или let ключевым словом, иначе они станут глобальными переменными.

Строгий режим не допускает необъявленных переменных.


Объявления сверху

Хорошая практика программирования - помещать все объявления вверху каждого скрипта или функции.

Это будет:

  • Дайте более чистый код
  • Обеспечьте единое место для поиска локальных переменных
  • Упростите избежание нежелательных (подразумеваемых) глобальных переменных
  • Уменьшите вероятность нежелательных повторных деклараций
// Объявление в начале
var firstName, lastName, price, discount, fullPrice;

// Использовать позже
firstName = "John";
lastName = "Doe";

price = 19.90;
discount = 0.10;

fullPrice = price - discount;

Это также касается переменных цикла:

// Объявление в начале
var i;

// Использовать позже
for (i = 0; i < 5; i++) {

По умолчанию JavaScript перемещает все объявления наверх (JavaScript подъем).



Инициализировать переменные

Хорошая практика программирования - инициализировать переменные при их объявлении.

Это будет:

  • Дайте более чистый код
  • Обеспечьте единое место для инициализации переменных
  • Избегайте неопределенных значений
// Объявление и запуск с самого начала
var firstName = "",
lastName = "",
price = 0,
discount = 0,
fullPrice = 0,
myArray = [],
myObject = {};

Инициализация переменных дает представление о предполагаемом использовании (и предполагаемом типе данных).


Никогда не объявляйте числовые, строковые или логические объекты

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

Объявление этих типов как объектов снижает скорость выполнения и вызывает неприятные побочные эффекты:

Пример

var x = "John";             
var y = new String("John");
(x === y) // ложно, потому что x - строка, а y - объект.
Попробуйте сами »

Или еще хуже:

Пример

var x = new String("John");             
var y = new String("John");
(x == y) // ложно, потому что вы не можете сравнивать объекты.
Попробуйте сами »

Не использовать new Object()

  • Используйте {} вместо new Object()
  • Используйте "" вместо new String()
  • Используйте 0 вместо new Number()
  • Используйте false вместо new Boolean()
  • Используйте [] вместо new Array()
  • Используйте /()/ вместо new RegExp()
  • Используйте function (){} вместо new Function()

Пример

var x1 = {};           // новый объект
var x2 = "";           // новая примитивная строка
var x3 = 0;            // новое примитивное число
var x4 = false;        // новый примитивный логический
var x5 = [];           // новый объект массива
var x6 = /()/;         // новый объект регулярного выражения
var x7 = function(){}; // новый объект функции
Попробуйте сами »

Остерегайтесь автоматического преобразования типов

Помните, что числа могут быть случайно преобразованы в строки или NaN (не число).

JavaScript слабо типизирован. Переменная может содержать разные типы данных, а переменная может изменять свой тип данных:

Пример

var x = "Hello";     // typeof x это строка
x = 5;               // меняет typeof x на число
Попробуйте сами »

При выполнении математических операций JavaScript может преобразовывать числа в строки:

Пример

var x = 5 + 7;       // x.valueOf() равно 12,  typeof x это число
var x = 5 + "7";     // x.valueOf() равно 57,  typeof x это строка
var x = "5" + 7;     // x.valueOf() равно 57,  typeof x это строка
var x = 5 - 7;       // x.valueOf() равно -2,  typeof x это число
var x = 5 - "7";     // x.valueOf() равно -2,  typeof x это число
var x = "5" - 7;     // x.valueOf() равно -2,  typeof x это число
var x = 5 - "x";     // x.valueOf() равно NaN, typeof x это число
Попробуйте сами »

Вычитание строки из строки не приводит к ошибке, но возвращает NaN (не число):

Пример

"Hello" - "Dolly"    // возвращает NaN
Попробуйте сами »

Используйте === сравнение

Оператор == сравнения всегда преобразуется (в соответствующие типы) перед сравнением.

Оператор === заставляет сравнивать значения и тип:

Пример

0 == "";        // true
1 == "1";       // true
1 == true;      // true

0 === "";       // false
1 === "1";      // false
1 === true;     // false
Попробуйте сами »

Использовать значения параметров по умолчанию

Если функция вызывается с отсутствующим аргументом, значение отсутствующего аргумента устанавливается равным undefined.

Неопределенные значения могут нарушить ваш код. Присваивать аргументам значения по умолчанию - хорошая привычка.

Пример

function myFunction(x, y) {
  if (y === undefined) {
    y = 0;
  }
}
Попробуйте сами »

ECMAScript 2015 позволяет использовать параметры по умолчанию в определении функции:

function (a=1, b=1) { /*function code*/ }

Узнайте больше о параметрах и аргументах Параметры функции.


Завершите свои переключатели настройками по умолчанию

Всегда заканчивайте свои switch утверждения расширением default. Даже если вы думаете, что в этом нет необходимости.

Пример

switch (new Date().getDay()) {
  case 0:
    day = "Sunday";
    break;
  case 1:
    day = "Monday";
    break;
  case 2:
    day = "Tuesday";
    break;
  case 3:
    day = "Wednesday";
    break;
  case 4:
    day = "Thursday";
    break;
  case 5:
    day = "Friday";
    break;
  case 6:
    day = "Saturday";
    break;
  default:
    day = "Unknown";
}
Попробуйте сами »

Избегайте использования eval()

Функция eval() используется для запуска текст в качестве кода. Практически во всех случаях нет необходимости использовать его.

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