English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Основы教程 JavaScript

Объекты JavaScript

Функции JavaScript

JS HTML DOM

JS браузер BOM

Основы教程 AJAX

JavaScript справочник

Практический опыт JavaScript

Каждый пишет JavaScript по-своему. Но есть много общего. Вот набор довольно простых руководств и注意事项 по написанию JavaScript, чтобы вы могли избежать ошибок.

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

Старайтесь минимизировать использование глобальных переменных. Это включает все типы данных, объекты и функции.

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

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

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

При声明 переменных и констант используйтеletиconstключевое слово, а неvar

  // Рекомендуется:
  let myAge = 22;
  const myName = "oldtoolbag.com";
  
  // не рекомендуется:
  var myAge = 22;
  var myName = "oldtoolbag.com";

Таким образом, есть множество充分的 причин - например, это предотвращает проблемы, возникающие из-за случайного перераспределения, и предотвращает снижение читаемости.

Это оченьgood practice для каждого скрипта или функции, чтобы поместить все объявления в верхнюю часть.

Ниже предоставлен более краткий код, и в начале кода предоставлено место для поиска всех переменных.

  // Указание写在 самом начале
  let firstName, lastName, price, discount, fullPrice;
  
  // Использование
  firstName = "oldtoolbag.com";
  lastName = "Choudhary";
  
  price = 26.90;
  discount = 1.25;
  
  fullPrice = price * 100 / discount;

Использование расширенной грамматики

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

  // Рекомендуется:
  function myFunc() {
  console.log("Parrot Tutorial");
  {}
  
  // не рекомендуется:
  function myFunc() { console.log("Parrot Tutorial"); }

Вы должны использовать пробелы между операторами, операндами, параметрами и т.д.:

  // Это более читаемо
  if(dayOfWeek === 7 && weather === "sunny") {
  /* Некоторые код */
  {}
  
  // Низкая читаемость
  if(dayOfWeek === 7 && weather === "sunny"){
  /* Некоторые код */
  {}

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

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

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

var str1 = "New Delhi";
var str2 = new String("New Delhi");
document.write(str1 === str2); // возвращает false, потому что str1 и str2 имеют различные типы
Проверьте, посмотрите‹/›

Невозможно сравнить объекты:

var str1 = new String("New Delhi");
var str2 = new String("New Delhi");
document.write(str1 == str2); // возвращает false, потому что str1 и str2 являются различными объектами
document.write(str1 === str2); // возвращает false, потому что str1 и str2 являются различными объектами
Проверьте, посмотрите‹/›

Не используйте new Object()

  • Используйте {} вместо new Object()

  • Используйте "" вместо new String()

  • Используйте 0 вместо new Number()

  • Используйте false вместо new Boolean()

  • Используйте [] вместо new Array()

  • Используйте /()/ вместо new RegExp()

  • Используйте function(){} вместо new Function()

let x1 = {};
let x2 = "";
let x3 = 0;
let x4 = false;
let x5 = [];
let x6 = /()/;
let x7 = function(){};
Проверьте, посмотрите‹/›

Будьте осторожны с автоматическим типовым преобразованием

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

var x = 20; // x теперь число
x = "oldtoolbag.com"; // x теперь строка
x = true; // x теперь Boolean
Проверьте, посмотрите‹/›

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

num = 50 + 10; // возвращает 60, typeof num — это число
num = 50 + "10"; // возвращает "5010", typeof num — это строка
num = "50" + 10; // возвращает "5010", typeof num — это строка
num = "50" - 10; // возвращает "40", typeof num — это число
Проверьте, посмотрите‹/›

Обратите внимание, что числа могут неожиданно преобразовываться вNaN(не число):

num = 50 * "Parrot"; // возвращает "NaN", typeof num — это число
Проверьте, посмотрите‹/›

Использование строгого сравнения

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

Оператор strict equality (===) fuerza una comparación de valor y tipo.

  1 == "1"; // true
  1 == true; // true
  
  1 === "1"; // false
  1 === true; // false

Использование тематических констант

Чтобы вставить значение в строку, используйтеТематические константы(` `)。

  // Рекомендуется:
  let myName = 'oldtoolbag.com';
  console.log(`Hi! I'm ${myName}!`);
  
  // не рекомендуется:
  let myName = 'oldtoolbag.com';
  console.log('Hi! I\'m' + myName + '!');

Общий цикл

Когда вы используетеfor,for...inилиfor...ofЦикл, убедитесь, что инициализация определена правильно, используяletКлючевое слово.

  let fruits = ["Apple", "Mango", "Banana"];
  
  // Рекомендуется:
  for(let i of fruits) {
   console.log(i);
  {}
  
  // не рекомендуется:
  for(i of fruits) {
   console.log(i);
  {}

Не забывайте:

  • Ключевое слово цикла и левая скобка не должны бытьПробел

  • Внутри скобок и фигурных скоб должно бытьОдин пробел

Имя функции

Для имени функции используйте lowerCamelCasing и в соответствующих местах простые и понятные семантические имена.

  // Рекомендуется:
  function sayHello() {
  alert('Hello!');
  {}
  
  // не рекомендуется:
  function sayhello() {
  alert('Hello!');
  {}

Заканчивайте switch значением по умолчанию

switchВсегда заканчивайте default:.

var day;
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 = "Undefined Day";
{}
Проверьте, посмотрите‹/›

Обработка ошибок

Если某些 состояния программы выбрасывают необработанные ошибки, они прекратят выполнение и могут снизить полезность примера.

поэтому вы должны использоватьtry...catchблок для захвата ошибок.

  try {
  console.log(results);
  {}
  catch(e) {
  console.error(e);
  {}