Как написать чистый JS-код? 5 советов по написанию, которыми стоит поделиться

Уменьшите нагрузку на чтение, вдохновите на творческое мышление и легко освойте навыки JavaScript. Rigongyiping, jym,rush~

1. Определите числа как константы

, например следующий код:

const isOldEnough = (person) => {.
  вернуть person.getAge() >= 100;
}

Кто знает, к чему конкретно относится эта цифра 100? Обычно нам нужно объединить контекст функции, чтобы предположить и судить, какое конкретно значение может представлять эта 100.

Если таких чисел несколько, это легко вызовет еще большую путаницу.

Напишите чистый JavaScript: определение числа как константы

четко решает эту проблему:

const AGE_REQUIREMENT = 100;
const isOldEnough = (человек) => {
  вернуть person.getAge() >= AGE_REQUIREMENT;
}

Теперь, объявив имя константы, мы сразу можем понять, что 100 означает «возрастное требование». При изменении вы можете быстро найти его, изменить в одном месте и применить в нескольких местах.

2. Избегайте использования логических значений в качестве параметров функции.

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

const validateCreature = (существо, isHuman) => {
  если (isHuman) {
    // ...
  } еще {
    // ...
  }
}

Логическое значение, переданное в функцию в качестве параметра, не может выражать четкое значение. Оно может только сообщить читателю, что эта функция вынесет суждение и создаст две или более ситуации.

Тем не менее, мы поддерживаем принцип единой ответственности для функций, поэтому:

Пишите чистый JavaScript: Избегайте логических значений в качестве параметров функции

const validatePerson = (person) => {
  // ...
}
const validateCreature = (существо) => {
  // ...
}

3. Инкапсулируя несколько условий,

мы часто пишем такой код:

if (
  person.getAge() > 30 &&
  person.getName() === "Саймон" &&
  person.getOrigin() === "Швеция"
) {
  // ...
}

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

Напишите чистый JavaScript: инкапсулируйте несколько условий

const isSimon =
  person.getAge() > 30 &&
  person.getName() === "Саймон" &&
  person.getOrigin() === "Швеция";
если (isSimon) {
  // ...
}

или

const isSimon = (человек) => {
  возвращаться (
    person.getAge() > 30 &&
    person.getName() === "Саймон" &&
    person.getOrigin() === "Швеция"
  );
};
если (isSimon(человек)) {
  // ...
}

О, оказывается, эти условия должны определить, является ли этот человек Саймоном ~

Этот тип кода представляет собой код декларативного стиля, который более читабелен.

4. Избегайте негативных суждений.

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

Например, в приведенном ниже коде условие !isCreatureNotHuman(creature) имеет двойное отрицательное значение, что немного затрудняет его чтение.

const isCreatureNotHuman = (существо) => {
  // ...
}

if (!isCreatureNotHuman(существо)) {
  // ...
}

Пишите чистый JavaScript: избегайте условий негативного суждения

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

Часто при чтении кода я просто продолжаю читать. Когда я вижу «плохой» метод написания, я больше не могу этого терпеть, и тысячимильная дамба рухнет в муравейнике.

const isCreatureHuman = (существо) => {
  // ...
}
если (isCreatureHuman(существо)) {
  // ...
}

5. Избегайте большого количества if...else...

Этот момент всегда подчеркивался Bengua:

Например, следующий код:

if(x===a){
   рез=А
}иначе если(x===b){
   рез=Б
}иначе если(x===c){
   рез=С
}иначе если(x===d){
    //...
}

Переписано как карта:

let mapRes={
    а: А,
    б:Б,
    с:С,
    //...
}
res=mapRes[x]

Другой пример — следующий код:

const isMammal = (существо) => {
  if (существо === "человек") {
    вернуть истину;
  } else if (существо === "собака") {
    вернуть истину;
  } else if (существо === "кот") {
    вернуть истину;
  }
  // ...
вернуть ложь;
}

Переписано как массив:

const isMammal = (существо) => {
  const млекопитающие = ["человек", "собака", "кошка", /* ... */];
  вернуть млекопитающих.includes(существо);
}

Пишите чистый JavaScript: избегайте большого количества if...else...

Итак, когда в коде много if...else..., подумайте еще один шаг и посмотрите, сможете ли вы внести небольшую модификацию. чтобы код выглядел более «чистым»».

Резюме: Может показаться, что приведенные выше методы не заслуживают упоминания в примерах, но в реальных проектах, когда бизнес-логика становится сложной и объем кода становится большим, эти советы определенно дадут положительный эффект и помогут даже за гранью воображения.

Вышеупомянутое о том, как написать чистый JS-код? Подробно представлены 5 советов по написанию. Для получения дополнительной информации обратите внимание на другие статьи по теме на китайском веб-сайте PHP!