JavaScript: Стандартная библиотека
JavaScript, как и любой другой язык, поставляется с набором полезных функций. Все вместе они составляют так называемую стандартную библиотеку. В неё обычно входят тысячи функций, которые невозможно выучить — этого и не нужно делать. Подразумевается, что любой программист знает, где искать документацию по ним и примерно представляет себе, чего он хочет достичь. А дальше — дело техники. Если отнять у программистов интернет, то большинство не сможет ничего запрограммировать.
Для новичков эта информация часто выглядит так: «Сходи туда, не знаю куда, принеси то, не знаю что». То есть непонятно, как узнавать про эти функции, когда ты ничего не знаешь вообще. Как ни странно, не существует способа раз и навсегда познать всё, что нужно познать. Любой разработчик в процессе своего профессионального взросления знакомится со всё более интересными функциями, решающими его задачи более элегантно, и таким образом пополняет свой арсенал.
Вот некоторые советы, как узнавать о новых функциях:
- Всегда чётко отслеживайте, с чем вы сейчас работаете (какой тип данных). Почти всегда вы найдете необходимую функцию в соответствующем разделе документации — например, для работы со строками нужно изучать строковые функции.
- Периодически открывайте раздел со стандартными функциями по изучаемой тематике и просто пробегайтесь по ним, изучая сигнатуры и способы использования.
- Чаще читайте чужой код, особенно код библиотек, которые вы используете. Он весь доступен на GitHub.
У JavaScript есть свои особенности по структуре стандартной библиотеки. Так как его код может исполняться в разных средах, таких как серверное окружение или браузер, то возможности стандартной библиотеки сильно зависят от варианта использования. Например, из браузера невозможно выполнять некоторые задачи, которые необходимо уметь выполнять на сервере. Документацию по серверной части необходимо смотреть на сайте https://nodejs.org. Серверные части стандартной библиотеки организованы в модули, у каждого модуля есть своя страница с описанием всех функций, находящихся внутри него. Например, модуль fs необходим для работы с файловой системой, через его функции происходит запись и чтение файлов.
Если говорить про браузер, то там вообще мало что есть. По большей части это какие-то базовые функции, встроенные в сам язык — например те же функции для работы с математикой. Остальные возможности добавляются через использование сторонних библиотек.
Задание
Оператор typeof позволяет определить тип передаваемого операнда. Название типа возвращается в виде строки. Например, вызов typeof ‘go go go’ вернёт строку ‘string’ (number — число).
console.log(typeof 3); // => 'number' Выведите на экран тип значения константы motto .
Упражнение не проходит проверку — что делать? ��
Если вы зашли в тупик, то самое время задать вопрос в «Обсуждениях». Как правильно задать вопрос:
- Обязательно приложите вывод тестов, без него практически невозможно понять что не так, даже если вы покажете свой код. Программисты плохо исполняют код в голове, но по полученной ошибке почти всегда понятно, куда смотреть.
В моей среде код работает, а здесь нет ��
Тесты устроены таким образом, что они проверяют решение разными способами и на разных данных. Часто решение работает с одними входными данными, но не работает с другими. Чтобы разобраться с этим моментом, изучите вкладку «Тесты» и внимательно посмотрите на вывод ошибок, в котором есть подсказки.
Мой код отличается от решения учителя ��
Это нормально ��, в программировании одну задачу можно выполнить множеством способов. Если ваш код прошел проверку, то он соответствует условиям задачи.
В редких случаях бывает, что решение подогнано под тесты, но это видно сразу.
Прочитал урок — ничего не понятно ��
Создавать обучающие материалы, понятные для всех без исключения, довольно сложно. Мы очень стараемся, но всегда есть что улучшать. Если вы встретили материал, который вам непонятен, опишите проблему в «Обсуждениях». Идеально, если вы сформулируете непонятные моменты в виде вопросов. Обычно нам нужно несколько дней для внесения правок.
Кстати, вы тоже можете участвовать в улучшении курсов: внизу есть ссылка на исходный код уроков, который можно править прямо из браузера.
Полезное
- Описание строковых функций
- Как искать техническую информацию
Определения
- Стандартная библиотека — набор полезных функций, входящий в комплект поставки языка программирования.
Основные библиотеки и фреймворки JavaScript, которые вы должны знать
JavaScript существует уже более 20 лет, и это один из тех языков, которые никогда не перестают развиваться. В последнее время язык быстро развивается, что заставляет меня задаться вопросом, будут ли современные технологии JavaScript для начинающих, которые хорошо известны сегодня, актуальными через пару лет.
Тем не менее, важно быть впереди, работая с новейшими инструментами и фреймворками для улучшения рабочего процесса разработки. В этой статье рассматриваются различные библиотеки JavaScript, фреймворки и инструменты, которые вы должны изучать прямо сейчас.
Введение
Среда JavaScript стала огромной. Она имеет собственную экосистему библиотек, фреймворков, инструментов, менеджеров пакетов и новых языков, которые компилируются в JavaScript. Интересно, что npm, который является де-факто-менеджером пакетов для JavaScript, также является крупнейшим в мире реестром программного обеспечения. Вот выдержка из публикации, опубликованной на Linux.com еще в январе 2017 года.
В более чем 350 000 пакетов содержит реестр npm, что более чем вдвое больше, чем следующий наиболее популярный реестр пакетов (который является репозиторием Apache Maven). Фактически, в настоящее время это самый крупный реестр пакетов в мире.
Перенеситесь вперед на восемь месяцев, и в настоящее время в реестре npm есть около 500 000 пакетов. Это огромный рост по сравнению с другими репозиториями пакетов.
Будучи разработчиком JavaScript на начальном этапе, важно не отставать от современных инструментов и библиотек JavaScript. Когда технология становится популярной, спрос на нее высок, что, в свою очередь, означает больше заданий по написани кода, где платят самую высокую зарплату в отрасли. Поэтому я собрал список популярных технологий JavaScript, которые, как я думаю, вам следует знать.
Библиотеки
Библиотека является многоразовой частью кода, которая предлагает определенные функции. Это набор функций, объектов и классов, которые вы можете использовать в своем приложении. Библиотека абстрагирует различные слои, так что вам не нужно беспокоиться об их деталях реализации.
Вы можете вызвать библиотечную функцию и передать ей некоторые параметры, и библиотека выполнит ее и вернет вам элемент управления. Тем не менее, это не создает каких-либо структурных ограничений, которые ограничивают использование библиотеки. Популярные библиотеки JavaScript включают:
React
React — это библиотека JavaScript, созданная разработчиками Facebook и Instagram. Согласно опросу Stack Overflow Survey 2017, React был признан самой популярной технологией среди разработчиков. React также имеет честь быть самым популярным проектом JavaScript, согласно количеству звезд на GitHub.
Так почему React получает все внимание? С помощью React можно создать интерактивный интерфейс с использованием декларативного подхода, в котором вы можете контролировать состояние приложения, говоря: «Представление должно выглядеть так». Он использует компонентную модель, в которой компоненты являются повторно используемыми элементами пользовательского интерфейса, и каждый компонент имеет свое собственное состояние.
React использует виртуальную модель DOM, так что вам не нужно беспокоиться о прямом манипулировании с DOM. Другие примечательные особенности React включают однонаправленный поток данных, дополнительный синтаксис JSX и инструмент командной строки для создания проекта React с нуля.
Если вы считаете, что «React» — это лучшая вещь, и вы хотели бы изучить « React», ознакомьтесь с нашей учебной серией «React Crash Course for Beginners».
JQuery
jQuery — это библиотека, которая сделала JavaScript более доступным а DOM-манипуляцией проще, чем раньше. Плавная кривая обучения jQuery и простой синтаксис породили на стороне клиента новое поколение новых разработчиков. Несколько лет назад jQuery считался прочным решением для создания надежных веб-сайтов с поддержкой кросс-браузерности. Основные функции jQuery, такие как манипулирование DOM на основе селекторов CSS, обработка событий и создание вызовов AJAX, подпитывали его популярность.
Однако все изменилось, и среда JavaScript постоянно развивается. Некоторые функции jQuery были включены в новую спецификацию ECMAScript. Более того, новые библиотеки и фреймворки, используемые сегодня, имеют собственный способ связывания DOM, и поэтому простые методы манипуляции с DOM больше не требуются. Популярность jQuery находится на спаде, но я не вижу, чтобы эта библиотека исчезла в ближайшее время.
D3: Документы, управляемые данными
D3 (или D3.js) — мощная библиотека JavaScript для создания интерактивных визуализаций с использованием веб-стандартов, таких как SVG, HTML и CSS. В отличие от других библиотек визуализации, D3 предлагает лучший контроль над окончательным визуальным результатом.
D3 работает, связывая данные с DOM и затем преобразуя их в документ. Она также имеет собственную экосистему, которая состоит из плагинов и библиотек, которые расширяют ее базовые функциональные возможности. Библиотека существует с 2011 года, и в ней есть множество документации и учебников, которые помогут вам начать работу.
Если вы хотите создать простые визуализации, не вкладывая слишком много времени в это, вы должны обратить внимание на Chart.js. У нас есть вводная серия про Chart.js, которая охватывает большинство визуализаций, которые вы можете создать с помощью Chart.js
Фреймворки
Фреймворк имеет архитектуру, которая диктует поток управления в вашем приложении. Фреймворк описывает скелет и рассказывает вам, как все должно быть организовано. Вам также предоставляются основные функции, необходимые для запуска вашего приложения. Кроме того, вы обязаны следовать принципам и шаблонам фреймворка. Разница между фреймворком и библиотекой заключается в том, что вы вызываете библиотеку, тогда как фреймворк вызывает вас.
Фреймворк часто включает в себя множество библиотек и имеет более высокий уровень абстракции. Функциональность, такая как обработка событий, создание вызовов AJAX, привязка шаблонов и данных и тестирование, уже встроены в фреймворк.
Angular
AngularJS когда-то была самой популярной технологией JavaScript среди разработчиков интерфейсов. Он был поддержан Google и сообществом частных лиц и корпораций. Несмотря на популярность, у AngularJS была своя доля недостатков. Команда Angular провела два года работы над новой версией Angular, которая была наконец выпущена в сентябре 2016 года.
Выпуск Angular 2 был переделкой AngularJS. Некоторые из функций Angular 2 включают:
- TypeScript над JavaScript как язык по умолчанию
- компонентная архитектура
- улучшенная производительность как на мобильных, так и на веб-платформах.
- лучшие инструменты и варианты исходных каркасов
Тем не менее, модернизация от Angular 1.x до Angular 2 является дорогостоящей, потому что Angular 2 — совершенно другой зверь. Это одна из причин, почему Angular 2 не был так сразу же принят, как свой предшественник. Но Angular и AngularJS по-прежнему относятся к числу наиболее часто используемых технологий в соответствии со Stack Overflow (2017). Проект Angular имеет около 28 000 звезд в GitHub.
Vue.js
Vue.js — это легкий JavaScript фреймворк, который активно развивается в этом году. Это самый популярный JavaScript фреймворк на GitHub с точки зрения звезд GitHub. Vue утверждает, что это менее упрямый фреймворк и, таким образом более удобный в использовании. Синтаксис шаблона на основе HTML Vue связывает отрисовываемый DOM с данными экземпляра.
Фреймворк предлагает опыт, похожий на React, с его виртуальными DOM и компонентами повторного использования, которые можно использовать для создания как виджетов, так и целых веб-приложений. Кроме того, вы также можете использовать синтаксис JSX для непосредственного написания функций рендеринга. Когда состояние изменяется, Vue.js использует систему реактивности, чтобы определить, что изменилось и перерисовывает минимальное количество компонентов. Vue.js также поддерживает интеграцию других библиотек во фреймворк без особых хлопот.
Ember.js
Ember.js является фронт-енд фреймворком на основе шаблона Model-View-ViewModel (MVVM). Фреймворк использует стандартный подход к конфигурации, который популярен среди серверных фреймворков таких как Ruby on Rails и Laravel. Ember.js включает в себя общие идиомы и лучшие практики фреймворков, чтобы вы могли получать приложение без особых усилий.
Стек Ember обычно включает:
- Ember CLI: предоставляет основные варианты каркаса приложения и поддерживает сотни надстроек.
- Ember Data: библиотека сохранения данных, которая может быть настроена для работы с любым сервером.
- Ember Inspector: расширение доступное для Chrome и Firefox.
- Liquid Fire: дополнение для переходов и анимаций.
Инструменты
Инструмент представляет собой набор подпрограмм, которые помогут вам в процессе разработки. В отличие от библиотеки, инструмент обычно выполняет задачу над клиентским кодом. Он берет ваш код в качестве входных данных, выполняет на нем задачу, а затем возвращает результат. Обычно используемые инструменты включают в себя транспайлеры и инструменты для сборки, сборщики ресурсов и другие.
Инструменты: выполнение общих задач
Инструменты, выполняющие общие задачки — это инструменты, используемые для автоматизации определенных повторяющихся задач. В число самых популярных входят:
Gulp
Gulp — это набор инструментов JavaScript, который используется как менеджер задач и как система сборки в веб-разработке. Компиляция, минимизация кода, оптимизация изображений, модульное тестирование, линтинг и т.д. — это повторяющиеся задачи, которые должны быть автоматизированы. Gulp упрощает процесс написания задач даже для людей, которые менее знакомы с JavaScript.
Gulp использует конвейеры для потоковой передачи данных из одного плагина в другой, и конечный результат выводится в папку назначения. Gulp работает лучше по сравнению с Grunt, потому что он не создает временные файлы для хранения промежуточных результатов, что приводит к меньшему количеству вызовов ввода-вывода.
Grunt
Grunt — это менеджер задач и инструмент автоматизации JavaScript. Grunt имеет интерфейс командной строки, который позволяет запускать настраиваемые задачи, определенные в файле, называемом Gruntfile. У Grunt есть тысячи плагинов на выбор, которые должны охватывать большинство обычных повторяющихся задач, с которыми вы столкнулись. С помощью Grunt вы можете запускать все задачи под одной командой, что упрощает вашу жизнь.
npm
Gulp и Grunt требуют, чтобы вы потратили время на изучение и освоение нового инструмента, что требует времени. Ввод дополнительных зависимостей в ваш проект можно избежать, выбирая альтернативу, которая уже связана с Node.js. Хотя npm более известен как менеджер пакетов, сценарии npm можно использовать для выполнения основной части вышеупомянутых задач.
Инструменты: тестирование
Тестирование — это процесс проверки и валидации того, что приложение соответствует ожидаемым бизнес и техническим требованиям. Подход, основанный на тестах, также помогает обнаруживать ошибки и, следовательно, его следует рассматривать как неотъемлемую часть современного процесса разработки.
Jest
Jest — это относительно новый фреймворк для тестирования, созданный в Facebook и хорошо принятый сообществом React. Существует распространенное заблуждение, что Jest специально разработан для работы с React; однако, согласно документации Jest:
Несмотря на то, что Jest можно рассматривать как фреймворк тестирования специфичный для React, на самом деле это универсальная платформа тестирования, способная адаптироваться к любой библиотеке или фреймворку JavaScript. Вы можете использовать Jest для тестирования любого кода JavaScript.
Самое большое преимущество использования Jest над другими наборами тестов заключается в том, что вам требуется нулевая или минимальная конфигурация для того чтобы начать писать тесты. Фреймворк имеет встроенную библиотеку утверждений и поддерживает использование мок функций или шпионов.
Jest имеет функцию под названием snapshot testing, которая позволяет гарантировать, что пользовательский интерфейс приложения неожиданно не изменится. Разработчики в Facebook и другие участники недавно вложили много работы в этот проект, поэтому не удивительно, что Jest окажется самой популярной тестовой платформой для JavaScript в ближайшие годы.
Mocha
Mocha — это фреймворк для тестирования JavaScript, который предоставляет поддержку браузера, асинхронные вызовы, включая обещания, отчеты о тестовом покрытии и JavaScript API для запуска тестов. Mocha часто используется с библиотекой утверждений, такой как Chai, should.js, expect.js или better-assert, потому что у нее нет собственной библиотеки утверждений.
Jasmine
Jasmine — это фреймворк для тестирования JavaScript, ориентированный на поведение. Jasmine стремится стать браузером, платформой и независимым от платформы набором тестов. У Jasmine есть своя собственная библиотека утверждений, называемая matchers, которая дает ему чистый и легко читаемый синтаксис. Jasmine не имеет встроенной команды для выполнения тестов, и вам, возможно, придется использовать какую-нибудь общую, например, Karma.
Резюме
JavaScript, язык Интернета, остался актуальным со времен его создания еще в 1995 году. Вероятно, он останется таким же, пока браузеры не решат отказаться от него в пользу какого-нибудь другого языка. Несмотря на то, что существует множество других языков, которые скомпилируются с использованием JavaScript, нет другого языка сценариев, который заменит JavaScript в обозримом будущем. Почему? Потому что JavaScript стал слишком популярным, чтобы его можно было заменить.
Язык не лишен кривых обучения, и есть множество фреймворков и библиотек, которые смогут вас занять. Если вы ищете дополнительные ресурсы для изучения или использования в своей работе, ознакомьтесь с тем, что у нас есть на рынке Envato.
Среда JavaScript определенно развивается, что видно из текущих тенденций в веб-разработке. Старые библиотеки и фреймворки были заменены новыми технологиями. jQuery, которая когда-то была наиболее популярной библиотекой JavaScript, испытывает спад с точки зрения привлекательности, использования и популярности. Новое поколение фронт-енд библиотек, фреймворков и инструментов набирает силу и получает всеобщее признание.
Привыкание к новым тенденциям в технологии также имеет свои преимущества. Задачи по написанию кода, требующие знания React, имеют одни из самых высоких зарплат в отрасли со средней зарплатой в размере 105 000 долларов США в соответствии с Stack Overflow (2016). Поэтому вам нужно продолжить обучение и экспериментировать с новейшими инструментами и фреймворками, чтобы максимально использовать JavaScript.
Если вы считаете, что я пропустил фреймворк JavaScript, библиотеку или инструмент, о которых стоит упомянуть, дайте мне знать в комментариях.
Дальнейшее чтение
- Модули, будущий подход к библиотекам JavaScript
- Вопрос: выберите подходящий фреймворк JavaScript для вашего проекта
- Изучение компьютерной науки с помощью JavaScript
- 6 вещей, которые делают Yarn лучшим менеджером пакетов JavaScript
Полезные JavaScript-библиотеки
Не стоит недооценивать силу простоты. Пожалуй, сложно представить себе, что на чистом JavaScript реализовано что-то вроде системы push-уведомлений, работающей в реальном времени, или инструмент для работы с базами данных, или полноценный текстовой редактор. Но подобные проекты существуют и позволяют решать множество актуальных задач. В этом материале речь пойдёт о нескольких весьма полезных библиотеках, которые подключаются к страницам в виде обычных JavaScript-файлов. При рассказе о каждой из них я постараюсь выделять их особенности и приводить примеры их использования.
Библиотека Push.js
Однажды я прямо-таки сбилась с ног в поисках хорошего руководства по инструментам для реализации push-уведомлений. В итоге меня выручила библиотека Push.js, среди сильных сторон которой можно отметить простую документацию, понятную даже начинающему разработчику.
Сайт библиотеки Push.js
Для того чтобы ей воспользоваться — надо начать с обычного HTML-файла. Далее — её нужно к этому файлу подключить. Сделать это можно, либо воспользовавшись соответствующим NPM-пакетом, либо загрузив из её GitHub-репозитория необходимые файлы, например — в виде .zip-архива. После этого нужно поместить файлы библиотеки push.min.js и serviceWorker.min.js в директорию проекта.
Вот пример кода HTML-страницы, в которой используется эта библиотека:
Push notification implementation
Click on this button to view notification
Start 
Страница, использующая push.js
Библиотека Editor.js
Вот — ещё одна замечательная библиотека — Editor.js. В нашем проекте довольно часто возникает необходимость в текстовом редакторе, а Editor.js — это простая и привлекательная JS-библиотека, реализующая как раз то, что нам нужно. Её можно использовать в проектах, написанных на чистом JavaScript, и в проектах, основанных на каких-либо фреймворках, вроде React. Редактор позволяет форматировать текст, например — делать его полужирным или курсивным, поддерживает оформление заголовков и много чего ещё. Тому, кто хочет воспользоваться Editor.js, достаточно бегло просмотреть документацию, после чего у него будет общее понимание того, что нужно делать. Для установки библиотеки можно воспользоваться NPM-пакетом или подключить её с CDN-ресурса.
Сайт библиотеки Editor.js
Вот код файла index.html из проекта, в котором используется Editor.js:
Enter your content here
Вот — код index.js :
try < var editor = new EditorJS(< holderId : 'editorjs', placeholder: 'Let`s write an awesome story!', autofocus: true, >); editor.isReady .then(() => < console.log("Editor.js is ready to work!"); >) .catch((reason) => < console.log(`Editor.js initialization failed because of $`); >); const btn = document.getElementById("button"); btn.addEventListener("click", function () < editor.save().then((outputData) =>< console.log('Article data: ', outputData) >).catch((error) => < console.log('Saving failed: ', error) >); >); > catch (reason) < console.log(`Editor.js initialization failed because of $`); > Если, сразу после того, как библиотека подключена, попытаться ей воспользоваться, ничего не получится, так как, прежде чем с ней можно будет работать, нужно выполнить некоторые настройки. Собственно говоря — это и делается в вышеприведённом коде файла index.js , который вы можете рассматривать как пример, интегрируя Editor.js в свой проект. При этом редактор поддерживает массу настроек (например — настройки заголовков и списков), освоить которые можно, обратившись к документации. Вот пример настроек редактора:
import Header from '@editorjs/header'; import List from '@editorjs/list'; import MyParagraph from 'my-paragraph.js'; const editor = new EditorJS(< tools: < header: Header, list: List, myOwnParagraph: MyParagraph >, defaultBlock: "myOwnParagraph" >) Вот как редактор выглядит на странице.
Редактор на странице
Библиотека Howler.js
Вы, вероятно, пользовались в своих проектах HTML-элементами, предназначенными для работы со звуками и видеозаписями. Библиотека Howler.js направлена на решение различных задач, связанных со звуком. К ней подготовлена хорошая документация.
Сайт библиотеки Howler.js
Вот фрагмент кода, демонстрирующий работу с этой библиотекой:
Использование Howler.js
Библиотека Reveal.js
Вы когда-нибудь задумывались о том, что настанет день, когда вы сможете создавать презентации, используя JavaScript? В общем-то, этот день, благодаря замечательной библиотеке Reveal.js, уже настал. Я просто не могу не рассказать о ней.
Сайт библиотеки Reveal.js
Её, как и другие подобные библиотеки, можно установить в виде NPM-пакета, или можно просто скачать её материалы из GitHub-репозитория и подключить соответствующие .js и .css-файлы к странице.
Вот стили Reveal.js:
Вот команды подключения .js-файлов библиотеки и код её инициализации:
Теперь поговорим, собственно, о слайдах, из которых состоят презентации, создаваемые с помощью Reveal.js.
В файле index.html , в теге , создадим элемент , именем класса которого является reveal , и вложим в него ещё один элемент , назначив ему класс slides . В этот добавим элементы , в которых будем описывать содержимое слайдов.
Slide 1
This is an amazing library
Slide 2
You can just play around with a lot of stuff
Slide 3
That's it for the slide Show
Использование Reveal.js для оформления презентации
Библиотека Chart.js
Презентации неразрывно связаны с выводом разного рода диаграмм. Существует потрясающая JavaScript-библиотека Chart.js, предназначенная для представления данных с помощью диаграмм. В частности, она позволят строить столбчатые, круговые, точечные диаграммы и диаграммы других видов.
Сайт библиотеки Chart.js
Вот код, демонстрирующий создание круговой диаграммы с помощью Chart.js:
var ctx = document.getElementById('myChart').getContext('2d'); var myChart = new Chart(ctx, < type: 'pie', data: < labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'], datasets: [< label: '# of Votes', data: [12, 19, 3, 5, 2, 3], backgroundColor: [ 'rgba(255, 99, 132, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(255, 206, 86, 0.2)', 'rgba(75, 192, 192, 0.2)', 'rgba(153, 102, 255, 0.2)', 'rgba(255, 159, 64, 0.2)' ], borderColor: [ 'rgba(255, 99, 132, 1)', 'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)', 'rgba(75, 192, 192, 1)', 'rgba(153, 102, 255, 1)', 'rgba(255, 159, 64, 1)' ], borderWidth: 1 >] >, options: < scales: < y: < beginAtZero: true >> > >); Какими JavaScript-библиотеками вы пользуетесь в своих проектах?
- JavaScript
- разработка
- ruvds_перевод
Создание надежной библиотеки JavaScript: пошаговое руководство
Библиотеки JavaScript — важный инструмент любого веб-разработчика: готовый код легко включается в проект, за счет этого экономятся силы и время. Пройдем процесс создания одной из них с нуля — от настройки проекта до распространения и сопровождения.
Сделаем библиотеку служебных функций для упрощения работы с массивами: мы часто пишем в проектах подобные. Целевая аудитория — веб-разработчики, намеренные оптимизировать код и повысить эффективность.
Эта библиотека многократного использования, а значит, не только экономится время, но и повышается согласованность кода.
Настройка проекта
Прежде чем писать код, настроим проект: мы назвали его array-utils, создали репозиторий на GitHub, настроили процесс сборки с Webpack, выбрали инструмент тестирования Jest. Внешних зависимостей у библиотеки нет, поэтому устанавливать ничего не нужно.
Создание API
Определим основную функциональность библиотеки и сделаем ее API. Для этого организуем код в виде модулей, функций или классов и выберем для каждого компонента информативные, интуитивно понятные имена.
Помимо обычных функций фильтрации, сопоставления, свертки, включим в библиотеку и служебные для проверки типа и длины массива.
Чтобы импортировалась не вся библиотека, а только нужные функции, организуем код в единый модуль, где каждая функция — отдельный экспорт.
Реализация
Создав API, приступим к реализации библиотеки. Для каждого компонента пишем код согласно лучшим практикам, при необходимости снабжая его комментариями. Включим также примеры использования библиотеки в реальных приложениях.
Вот одна из функций библиотеки array-utils:
export function filter(array, callback) const result = [];
for (let i = 0; i < array.length; i++) if (callback(array[i], i, array)) result.push(array[i]);
>
>
return result;
>
Это повторная реализация встроенной функции Array.filter, но с более простым API. Ею принимаются массив и функция обратного вызова. Возвращается новый массив, но лишь с теми элементами, для которых обратным вызовом вернулось true .
Тестирование и отладка
Перед выпуском библиотеки обеспечиваем ее надежность и стабильность, выполняя тщательное тестирование и отладку. Для этого пишем модульные тесты, которыми охватывается вся функциональность библиотеки.
Этими небольшими изолированными тестами проверяется поведение одного компонента кода. Напишем тест для функции фильтрации, которым проверяется корректность фильтрации массива чисел на основе заданного обратного вызова:
import < filter >from 'array-utils';
test('filter function', () => const array = [1, 2, 3, 4, 5];
const result = filter(array, x => x % 2 === 0);
expect(result).toEqual([2, 4]);
>);
Если при тестировании обнаруживаются проблемы, в ходе отладки находим их причину и решение. Понадобятся операторы console.log для вывода значений переменных или отладчик для построчного разбора кода.
Убедившись в корректной работе библиотеки, переходим к следующему этапу.
Документирование
Выполнив тестирование и отладку библиотеки, обеспечиваем четкую и лаконичную документацию каждого компонента с описанием его функционала, примерами и пояснениями входных и выходных данных, пограничных случаев.
Для документирования библиотек применяется JSDoc. Документация генерируется им на основе считываемых в коде комментариев. Вот пример документирования функции фильтрации с помощью JSDoc:
/**
* Массив фильтруется на основе заданной функции обратного вызова.
* @param array — это фильтруемый массив.
* @param callback — это функция обратного вызова для проверки каждого элемента.
* @returns — новый массив, но лишь с элементами, для которых обратным вызовом вернулось true.
* @example
* const array = [1, 2, 3, 4, 5];
* const result = filter(array, x => x % 2 === 0);
* console.log(result); // [2, 4]
*/
export function filter(array, callback) // реализация функции находится здесь
>
Кроме документирования каждого компонента, указываются возможности участия в проекте библиотеки: как сообщать о багах, запрашивать функции или отправлять запросы на включение изменений в репозиторий.
Распространение и сопровождение
Библиотека полностью реализована, протестирована и задокументирована. Пора явить ее миру, упаковав для распространения через npm или другой диспетчер пакетов.
Чтобы упаковать библиотеку для npm, создается файл package.json, в котором содержатся ее название, версия и зависимости. Затем командой npm publish пакет загружается в реестр npm.
После публикации библиотеки нам остается ее сопровождать, отвечая на сообщения пользователей об ошибках и запросы на включение изменений в репозиторий. Стоит подумать и о выпуске обновлений библиотеки — для устранения багов и добавления нового функционала.
Заключение
Создание библиотеки JavaScript — полезный процесс для обмена знаниями и кодом с широким кругом разработчиков. Следуя описанному в этой статье, вы создадите надежную, хорошо документированную библиотеку, которую легко использовать и развивать.
- Полное руководство по “this” в JavaScript
- Создавайте веб-приложения, которые умеют слушать! ?
- Заменит ли аутентификация по лицу традиционную систему веб-аутентификации
Читайте нас в Telegram, VK и Дзен