Из ИТ-архива Competa; впервые опубликовано Дэнни Корнелиссом 10 января 2018 г.
Когда вы начинаете разрабатывать приложение JavaScript, независимо от используемых вами фреймворков и библиотек, вы должны знать, что Javascript имеет несколько уровней структуры в приложении. Ниже я описываю, какие уровни, по моему мнению, следует учитывать. Это, конечно, мое мнение, но я думаю, что это поможет вам понять, о каком уровне вы говорите, особенно когда спорите с коллегами о стиле кода, структуре и т. д. (что я часто делаю).
Уровень синтаксиса
Уровень синтаксиса JavaScript — самый низкий из возможных. Это набор правил, которых вы должны придерживаться, чтобы написать правильный Javascript. Это может показаться тривиальным, но обратите внимание на разницу между ES5 и ES6, где ES6 предоставляет vars, lets и const. Это важно при создании приложения, и вам могут потребоваться изменения на рабочем уровне, например добавление транспилятора ES6, такого как Babel.
Уровень стиля кода
Это произвольный уровень JavaScript, у каждого свое мнение о том, что такое «красивый» или «читабельный» Javascript. Например, ставите ли вы фигурные скобки на следующей строке? К счастью, такие инструменты, как ESlint, могут помочь сохранить стандарты стиля кода для каждого разработчика в проекте, обеспечивая стиль кода, выдавая ошибки и предупреждения во время компиляции вашего приложения на уровне разработки. Для удобочитаемого Javascript вы и ваши коллеги можете договориться об определенных соглашениях об именах, таких как вызов функции после того, что она на самом деле делает. Например, можете ли вы догадаться, что делает функция login () {// do stuff}?
Уровень области
Область видимости — сложная вещь в JavaScript. Существует глобальная область, а также локальные области, которые могут быть блочными областями, функциональными областями, объектными областями, вложенными областями. Общее правило состоит в том, чтобы не загрязнять глобальную область видимости, за исключением случаев, когда вы используете библиотеки или фреймворки, такие как jQuery или Angular, которые обычно должны быть в глобальной области видимости, чтобы к ним можно было получить доступ из любого места (если вы этого хотите). Таким образом, уровень области действия влияет на уровень библиотеки/фреймворка и наоборот.
Функциональный уровень
На этом уровне вы пишете свой код. Вместо того, чтобы копировать/вставлять фрагмент кода двенадцать раз, напишите цикл for. Вместо того, чтобы дважды писать одну и ту же функцию с одной небольшой разницей, напишите динамическую функцию, которая принимает параметр. Этот уровень тесно взаимодействует с уровнем области, а также с уровнем стиля кода. Вы делаете частную функцию/метод или делаете общедоступной, раскрывая ее через module.exports или шаблон модуля. Вы хотите повторно использовать свою функцию, хотите ли вы прототипно наследовать от объекта или хотите создать полную новую копию функции или объекта с помощью конструктора?
Уровень библиотеки/фреймворка
На этом уровне внешний код JavaScript реализуется в вашем коде. Скорее всего, это «слои» поверх ванильного Javascript. То, как вы их реализуете, зависит от уровня области. Однако почему и как вы их используете, скорее всего, зависит от того, какую функциональность вы хотите закодировать с их помощью. Например, angular идеально подходит для одностраничных приложений (SPA) и реализации шаблона MVC, а jQuery идеально подходит для манипулирования DOM. Кроме того, фреймворки могут поставляться с руководством по стилю, например, с руководством по стилю John Papa Angular 1.x, которое гораздо больше касается уровня стиля кода.
Кроме того, вы можете утверждать, что фреймворки оказывают гораздо большее влияние на структуру вашего JavaScript, поскольку они вынуждают вас кодировать в определенном фреймворке, в то время как библиотеки в основном используются и должны использоваться только как инструмент и не должны влиять на структуру вашего приложения. .
Это также уровень, на котором большинство разработчиков изучают новый фреймворк или библиотеку, но также важно иметь четкое представление о том, как JavaScript ведет себя на других уровнях. Желательно начать с уровня синтаксиса и пройти через уровень области и уровень функций, прежде чем изучать новую библиотеку или платформу.
Уровень разработки
Этот уровень посвящен тому, как выглядит ваша структура во время разработки. Как упоминалось выше, на уровне разработки могут быть линтеры кода, но также важна структура папок и то, как ваша структура папок может быть разделена по функциональности (папка за функцией) или по типу (папка за типом). Другой аспект разработки заключается в том, как включить сценарии поставщиков (через NPM) и протестировать свой код либо модульным тестированием (Karma, Mocha, Jasmine), либо E2E-тестированием (Selenium).
Производственный уровень
Рабочий уровень тесно связан с уровнем разработки, но это уровень, на котором ваше приложение является реальным продуктом, работающим в браузере. На производственном уровне важны минимизация вашего JavaScript (Gulp, Webpack), транспиляция кода для поддержки нескольких браузеров (от ES6 до ES5). Также важно подумать о сценариях поставщиков. Вы включаете их через NPM на свой сервер или получаете их из CDN? Вы объединяете весь свой JavaScript в один app.min.js (это также влияет на уровень области, конечно) или используете загрузчик зависимостей, такой как RequireJS или модули ES6. Эти вещи также могут быть важны для производительности вашего приложения. Сколько времени занимает загрузка скриптов verdor из CDN по сравнению с хостингом самостоятельно? Ваш код вызывает утечку памяти или у вас много объектов в глобальной области видимости?
Как вы понимаете, при написании приложения на JavaScript нужно учитывать множество вещей. Он состоит из множества разных уровней, где важны разные вещи. Проблемы могут возникнуть на каждом уровне, и вы должны убедиться, что смотрите в нужное место. Я, вероятно, забыл некоторые аспекты структуры JavaScript в этом блоге, но я надеюсь, что это поможет вам.
