1. Объявите и инициализируйте свои переменные вверху: let / const.
  2. Создавайте модульные, специализированные функции.
  3. Распознать и удалить повторяющийся код.
  4. Комментируйте свой код почаще: //.
  5. Остерегайтесь чрезмерного использования рекурсии: функции 3+ уровня.
  6. Будьте эффективны с DOM манипуляциями: $.
  7. Избегайте глобальных переменных любой ценой.
  8. Используйте сокращенные обозначения (литералы объектов).
  9. Используйте Строгий режим для обнаружения скрытых ошибок: использовать строгий режим.
  10. Установить значения по умолчанию.
  11. Использовать литералы шаблонов для объединения строк: ``.
  12. Решение проверки существования с помощью includes: include( ).
  13. Сократить условные выражения со значениями false: !.
  14. Совместное использование методов с наследованием: super( ).
  15. Писать более короткие циклы с методами массива: =›.

Подготовка и ресурсы.

1. Объявите и инициализируйте свои переменные вверху: let/const.

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

Лучше всего инициализировать ваши переменные во время создания, чтобы вы и ваша команда могли убедиться, что ничего не осталось undefined.

<script>
let x = 5;
</script>

2. Создайте модульные, специализированные функции.

Как для эффективности, так и для удобочитаемости одна функция НЕ должна делать все это. Вместо этого должна выполняться одна задача, чтобы выполнить только эту задачу. Назовите функцию, соответствующую этой задаче.

function table (columns, rows, item){
creates table and searches it for the passed item
}

// compared to

function createTable (columns, rows){
//creates table
}

function searchTable (table.length, item) {
//searches table for the passed item
}

3. Распознайте и удалите повторяющийся код.

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

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

<script>
let x = 5;
let y = 6;
let x = x*2
let y = y*2
</script>

<script>
let x = 5;
let y = 6;

function double (value){
return value*2;
}
double (x);
double(y);
</script>

4. Чаще комментируйте свой код: //.

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

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

//declares and initializes let x
<script>
let x = 5;
</script>

5. Остерегайтесь чрезмерного использования рекурсии: функции 3+ уровня.

Чтобы избежать путаницы, помните, где рекурсивные функции могут быть извлечены из своего вложенного места без значительных затрат времени выполнения. Делайте это всякий раз, когда это возможно. Если у вас есть 3+ уровня вложенных функций, скорее всего, вашим коллегам-разработчикам будет трудно следовать им.

function1 (a,b){
  function2{
    function3{
    //this is too hard to follow and can likely be solved another way
    }
  }
}
</script>

6. Будьте эффективны в манипуляциях с DOM: $.

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

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

Примечание. Рекомендуется помечать любую ссылку DOM символом $.

function accountInfo(){
let email = $("#accounts").find(".email").val();
let accountNumber = $("#accounts").find(".accountNumber").val();
}

// Contents cached to variable "accounts"

function accountInfo(){ var $accounts = $("#accounts"); 
let name = $accounts.find(".email").val(); 
let age = $accounts.find(".accountNumber").val();
}
const name = accountInfo().name
const age = accountInfo().age
//// Even simpler
const accountInfo = () => {
var $accounts = $("#accounts"); 
let name = $accounts.find(".email").val(); 
let age = $accounts.find(".accountNumber").val();
}
const { name, age } = accountInfo()

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

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

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

<html>
      <script>
            let myVar = "my global variable"; // This variable is declared as global
            function localVariable( ) {
               let myVar = "my local variable";  // This is a locally declared variable
      </script>
   </body>
</html>

8. Используйте сокращенную запись (объектные литералы).

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

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

Произвольный объект:

let computer = new Object();
    computer.caseColor = 'black';
    computer.brand = 'Dell';
    computer.value = 1200;
    computer.onSale = true;

Сокращенный объект:

let computer = {
    caseColor: 'black';
    brand: 'Dell';
    value: 1200;
    onSale: true;
}

Сокращенный массив:

let computerBrands = [
'Dell',
'Apple',
'Lenovo',
'HP',
'Toshiba',
'Sony'
];

9. Используйте строгий режим для обнаружения скрытых ошибок: «используйте строгий режим».

JavaScript — очень щадящий язык по сравнению с другими жестко запрограммированными языками, такими как C++ и Java. Хотя это полезно для того, чтобы код выполнялся без ошибок, эта снисходительность может привести к скрытым ошибкам, которые проходят без исправления. Это также может привести к непоследовательному поведению, если JavaScript может устранить скрытую ошибку несколькими способами.

Чтобы обойти это, выберите строгий режим. Этот параметр вносит два основных изменения:

  • Неявные ошибки, которые раньше не проходили через компилятор, теперь выдают ошибки, позволяя вам точно настроить код до того, как он попадет к членам вашей команды.
  • Исправляет ошибки, которые мешают JavaScript оптимизировать ваш код.
  • Программы JavaScript Strict Code часто работают быстрее, чем их «небрежные» аналоги.

Чтобы выбрать строгий режим, добавьте строку'use strict'; либо вверху раздела скрипта (если вы хотите, чтобы весь раздел был строгим), либо перед нужной функцией (если только определенные разделы должны быть строгими).

10. Установите значения по умолчанию.

При создании объектов вы можете установить значения по умолчанию для некоторых или всех свойств объекта. Это гарантирует, что значения каждого атрибута не равны undefined. Он также демонстрирует, какой тип данных ожидается для этого атрибута. Кроме того, не устанавливая значения по умолчанию для определенных свойств, вы можете сообщить своей команде, что эти значения не требуются для правильной работы объекта.

function logProperty({
    address = '111 11th Street, 11111', 
    unit,   //optional
    landlord = 'Sara', 
    tenant = 'Raj', 
    rent = 500, 
})

Выше не все свойства будут иметь номер модуля, но все остальные четыре свойства будут заполнены ожидаемым типом данных. Чтобы продемонстрировать это, мы оставляем unit пустым.

11. Используйте литералы шаблонов для объединения строк: ` `.

Объединение строк — это боль, особенно при объединении строк и переменных. Чтобы упростить этот процесс, вы можете использовать литералы шаблонов (отмеченные обратными кавычками), которые принимают как строку, так и переменную.

function greet(name) {
    return `Hi, ${name}`; //template literal
}
console.log(greet('Leo'));

Обратите внимание, что с помощью литерала шаблона мы можем зарегистрировать приветствие для любого пользователя на основе переданного нам имени, комбинируя строку Hi, и значение переданной переменной name. Таким образом, этот код печатает: Hi, Leo

12. Решите проверку существования с помощью includes: includes( ).

Проверка существования значения в массиве является распространенной проблемой. К счастью, в JavaScript есть специальный метод массива includes(), который возвращает логическое значение, если массив содержит искомое значение. Вместо поиска в массиве этот метод обеспечивает эффективное и легко читаемое решение.

const sections = ['contact', 'shipping'];
 
function displayShipping(sections) {
    return sections.includes('shipping');
}
 
console.log(displayShipping(sections));

13. Сократите условные предложения с ложными значениями: !.

В JavaScript есть много значений, которые эквивалентны false для нескольких типов переменных. Это включает в себя:

  • логическое значение false
  • null
  • 0
  • NaN (не число)
  • ' '
  • " "

В JavaScript эквивалент == означает, что два объекта имеют одинаковые значения, но они могут быть разных типов. Идентичный === означает, что два объекта имеют одинаковый тип и одинаковое значение. Но чем это полезно?

Что ж, вместо того, чтобы создавать отдельные переменные для хранения логических значений, вы можете вместо этого использовать приведенные выше значения в качестве значений по умолчанию, чтобы сообщать false, если его ничто не перезаписывает. Рассмотрим этот пример, вам нужно проверить, прошел ли данный сотрудник обучение работе с оборудованием (equipmentTraining). Эта машина требует только самого низкого уровня подготовки, уровень подготовки не имеет значения.

В результате наш оператор if проверяет, имеет ли equipmentTraining еще ложное значение, значение по умолчанию ' '. Если это так, оператор if выполняется и возвращает, что сотрудник не авторизован. Если equipmentTraining содержит любую строку, отличную от строки по умолчанию, она будет иметь истинное значение и, следовательно, не будет выполнять оператор if.

const employee = {
    name: 'Eric',
    equipmentTraining: '',
}
 
if (!employee.equipmentTraining) {
    console.log('Not authorized to operate machinery');
}

14. Совместное использование методов с наследованием: super();

Наследование касается способа совместного использования свойств или методов между классами. Это делается с помощью тега super, чтобы позволить конструктору в FlashCoupon получить доступ к родительскому конструктору в Coupon. При этом вы повышаете читабельность своего кода, определяя методы только один раз (в родительском классе). Это делает ваш код более модульным, поскольку классы-наследники могут быть специализированы для данной задачи.

Обратите внимание, что верхний блок кода устанавливает родительский класс, Coupon, свойства и методы которого являются общими для FlashCoupon, как видно из FlashCoupon, вызывающего метод getExpirationMessage в своей последней строке.

class Coupon {
  constructor(price, expiration) {
    this.price = price;
    this.expiration = expiration || 'Two Weeks';
  }
  getExpirationMessage() {
    return `This offer expires in ${this.expiration}`;
  }
}
export default Coupon;
import Coupon from './extend';
///////////////////////////////////////////////////////////
class FlashCoupon extends Coupon {
    constructor(price, expiration) {
        super(price);
        this.expiration = expiration || 'two hours';
    }
}
 
const flash = new FlashCoupon(10);
console.log(flash.getExpirationMessage());

15. Пишите более короткие циклы с методами массива: =>

Циклы — это распространенный способ создания и заполнения массивов. Однако они вызывают много беспорядка и могут быть трудны для чтения из-за количества требуемых строк.

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

const prices = ['1.0', 'negotiable', '2.15'];
 
const formattedPrices = [];
for (let i = 0; i < prices.length; i++) {
    const price = parseFloat(prices[i]);
    if (price) {
        formattedPrices.push(price);
    }
}
console.log(formattedPrices);

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

const prices = ['1.0', '2.15'];
const formattedPrices = prices.map(price => parseFloat(price));
console.log(formattedPrices)

Подведение итогов и ресурсы

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