Ранее в этом месяце я написал пакет Atom, который позволяет пользователям выполнять поиск в своих текстовых редакторах, соответствующий вопросу Stack Overflow, и отображать ответы в модальном виде в Atom. К сожалению, Atom — не самая простая вещь в мире для разработки, потому что документация невелика, а хороших примеров пакетов очень мало. Большую часть времени я потратил на то, чтобы понять, как работает Atom, а не на написание кода или размышления о своей реализации. Я полагался на исходный код пакетов, которые я установил, в качестве руководства, которые работали достаточно хорошо, но им не хватало контекста, который идет с файлами README или хорошей документацией. Я собираюсь пройтись по общей структуре пакета Atom в надежде, что это избавит кого-то от таких головных болей, как у меня.
Структура пакета
Вы можете автоматически сгенерировать шаблонную структуру пакета, открыв палитру команд (cmd-shift-p на Mac или ctrl-shift-p на Linux/Windows) и выбрав параметр с надписью Генератор пакетов: Создать пакет. Это создаст пакет с древовидным представлением, как показано ниже:
your-package |-- keymaps |-- your-package.json |-- lib |-- your-package-view.js |-- your-package.js |-- menus |-- your-package.json |-- spec |-- your-package-spec.js |-- your-package-view-spec.js |-- styles |-- your-package.less |-- .gitignore |-- CHANGELOG.md |-- LICENSE.md |-- package.json |-- README.md
Некоторые из этих файлов вы узнаете сразу, в то время как другие вы можете не узнать, но, вероятно, хорошо понимаете, что они делают.
Каталог раскладок — это место, где вы можете установить любые сочетания клавиш, которые вы хотите использовать для запуска функций в вашем пакете. Настройки по умолчанию должны быть достаточно хорошими, если вы только начинаете работать с Atom, хотя вы можете изменить конкретное сопоставление клавиш на что-то более удобное.
Каталог меню позволяет вам редактировать, как ваш пакет представлен в различных меню. Вы можете изменить метки меню и команды, которые они запускают для контекстного меню (т. е. контекстного меню), меню «Пакеты» и подменю «Пакеты» (Пакеты → ваш-пакет).
Spec — это место, где вы можете писать тесты, если хотите запустить их как на your-package.js, так и на your-package-view.js.
Стили — это место, где вы можете добавить стили к элементам, которые вы могли добавить в your-package-view.js. На самом деле Atom построен на HTML, CSS и JavaScript, поэтому вы можете стилизовать элементы так же, как и веб-страницу. Совет для профессионалов: вы можете открыть консоль, выбрав «Просмотр» → «Разработчик» → «Переключить инструменты разработчика». Это означает, что вы можете использовать console.log() точно так же, как и в браузере. Это делает разработку so намного проще, и это было одним из самых приятных моментов в работе с Atom.
И последнее, но не менее важное: большую часть кода вы будете выполнять в каталоге lib. your-package-view.js — это место, где вы можете управлять пользовательским интерфейсом вашего пакета. Чаще всего это модальное окно, которое также используется генератором пакетов по умолчанию. your-package.js — это место, где будет выполняться основная часть вашей логики, и именно на него ссылаются как на точку входа в вашем package.json. В частности, вам необходимо ознакомиться с четырьмя функциями, о которых я расскажу далее.
Ключевые функции в your-package.js
активировать()
активировать () — единственная функция, которая требуется в этом файле. Эта функция вызывается при первом запуске пакета в данном окне. Он создает экземпляр класса View, который мы указали в your-package-view.js, и инициализирует новое модальное окно, используя этот экземпляр, который еще не виден.
this.yourPackageView = new YourPackageView(state.yourPackageViewState);
this.modalPanel = atom.workspace.addModalPanel({
item: this.yourPackageView.getElement(),
visible: false
});
activ() делает и другие вещи, но они не так важны.
деактивировать()
deactivate() вызывается при закрытии Atom. Он более или менее уничтожает все, что связано с текущим экземпляром вашего пакета. Кроме этого, честно говоря, больше нечего…
сериализовать()
serialize() важен для тех, кто хочет написать пакет, сохраняющий состояние между двумя разными сеансами пользователя.
serialize() {
return {
yourPackageViewState: this.yourPackageView.serialize()
};
}
Если вы помните из метода активации, yourPackageViewState — это то, что передается конструктору YourPackageView, когда ваш пакет переключается в первый раз в сеансе пользователя, и именно так Atom «перезагружает» состояние, которое вы сериализовали, когда окно было закрыто.
переключать()
После всего этого мы получаем toggle(). Для большинства людей функция toggle() запускается, когда кто-то переключает ваш пакет из меню или вводит ярлык, указанный в menu/your-package.json. Когда я писал свой пакет Atom, я относился к toggle() как к основному методу. Вы можете переименовать эту функцию во что-то вроде execute() или run(), если ваш метод не переключает модальное окно, но это вопрос семантики и зависит от вас. Если вы меняете его, обязательно измените его во всех местах, на которые он ссылается (keymaps/your-package.json, menus/your-package.json и package.json).
Также стоит отметить, что использование ключевого слова this при разработке с использованием Atom сильно зависит. Будьте осторожны при вызове функций с неправильным this контекстом, если у вас есть какие-либо асинхронные функции. Я бы привязывал или использовал стрелочные функции, чтобы вам не приходилось об этом беспокоиться.
Это завершение этого поста, но не стесняйтесь обращаться по адресу [email protected], если у вас есть какие-либо вопросы о разработке с помощью Atom! Если вы хотите узнать обо мне больше, вы можете посетить мой веб-сайт www.benhubsch.me.
