DEMO
сотрудничатьисходный код, Прочитав внимательно эту статью, вы поймете суть инкапсуляции.Хоть воробей и маленький, но у него есть все пять внутренних органов.
Предисловие
Код вне бизнес-кода, я хочу назвать этоКод с добавленной стоимостью.
В чем смысл?
Как программист, помимо выполнения задач, поставленных руководителем, у вас также должно быть немного собственного времени, чтобы «поиграть» во что-то более интересное.
Когда существующие фреймворки и библиотеки не могут удовлетворить наши потребности, мы должны попытаться создать некоторые инструменты самостоятельно. Вот чего ты добился,сделать других, сделать себя.
Если вы мне не верите, подумайте об этом, будет ли другим интересен конкретный код бизнес-логики, который вы пишете? Думаю, их больше волнует то, как используются плагины, которые вы пишете, и им неудобно использовать это для завершения собственного бизнес-кода.
Чтобы быть проще,Они не будут помнить вас, но они будут помнить ваш Апи и, следовательно, помнить вас.
И еще один важный момент,Все технологии на службе бизнеса, иначе это бред.
задний план
С момента прихода в новую компанию я был занят развитием бизнеса, в процессе я использовал замечательные инструменты, написанные лидером во многих местах. По правде говоря, искреннее восхищение должно просто освобождать производительные силы, и в древности его даровали боги.
Например:
Лидерам потребовалось некоторое время, чтобы изучитьАвтоматический конструктор форм. Прежде чем вручную написать страницу конфигурации формы, а также проверить форму, может потребоваться полдня или даже больше.
что теперь? Все формы, стили и проверки могут быть реализованы с помощью конфигурации кода, которую можно выполнить за двадцать минут.
Отсюда я понял истину:
Делайте одно и то же несколько раз, лучше делать «одно дело» с сердцем.
Я думаю, вы должны хотеть быть тем, что говорят другиетот человек, но живя целыми днями в своем мире, вы можете какое-то время не знать, как это сделать, вот я вам хочу сказать:
Ключевым фактором роста является имитация.
Да, можно сначала попробовать прочитать чужой код, чтобы посмотреть, как его реализуют другие, а потом уже можно идти на гитхаб гулять, там слишком много отличных проектов, чтобы их можно было просто написать.
Пока вы хотите учиться, вы определенно можете этому научиться, это просто вопрос хороших и плохих способов, которые необходимо постоянно улучшать.
Ввиду того, что эта статья собирается отклониться от темы, я не буду больше говорить, давайте перейдем к делу...
текст
1. Различия и связи между компонентами и плагинами
разница
- Компоненты, как правило, используются чаще, чем плагины.
- Компоненты, как правило, имеют меньшую область применения, чем плагины.
соединять
- Плагины могут инкапсулировать компоненты, а компоненты могут предоставлять данные плагинам.
Я не буду вдаваться в подробности здесь, если вам интересно, вы можете обратиться к следующемуБольшой РаубЭта статья очень проста для понимания.
2. Необходимые факторы для внедрения плагинов
Основание
Вам необходимо четко знать некоторые продвинутые знания о Vue и связанном с ним контенте, например
- Конструктор Vue.extend
- $mount для ручного монтирования экземпляра
- инъекция миксиновой смеси
- Передача параметров родительского-дочернего компонента, межуровневая передача параметров компонента
- Понимание конструкторов Vue и прототипов объектов-прототипов
- Зарегистрируйте аккаунт на официальном сайте npm
- упаковка веб-пакета
- ...
Навык
Сегодня во время разработки была реализована следующая техника, и она очень полезна визуально:
Не спешите разрабатывать, подумайте, как использовать ваш плагин в разработке
В чем смысл? Следуй за ходом моих мыслей
Поскольку я хочу реализовать глобальный плагин тостов, вероятно, использование
this.$toast('那个男人')
// todo
Просто копии всплывающего окна недостаточно, должна быть переменная, которая управляет направлением всплывающего окна.
this.$toast('那个男人',{
position:'topCenter'
})
Должно быть несколько состояний глобального всплывающего уведомления, например общее成功,错误,警告,普通...
// 成功success
// 错误error
// 警告warning
// 普通info
this.$toast('那个男人',{
position:'topCenter',
type:'success'
})
Должна быть переменная времени, чтобы контролировать, как долго автоматически исчезают тосты.
this.$toast('那个男人',{
position:'topCenter',
type:'success',
closeTime: 3 // 控制3秒后消失toast
})
Будет ли бизнес-сценарий, в котором нам не нужно автоматически исчезать тосты?
this.$toast('那个男人',{
position:'topCenter',
type:'success',
closeTime: 3 // 控制3秒后消失toast
autoClose: false
})
Если я хочу инициировать некоторые действия обратного вызова после завершения всплывающего уведомления, например, обновить страницу списка после удаления успешного всплывающего уведомления
this.$toast('那个男人',{
position:'topCenter',
type:'success',
closeTime: 3 // 控制3秒后消失toast
autoClose: true,
callback () {
...
}
})
Содержание всплывающего уведомления может быть очень длинным, поэтому должны быть две переменные для управления шириной и высотой всплывающего уведомления.
this.$toast('那个男人',{
position:'topCenter',
type:'success',
closeTime: 3 // 控制3秒后消失toast
autoClose: true,
callback () {
...
},
width:300,
height:80
})
Пока что основные функции должны быть рассмотрены, на этот раз вы должны рассмотреть некоторыевстроенныйЭта проблема
- Меня как пользователя волнует такое количество элементов конфигурации? Или это все надо настраивать?
- Для разных состояний (успех/ошибка/предупреждение/информация) вы должны использовать разные цвета, чтобы различать и использовать разные значки.Есть ли какая-то связь между ними?
Как решить проблему слишком большого количества элементов конфигурации — значение по умолчанию
Укажите тип по умолчанию. Например, тип по умолчанию в моем проекте — информация. Когда я его использую, когда тип не передается, по умолчанию используется информация.
Поскольку большинство всплывающих уведомлений остаются на странице ненадолго, для параметра autoClose установлено значение true.
И поскольку большая часть копии всплывающего уведомления относительно короткая, длина и ширина всплывающего уведомления по умолчанию установлены на 300, 80 должно быть достаточно.
...
Приведенные выше конфигурации по умолчанию можно использовать для переопределения параметров по умолчанию путем передачи параметров.
Какова связь между значками тостов, цветами и заголовками для разных состояний?
Таблица конфигурации сопоставления карт хранится локально, по типу входящего я могу точно знать, какой должна быть иконка, цвет и заголовок.
Подводя итог, несколько пунктов:
- Параметры, предоставляемые подключаемым модулем, должны быть сведены к минимуму, сосредоточив внимание на проблемах пользователя.
- Реализация плагинов или компонентов должна быть основана на сценариях использования
- Чтобы разработать компонент или плагин, он должен сохранить область разработки программного обеспечения.открытый закрытый принцип
- Хороший подключаемый модуль или компонент не создается в одночасье, и часто бывает необходимо найти проблемы в процессе последующего использования и исправить их.
- Документация компонента или плагина должна быть полной, не все, кто его использует, заботятся о его внутренней реализации, их может волновать только то, как быстро приступить к работе.
выполнить
Как указано выше,Компоненты могут предоставлять данные плагинам, для этого предложения
Насколько я понимаю, компонент является статическим и предоставляет внешнему миру только некоторые записи параметров.props.
Плагин, который позволяет нам динамически вводить в него некоторые пользовательские параметры. Конкретная реализация по-прежнему выполняется в компоненте.
Итак: я написал статический компонент, который определяет соответствующие переменные, упомянутые выше, через реквизиты.
Сначала посмотрите на скриптовую часть
Давайте снова посмотрим на часть html
Видно, что внутренняя реализация на самом деле очень проста, это не что иное, как управление внутренними деталями отображения через пропсы, переданные извне.
Статические компоненты в основном завершены здесь (код стиля css здесь не публикуется)
Уведомление:
- При определении реквизита лучше всего использовать обозначение объекта в качестве определенного ограничения.
- Имя переменной лучше всего знать с именем
- Привязка имен классов может быть выполнена путем полного использования форм массивов и объектов, предоставляемых Vue, или с помощью вычисляемых свойств.
Как статические компоненты могут стать плагинами?
Я не буду вдаваться в подробности, существует четыре распространенных способа инкапсуляции плагинов с помощью vue.Плагин разработки Vue,Конечно, я думаю, вам также нужно понимать использование Vue.extend, реализация плагина неотделима от него.
Посмотрите на ключевую часть: этот файл также является входным файлом для нашей последующей упаковки веб-пакета (сборки).
Знания, связанные с содержимым этого файла, также являются основным содержанием разработки плагина vue. Каждая строка кода внутри полна убийственных намерений~
На данный момент часть реализации плагина в основном завершена.
3. Как загрузить свой плагин в npm
На этот случай в интернете есть много туториалов.Я так понимаю, что вам нужно только понять функцию следующих строк кода, чего достаточно
// webpack.config.js
module.exports = {
entry: process.env.NODE_ENV === 'development' ? './src/main.js' : './src/index.js',
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'build.js',
libraryTarget: 'umd'
},
...
// package.json
{
"name": "mbs-toast",
"description": "a toast plugin base on Vue2",
"version": "1.0.0",
"author": "xxx <xxx88888@163.com>",
"license": "MIT",
"private": false,
"main": "dist/build.js",
"scripts": {
"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules",
...
- Конфигурация файла входа здесь означает, что в среде разработки файл входа — это main.js (удобно для разработки и отладки), а файл входа — index.js при упаковке
- имя_файла — имя файла, сгенерированного пакетом.Вот шаблон webpack-simple, который по умолчанию использует build.js.Если нет особых требований, не рекомендуется менять
- Атрибут libraryTarget может быть незнаком всем, потому что вообще, если вы используете в проекте только webpack, то на эти два атрибута можно не обращать внимания, но если вы разрабатываете библиотеки классов и плагины, то эти два атрибута должны быть понятым, вы можете обратиться, если вы не ясно.Подробно объясните свойство ibraryTarget в webpack.
- Основное поле в файле package.json указывает запись, на которую ссылается пакет npm (не забудьте добавить ее, а имя файла должно быть таким же, как указано во втором пункте выше).
Шаблон, который я использую здесь, является моим собственным в официальномwebpack-simpleНа основе шаблона сделаны некоторые настройки.Для облегчения моей привычной разработки добавлены scss и eslint.В этом случае нет необходимости каждый раз потом вручную устанавливать.Если интересно,можно прочитать README и настроить собственную копию.
После того, как вы поймете вышеизложенное, вам нужно всего лишь выполнить следующие шаги, чтобы достичь счастья.
Если получится, то теперь можно уже в официальном проекте, через
npm install -S xxx 安装你的私有包了
Наконец, зарегистрируйте свой плагин в файле ввода.
import toastPlugin from 'xxx'
Vue.use(toastPlugin) // 这里Vue.use的第二个参数，可以通过全局配置，做一些自定义配置，有需要的自行前往学习
Здесь все решено
Вы можете с удовольствием использовать его в своем коде
this.$toast('尘埃落定', {
callback () {
console.log('hello world')
},
type: 'success',
// position: 'topRight',
autoClose: false
})
наконец
Перед написанием этого плагина я увиделВеликий БогИнкапсулированный плагин. Описано в четырех словах,захватывающий дух, Если вам интересно, вы должны посмотреть.Я считаю, что вы, кто любит учиться, обязательно много выиграют. В то же время, при разработке плагина также были сделаны соответствующие ссылки на некоторые стили и анимации.
Исходный код плагина загруженmbs-toast, для справки. В то же время я также пытался реализовать упомянутый выше генератор форм самостоятельно, если вам интересно, вы можете соединить его вместе. Все плагины и компоненты в настоящее время собраны вГитхаб МабуяоЗдесь документация и README постоянно совершенствуются~
Студенты-естественники закончили, писать нехорошо, не распыляйте ~
Кодить нелегко, но делайте это и дорожите этим!