best_google_pract

Эффективный JavaScript код: 7 лучших практик от Google

Наши соц. сети: instagram, fb, tg

1. Используй фабричную функцию

Если ты не знаешь, что такое фабричная функция, то давай ка разберемся это очень просто. Фабричная функция - функция (которая не является классом или конструктором), она просто возвращает объект и всё. Эта простая концепция позволяет нам использовать преимущества JavaScript и его возможностей для создания мощных и надежных приложений.

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

Зачем она вообще нужна (WTF)? 🤔

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

Когда мы принимаем всё это во внимание и объединяем с best practice по написанию кода, это действительно начинает сиять.

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

Вот простой пример фабричной функции (давай создадим жабу🐸):

function createFrog(name) {
const children = []
return {
frogName: name,
addChild(frog) {
children.push(frog)
},
}
}
const mikeTheFrog = createFrog('mike')

 

console.log(mikeTheFrog.name) // mike
 

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

2. Добавьте методы в .prototype при написании конструкторов

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

(Имей в виду, что это не относится к классам, потому что классы уже прикрепляют методы к своим прототипам.)

Вот пример конструктора:

function Frog(name, gender) {
this.name = name
this.gender = gender
}
Frog.prototype.leap = function(feet) {
console.log(`Leaping ${feet}ft into the air`)
}

Почему именно так, а не непосредственно присоединяя метод leap, как в примере ниже?

function Frog(name, gender) {
this.name = name
this.gender = gender
this.leap = function(feet) {
console.log(`Leaping ${feet}ft into the air`)
}
}

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

Другими словами, используя последний пример, если мы создали три отдельных лягушки (из this.leap = function () {...}), то в итоге мы создадим три отдельные копии метода leap. Это проблема, представь, что ты хочешь собрать свою армию из 100500 жаб. Для каждой созданной жабы создастся свой метод leap, что будет ужасно😱, с точки зрения занимаемой памяти. Ведь метод leap всегда будет оставаться неизменным для жаб и не должен иметь свою собственную копию для каждого экземпляра класса.

В конечном итоге это приводит к снижению производительности, чего можно было бы избежать. Свойства this.name и this.gender должны быть определены в экземпляре, потому что в реальной жизни лягушки, вероятно, имеют свои собственные имена и пол, поэтому имеет смысл создавать их на уровне экземпляра.

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

3. Используйте обычное свойство .type при дифференцировании

Эта практика работает настолько хорошо, что сегодня её юзают почти все. Если ты разработчик React, ты, вероятно, уже видел это, в частности при работе с Redux (ну а если нет, то всё ещё впереди😉).

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

function createSpecies(type, name, gender) {
if (type === 'frog') {
return createFrog(name, gender);
} else if (type === 'human') {
return createHuman(name, gender);
} else if (type == undefined) {
throw new Error('Cannot create a species with an unknown type');
}
}
const myNewFrog = createSpecies('frog', 'sally', 'female');

4. Используй TypeScript

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

Использование TypeScript позволит вашему компилятору обнаруживать и отображать предупреждения о любых потенциальных ошибках в коде ещё до его запуска.

Но это даже не близко к полному списку причин, почему TypeScript харош в любой ситуации. Одна из лучших особенностей TypeScript - это то, что он позволяет использовать новые функции в JavaScript, прежде чем они будут поддерживаться основными браузерами, поскольку они компилируются в более ранние версии JavaScript, что в конечном итоге позволяет работать в старых браузерах (интерфейсы, enum`ы и т. д.)

5. Пиши тесты

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

Что ж такого хорошего в этих тестах? Просто тот факт, что они могут помочь тебе поймать ошибки до того, как эти ошибки появятся, неужели никому не нужна эта способность? Я уверен, в том, что я делаю! Вот почему я пишу модульные тесты в своих проектах.

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

6. Делай функции максимально простыми (ещё один очевидный совет 😑)

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

Когда ты новичок в программировании, это может показаться не плохой идеей - я помню, что чувствовал себя великим кодером, когда писал большие куски кода, которые работали. В основном это имело значение лично для меня и давало мне большую уверенность в том, что любой мой код будет работать без проблем, не говоря уже о том, что я написал огромные блоки кода. Оh my god, я был таким наивным!

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

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

7. Всегда юзай try / catch при использовании JSON.parse или JSON.stringify

В JavaScript, когда мы передаем JSON в качестве входных данных методу JSON.parse, он ожидает правильно отформатированный JSON в качестве первого аргумента. Если он отформатирован неверно, то будет ошибка синтаксического анализа JSON, которая может привести к потере денег -> клиентов -> продаж -> банкротству компании -> поиску новой работы (а этого нам не хотелось бы).

cat

Опасность, возникающая из-за ошибок синтаксического анализа JSON, заключается в том, что получение неверного JSON приводит к сбою приложения. Недавно я попал в ситуацию, когда один из наших веб-проектов не работал, потому что другой внутренний пакет не обернул JSON.parse в try/catch. Это привело к сбою веб-страницы, и не было возможности обойти эту ошибку, поскольку ее не исправил внутренний пакет. Среда выполнения JavaScript была нарушена.

SyntaxError: Unexpected token } in JSON at position 107

Не следует всегда ожидать корректного ввода JSON, поскольку он может принимать странные символы, такие как символ >, который встречается достаточно часто.

Вывод

И это завершает эту часть. Я надеюсь, ты нашел здесь полезную инфу. Дальше больше!