1 В избранное 0 Ответвления 0

OSCHINA-MIRROR/lianggit-Leaflet

Клонировать/Скачать
PLUGIN-GUIDE.md 16 КБ
Копировать Редактировать Web IDE Исходные данные Просмотреть построчно История
Отправлено 04.06.2025 22:28 e9479ee

Пособие по созданию плагинов для Leaflet

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

Это руководство представляет собой список лучших практик для публикации плагина Leaflet, соответствующего стандартам качества самого Leaflet.

  1. Презентация
  2. Код
  3. Доступность содержимого
  4. Публикация на NPM
  5. Модульные загрузчики
  6. Добавление в список плагинов

Презентация

Репозиторий

Лучшее место для хранения вашего плагина Leaflet — это отдельный репозиторий GitHub. Если вы создаете коллекцию плагинов для различных целей, не помещайте их в один репозиторий — обычно проще работать с небольшими, самодостаточными плагинами в отдельных репозиториях.### Название

Большинство существующих плагинов следуют конвенции названия плагинов (и репозиториев) в таком формате: Leaflet.MyPluginName. Вы можете использовать другие формы (например, "leaflet-my-plugin-name"), просто убедитесь, что в названии содержится слово "Leaflet", чтобы было очевидно, что это плагин для Leaflet.

Демо

Самое важное, что следует сделать при публикации плагина, — это предоставить демонстрацию, показывающую, что делает плагин — это обычно первое, что люди ищут.

Самый простой способ размещения демонстрации — использование GitHub Pages. Хорошим начальным пунктом является создание ветки gh-pages в вашем репозитории и добавление к ней файла index.html — после пуша он будет опубликован по адресу http://<user>.github.io/<repo>.

README

Следующим необходимым элементом является хороший README.md в корне репозитория (или ссылка на веб-сайт с похожим содержимым). Минимально он должен содержать следующие элементы:

  • имя плагина
  • простое, краткое описание того, что он делает
  • требования
    • версия Leaflet
    • другие внешние зависимости (если есть)
    • совместимость с браузерами / устройствами
  • ссылки на демонстрационные примеры
  • инструкции по включению плагина
  • простой пример кода использования
  • справочник по API (методы, опции, события)### Лицензия

Каждый репозиторий с открытым исходным кодом должен включать лицензию. Если вы не знаете, какую лицензию для открытого исходного кода выбрать для вашего кода, 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

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. Для этого:

  • Создайте форк репозитория Leaflet.
  • В папке docs/_plugins/, скопируйте файл template.md и добавьте его в папку категории. Затем введите информацию и ссылки о вашем плагине в новый файл плагина.
  • Закоммитте код в вашем форке.
  • Откройте запрос на слияние из вашего форка в оригинальный репозиторий Leaflet.

Как только запрос на слияние будет завершен, один из поддерживателей Leaflet быстро проверит ваш плагин, и если все в порядке, ваш плагин появится в списке в ближайшее время.

Опубликовать ( 0 )

Вы можете оставить комментарий после Вход в систему

1
https://api.gitlife.ru/oschina-mirror/lianggit-Leaflet.git
git@api.gitlife.ru:oschina-mirror/lianggit-Leaflet.git
oschina-mirror
lianggit-Leaflet
lianggit-Leaflet
main