Библиотеки 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} array — это фильтруемый массив.
* @param {Function} callback — это функция обратного вызова для проверки каждого элемента.
* @returns {Array} — новый массив, но лишь с элементами, для которых обратным вызовом вернулось 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 и Дзен
Перевод статьи Yasmin Rodriguez: Creating a Reliable JavaScript Library: A Step-by-Step Guide
