Одним из самых замечательных аспектов Leaflet является мощная экосистема плагинов. Страница плагинов Leaflet содержит десятки отличных плагинов, и их количество продолжает расти каждую неделю.
Это руководство представляет собой список лучших практик для публикации плагина Leaflet, соответствующего стандартам качества самого Leaflet.
Лучшее место для хранения вашего плагина Leaflet — это отдельный репозиторий GitHub. Если вы создаете коллекцию плагинов для различных целей, не помещайте их в один репозиторий — обычно проще работать с небольшими, самодостаточными плагинами в отдельных репозиториях.### Название
Большинство существующих плагинов следуют конвенции названия плагинов (и репозиториев) в таком формате: Leaflet.MyPluginName
.
Вы можете использовать другие формы (например, "leaflet-my-plugin-name"), просто убедитесь, что в названии содержится слово "Leaflet", чтобы было очевидно, что это плагин для Leaflet.
Самое важное, что следует сделать при публикации плагина, — это предоставить демонстрацию, показывающую, что делает плагин — это обычно первое, что люди ищут.
Самый простой способ размещения демонстрации — использование GitHub Pages.
Хорошим начальным пунктом является создание ветки gh-pages
в вашем репозитории и добавление к ней файла index.html
— после пуша он будет опубликован по адресу http://<user>.github.io/<repo>
.
Следующим необходимым элементом является хороший README.md
в корне репозитория (или ссылка на веб-сайт с похожим содержимым).
Минимально он должен содержать следующие элементы:
Каждый репозиторий с открытым исходным кодом должен включать лицензию.
Если вы не знаете, какую лицензию для открытого исходного кода выбрать для вашего кода,
MIT License и BSD 2-Clause License — оба хорошие варианты.
Вы можете либо добавить её в репозиторий в виде файла LICENSE
, либо просто ссылаться на лицензию из файла Readme.
Поддерживайте чистую и простую структуру файлов, не загромождайте множество файлов в одном месте — делайте так, чтобы новому человеку было легко найти свой путь в вашем репозитории.
Пример базового репозитория для простого плагина выглядит так:
my-plugin.js
README.md
Пример более сложной структуры файлов для плагина:
/src - файлы исходного кода на JavaScript
/dist - минифицированный код плагина, CSS, изображения
/spec - файлы тестирования
/lib - любые внешние библиотеки/плагины, если они необходимы
/examples - HTML примеры использования плагина
README.md
LICENSE
package.json
Вкусы у всех разные, но важно быть последовательным с теми конвенциями, которые вы выбрали для своего плагина.
Для хорошего старта ознакомьтесь с Airbnb JavaScript Guide.
Leaflet придерживается практически тех же конвенций,
кроме использования умных табуляций (твердые табуляции для отступов, пробелы для выравнивания)
и добавления пробела после ключевого слова function
.Имена функций, методов, свойств и фабрик должны быть в camelCase
.
Имена классов должны быть в CapitalizedCamelCase
. Если у вас много аргументов в функции, рассмотрите возможность принятия объекта опций вместо них (установите значения по умолчанию там, где это возможно, чтобы пользователи не были вынуждены указывать все аргументы):
// плохо
marker.myPlugin('bla', 'foo', null, {}, 5, 0);
// хорошо
marker.myPlugin('bla', {
опцияOne: 'foo',
опцияThree: 5
});
И самое главное, держите всё в рамках простоты. Leaflet ориентирован на простоту.
Убедитесь, что ваш контент доступен для пользователей всех слоев общества. Некоторые пользователи могут перемещаться по веб-контенту только с помощью клавиатуры, или должны полагаться на свои программы чтения экрана для передачи визуальной информации. Поэтому важно обеспечить, что компоненты удобны для навигации с клавиатуры, а также, что нераспознаваемые текстовые элементы (например, шрифты иконок и изображения) имеют текстовые альтернативы или скрыты от программ чтения экрана, если они являются чисто декоративными.
Инструменты для автоматизированного тестирования могут помочь вам обнаружить общие проблемы доступности:
Рекомендуется проводить ручное тестирование ваших компонентов только с помощью клавиатуры, а также с использованием программы чтения экрана, такой как Narrator, NVDA, VoiceOver или JAWS.
Документация для начинающих:
Официальная документация:
NPM (Node Packaged Modules) — это менеджер пакетов и репозиторий для JavaScript. Публикация вашего модуля на NPM позволяет другим разработчикам быстро находить и устанавливать ваш плагин, а также любые другие плагины, на которые он зависит.
NPM имеет отличное руководство для разработчиков, чтобы помочь вам пройти через процесс.
При публикации вашего плагина вы должны добавить зависимость на leaflet
в ваш файл package.json
. Это автоматически установит Leaflet при установке вашего пакета.Вот пример файла package.json
для плагина Leaflet.
{
"name": "my-leaflet-plugin",
"version": "1.0.0",
"description": "Простой плагин для Leaflet.",
"main": "my-plugin.js",
"author": "Вы",
"license": "IST",
"peerDependencies": {
"leaflet": "^1.0.0"
}
}
Если возможно, не коммитируйте ваши минифицированные файлы (например, dist
) в репозиторий; это может привести к путанице при попытке отладки неправильного файла. Вместо этого используйте npm
для запуска сборки/минификации сразу перед публикацией вашего пакета с помощью скрипта prepublish
, например:
{
"name": "my-leaflet-plugin",
...
"scripts": {
"prepublish": "grunt build"
}
}
Затем вы можете использовать файл .gitignore
для того, чтобы убедиться, что минифицированные файлы не версионируются, и пустой файл .npmignore
для того, чтобы убедиться, что они публикуются на NPM.
Модульные загрузчики, такие как RequireJS и Browserify, реализуют системы модулей, такие как AMD (Asynchronous Module Definition) и CommonJS, чтобы позволить разработчикам модулировать и загружать свой код.
Вы можете добавить поддержку для загрузчиков AMD/CommonJS к вашему плагину Leaflet, следуя этому шаблону на основе Universal Module Definition
(function (factory, window) {
// определение модуля AMD, который зависит от 'leaflet'
if (typeof define === 'function' && define.amd) {
define(['leaflet'], factory);
} else if (typeof module === 'object' && module.exports) {
module.exports = factory(require('leaflet'));
} else {
window.MyLeafletPlugin = factory(window.L);
}
});
``` // подключите ваш плагин к глобальной переменной 'L'
if (typeof window !== 'undefined' && window.L) {
window.L.YourPlugin = factory(L);
}
}(function (L) {
var MyLeafletPlugin = {};
// реализуйте ваш плагин
// верните ваш плагин после завершения
return MyLeafletPlugin;
}, window));
Теперь ваш плагин доступен как модуль AMD и CommonJS и может использоваться в загрузчиках модулей, таких как Browserify и RequireJS.
Как только ваш плагин будет опубликован, хорошей идеей будет добавить его в список плагинов Leaflet. Для этого:
docs/_plugins/
, скопируйте файл template.md
и добавьте его в папку категории. Затем введите информацию и ссылки о вашем плагине в новый файл плагина.Как только запрос на слияние будет завершен, один из поддерживателей Leaflet быстро проверит ваш плагин, и если все в порядке, ваш плагин появится в списке в ближайшее время.
Вы можете оставить комментарий после Вход в систему
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.
Опубликовать ( 0 )