❝Frontier: За последние несколько лет библиотека интерфейсных компонентов быстро развивалась, и сообщество выделилось из многих отличных библиотек компонентов с открытым исходным кодом, включая element-ui, дизайн Ant, IView и т. д. На самом деле есть много вещей, которые стоят того. обучение в исходном коде этих библиотек компонентов с открытым исходным кодом. , будь то дизайнерские идеи, стиль кода и т. д., вы можете обратиться к нашим обычным проектам, обратившись к некоторым методам написания в исходном коде.
❞
1.Директивы
❝В Vue мы можем использовать пользовательские инструкции для выполнения низкоуровневых операций с элементами DOM.Кстати, мы рассмотрим, как настроить инструкцию, которая в основном включает 5 функций-ловушек.Здесь перечислены только несколько часто используемых функций-ловушек, и то мы представим их в конце Некоторые пользовательские инструкции, общие для библиотек компонентов
❞
Vue.directive("directiveName", {
bind: function(el, binding, vnode){
# 当指令第一次绑定元素el时触发，常用来做初始化
},
update: function(el, binding, vnode) {
# 绑定Vue编译生成的虚拟节点VNode 更新时调用
},
unbind: function(el, binding, vnode) {
# 解绑操作，用来将指令和元素解绑时调用，类似vue生命周期中的beforeDestroy钩子函数
}
});
1.1 v-clickoutside
❝v-clickoutside — это пользовательская инструкция, реализованная Element-ui. Целью является обработка событий, которые запускаются за пределами элемента, по которому щелкнули. Она часто используется для обработки закрытия расширенного содержимого, такого как раскрывающиеся меню. селектор и раскрывающийся список. Эта команда используется в таких компонентах, как меню и всплывающие окна.
❞
- реализация элемента
❝Конкретная реализация элемента clickoutside выглядит следующим образом👇, см. ссылку для получения более подробной информации об исходном коде.element/src/utils/clickoutside.js
❞
Давайте грубо интерпретируем логику в трех хуках-функциях этого кода.
-
bind: Сохраните элемент dom, привязанный к инструкции clickoutside, поместив его в список узлов. Цель состоит в том, чтобы каждый раз, когда инструкция clickoutside привязывалась к странице, связанный элемент сохранялся в списке узлов. Идентифицируйте инструкцию clickoutside по идентификатору временной переменной с автоинкрементом. -
update: На самом деле, он по сути используется для обновления и инициализации значения, которое мы определяем и связываем в ctx el, чтобы было удобно вносить изменения при обновлении компонента. -
unbind: Когда необходимо развязать инструкцию и элемент el, найдите текущий несвязанный элемент el, хранящийся в nodeList, путем обхода исходного «менеджера элементов» — длины nodeList и идентификатора, упомянутого выше, и удалите его из nodeList.
Следующий рисунок является результатом привязки
❝👦 А Бин: Как clickoutside определяет, является ли это кликом снаружи?
❞
Ответ: это createDocumentHandler(), используемый в привязке.
-
createDocumentHandler(): используется, чтобы определить, является ли текущая область, по которой щелкнули, домом, связанным с инструкцией, что по существуcontainsметод, например, элемент A содержит элемент B, он возвращает true, иначе false. Он используется для определения местоположения элемента.Проще говоря, щелчок по элементу, ограниченному v-clickoutside, не запускает логику инструкции clickoutside.Щелчок по области, которая не содержит элемент, вызывает срабатывание binding.value привязка инструкций Давайте посмотрим на исходный код.
❝👧 А Ци: Я хочу использовать команду этого компонента в своем собственном проекте, что мне делать?
❞
Ответ: Точно так же, как инструкции, которые обычно цитируются, вы можете обратиться к ссылке в исходном коде.Связь
- Реализация IView
❝👧 Брат Ах Дай: Как другие библиотеки компонентов достигают этого?
❞
Ответ: Как и исходный код iview, clickoutside вводит в качестве зависимости v-click-outside-x.Заинтересованные детские ботинки могут посмотреть документациюСвязь
1.2 v-repeat-click
❝v-repeat-clickr, как следует из названия, представляет собой «повторный щелчок, используемый для функции защиты от сотрясения», в сочетании с методами on и Once в dom.js. элемент применяет v-repeat-clickr к компоненту el-input-number, который используется, когда вы нажимаете + или -
❞
Когда мы долго нажимаем + или -, обратный вызов, который запускает mousedown, будет запущен только один раз, но мы обнаружим, что число в поле ввода будет продолжать увеличиваться? Давайте сначала посмотрим на исходный кодИсходная ссылка
❝А Сен: Число будет меняться, разве это не срабатывает постоянно?
❞
Ответ: повторный щелчок добавляет таймер к функции обратного вызова mousedown.При отпускании мыши метод обратного вызова mouseup запускается один раз, а затем выполняется в соответствии с временным интервалом.
-
Если временной интервал превышает 100 миллисекунд, функция обратного вызова setInterval в методе обратного вызова mousedown выполнит функцию обработчика (по сути, цифровое уменьшение или увеличение)
-
Если временной интервал меньше 100 миллисекунд, таймер будет отменен, зарегистрируйтесь и выполните обратный вызов mouseup через метод Once.
Расширение: Давайте посмотрим на определения on и Once в domjs.
- один раз: зарегистрируйте прослушиватель событий и разрешите ему выполняться только один раз, затем отмените метод прослушивания.
2. Миксин
❝Я думаю, что все знакомы с Mixin. Mixin предоставляет очень гибкий способ распределения повторно используемых функций в компонентах Vue. С помощью Mixin несколько компонентов могут совместно использовать данные и методы. В то же время вводятся компоненты миксина, а методы и свойства миксина включаются в компонент и могут использоваться напрямую. Функция хука также будет вызываться в обоих (хук в миксине будет выполнен первым)
❞
2.1 рассылка и трансляция (Iview и элемент)
❝В новой версии Vue удалены методы трансляции и отправки, которые соответственно используются для: трансляции событий и отправки событий. Позже методы трансляции и отправки были переписаны в элементе ui и iview и имплантированы в каждый компонент через миксин.
❞
- broadcast
❝Функция широковещательного метода заключается в передаче значений компонентам-потомкам.Он будет проходить через все компоненты-потомки.Когда имя компонента совпадает с именем текущего компонента, событие $emit будет инициировано для передачи данных.
❞
- dispath
❝Роль отправки заключается в передаче значений компоненту-предку.Он всегда будет искать компонент-предок, пока не найдет компонент-предок, имя компонента которого совпадает с текущим именем переданного компонента, и это вызовет
❞$emitсобытия и передавать данные
Давайте взглянем на компонент Select элемента примера.
El-select (ElSelect) на самом деле включает в себя такие компоненты, как ElOption и ElOptionGroup. Как они общаются со своими родителями или предками? Используются Dispath и Broadcast. Мы можем посмотреть определение в исходном коде. Ниже приведен компонент ElOption Notify написание эль-выбрать
Компонент ElOption вызывает метод отправки（this.dispatch('ElSelect', 'handleOptionClick', [this.value])）, через цикл while находим верхний компонент с именем ElSelect и фиксируем событие в этом компоненте
2.2 ссылка (Iview)
❝Метод Link в основном предназначен для различения ссылок перехода.Такие компоненты, как хлебные крошки, кнопки, ячейки и другие компоненты, должны иметь дело со ссылками перехода.
❞to=""Внутренняя маршрутизация или внешние ссылки, а также обработка событий кликов
如： <Button to="//iviewui.com" target="_blank">New window</Button>
- to -
linkUrl(ссылка на обработку)
❝👦 Ах Ле: Как он различает внутренние и внешние ссылки?
❞
Ответ: внешние ссылки: проверьте, содержат ли они '//', внутренняя маршрутизация: для относительных путей обрабатывается через ``router.resolve```
- Click -
handleClick(обработка событий кликов)
Мы можем видеть реализацию клика по событию клика в режиме ссылки на кнопку, которая подмешивается в mixinsLink.handleCheckClick
3. Подтвердить (проверка формы)
❝Проверка формы является неотъемлемым инструментом для компонентов формы в библиотеке компонентов.Как перехват проверки формата перед отправкой данных формы, это незаменимая роль.Мы видим, что библиотеки элементов и компонентов Iview используют зависимость в проверке формы.
❞async-validator
- element
- IView
Перед соусом дереваданные формы внешнего интерфейсаВведен асинхронный валидатор, интересующиеся детской обувью могут прочитать это 👈
🌲Предыдущие статьи Соуса:
- Вы изучили BFF и Serverless?
- Расскажите об инструментах ежедневной совместной работы для фронтенд-разработки
- данные формы внешнего интерфейса
- Как лучше управлять интерфейсом API
- Микро интерфейсные вещи
- передовой инжиниринг
- Внешний интерфейс Nginx
- Развертывание интерфейсной эксплуатации и обслуживания
Пожалуйста, выпейте 🍵 Не забудьте подключиться три раза~
1. После прочтения не забудьте поставить лайк 🌲 соусу, там есть 👍 и мотивация
2. Обратите внимание на интересные вещи в интерфейсе официального аккаунта и пообщайтесь с вами об интересных вещах в интерфейсе.
3. Статья размещена на GithubfrontendThingsСпасибо, Стар✨