Прочтите эту статью 📖
Ты будешь:
- понять через
JSONнастроитьel-tableКолонны могут быть не такими красивыми. (субъективное мнение автора) - Узнайте немного об операциях VNode. (Совсем немного)
- Думайте диалектически о том, чем нам нужно уступать, когда мы перекомпоновываем компоненты в нашей команде.
предисловие
Привет всем, я春哥.
Я люблюvue.js , ElementUI , Element PlusЧто касается стека родственных технологий, то моя цель — поделиться с вами самыми практичными и полезными моментами знаний, надеюсь, каждый сможет пораньше уйти с работы, быстро закончить работу и успокоиться.
верь в употреблениеvueБольшинство учащихся использовалиElementряд фреймворков, и большинство из них использовали ихel-tableкомпоненты. И почти каждый будет инкапсулировать слой таблиц и нумерацию страниц.
Однако многие люди всегда по привычке ставятel-tableОфициально рекомендуемое «написание слота» изменено на «JSONобозначение "массив".
так:
<template>
<my-el-table :columns="columns" :data="tableData">
</my-el-table>
</template>
<script setup>
const columns = [
{
prop: 'date',
label: 'Date',
width: '180'
},
{
prop: 'name',
label: 'Name'
}
]
// ...其他略
</script>
Но спустя много лет я ступил в яму болезненного опыта, я должен произнести вслух эту фразу:
Останавливаться! Есть лучшие навыки упаковки!
JSONКаковы недостатки типовой упаковки?
Недостаток 1: стоимость обучения увеличивается
В следующих двух сценариях, если вы только что присоединились к работе сегодня, какой компонент вы бы предпочли видеть в бизнес-коде?
Я более склонен к1а также4!
первый1Это означает, что он имеет богатую поддержку сообщества, точную и понятную документацию иdemoможно поучиться.
первый4Это означает, что вы по-прежнему можете полагаться на официальную документацию и использовать некоторые «улучшения» от коллег по бизнесу.
Так2а также3Шерстяная ткань?
Возможно, мои коллеги действительно умеют делать хорошую упаковку, но если вы работаете на небольшой фабрике, в начинающей компании или даже в аутсорсинговой компании, более вероятно, что ваши коллеги ненадежны.
Некоторые из его пакетов предназначены только для满足单一的业务场景, но чтобы понять его функцию, вам придется столкнуться с новымapi, даже взглянув на его исходники, чтобы понять, что тамapiи способности.
В этом сценарии я предпочитаю встречаться со знакомым официальным лицом.api.
Недостаток 2: необходимо писать пользовательский контентhфункция
Никто не любит писать в бизнесе
hфункция?
когда простоJSONЕсли конфигурация не может удовлетворить воображение менеджера по продукту в этот день, вам может понадобитьсяel-table-columnдля настройки содержимого.
В этот момент, возможно, вам будет не хватать удобства «слотового типа».
Предположим, ваш менеджер по продукту просит вас написать带色彩的状态列.
Какое из двух написаний выше вы бы выбрали?
И, когда бизнес становится более сложным,hЧитаемость написания функции уменьшается экспоненциально, вы боитесь?
Конечно, используйте JSX для упрощения
hНаписание функции — хорошая идея.
JSONКаковы преимущества типовой упаковки?
Преимущество 1: Можно ли упростить метод письма? (нет)
кто-то сказал:"JSONИнкапсуляция может упростить написание кода. "
Услышав это, мое сердце на самом деле полно смятения: что же это упрощает?
Ты это видел?
Это распространенное так называемое封装, просто выполните простое формальное преобразование:Вы не пропустили ни одного атрибута, просто переместили их отсюда туда.
Даже в экстремальных сценариях вам нужно написать больше кода:
// 从：
<el-table-column show-overflow-tooltip />
// 变成：
{
'show-overflow-tooltip': true
}
Преимущество 2: ТолькоJSONМожете ли вы создать динамический столбец? (нет)
я здесь«Я инкапсулировал таблицу элементов»Во время обсуждения,JackLiR8Студент задал вопрос:
Упрощенно это:
Как можно реализовать инкапсуляцию, сохранив при этом метод записи слотов?
动态列Шерстяная ткань?
На самом деле эта задача несложная, суть в том, что вам нужно понятьvNodeчто и как ими эксплуатировать.
Я сделал простой пример, основной код выглядит следующим образом:
// vue3 函数式组件写法
const FunctionalTable = (props, context) => {
// 获得插槽里的 vNodes
const vNodes = context.slots.default()
// 过滤 vNodes
const filteredVNodes = props.visibleKeys == null ? vNodes : vNodes.filter(node => props.visibleKeys.includes(node?.props?.prop))
// 把属性透传给el-table
return <el-table {...context.attrs}>
{ filteredVNodes }
</el-table>
}
// vue3 函数式组件定义 props
FunctionalTable.props = {
visibleKeys: {
type: Array,
default: () => null
}
}
Это заставит это случиться动态列уже?
да.
Вот код в использовании:
<template>
<el-button @click="onClick">给我变！</el-button>
<FunctionalTable :data="tableData" :visibleKeys="visibleKeys">
<el-table-column prop="date" label="Date" width="180" />
<el-table-column prop="name" label="Name" />
<el-table-column prop="address" label="Address" />
</FunctionalTable>
</template>
<script setup>
// 其他略
const visibleKeys = ref(['date', 'name'])
const onClick = () => {
visibleKeys.value = ['date', 'name', 'address']
}
// 其他略
// ...
Эффект следующий:
Нет сомнений, что при столкновении со сложными сценами и колоннами необходимо отрисовывать всевозможные странные вещи, такие какtag,popoverИли, когда вам нужны более сложные определения, лучше использовать обозначение слота.
Это исходный код приведенной выше демонстрации =>исходный код на гитхабе
Преимущество три:JSONКонфигурация может хранить базу данных? (Советую быть осторожным)
«Если я поставлю
JSONКонфигурация хранится в базе данных, поэтому мне не нужно писать код! "
Хороший парень, я просто называю это хорошим парнем!
Если вы не инкапсулировали очень зрелую схему визуальной конфигурации, в противном случае!Когда вам нужно добавить новую колонку в бизнесе, разве вы не пишете ее? Сервер и операторы не помогут вам написать код.
Именно там, где вы храните код, из
gitстал数据库.
В случае ленивого сервера вам также необходимо установить программное обеспечение для связи с базой данных и добавить записьsql updateРабота со словом.
Еще страшнее то, что вы теряете понимание кода版本跟踪Способность.
«Почему данные рабочей библиотеки/тестовой библиотеки/инвентаризации разработки отличаются? Кого следует использовать? Я не знаю, какой версии это поле, и почему оно было кем-то объединено...»
В этот момент вы можете пропустить оченьgit commit-msgЭто.
Какую инкапсуляцию я ожидаю?
Если вам нужен дизайн, основанный на «элементе пользовательского интерфейса» или «элементе плюс», можно решить некоторые насущные проблемы, оптимизировать некоторые формулировки, можно регулировать ряд форматов, что позволяет команде небольших партнеров с удовольствием использовать компонент библиотека.
Я думаю, вам, возможно, придется полностью рассмотреть следующее:
- Легко ли изучить его API (даже в основном
elementточно так же)? - Действительно ли это упрощает деловое письмо?
например, положить表格а также分页器слияние, например предоставление请求方法так какpropи т. д. являются инкапсуляциями, которые могут значительно снизить сложность бизнеса. - Является ли он масштабируемым и простым в обслуживании?
apiСоответствует ли дизайн стилистически проекту?
в том же проекте,render/jsx/templateСведение, вероятно, будет проблемой для некоторых новичков. - Является ли он улучшенным и прогрессивным?
Я не хочу, когда я пытаюсь использоватьelementUIКогда возникает какая-то фича, я вдруг обнаруживаю, что компонент, упакованный моим коллегой, ее не поддерживает!
Заявление об отсутствии распыления
Все изображения и текст выше являются моим личным мнением.
Если вы думаете, что они не правы, они ошибаются.
О моем возражении против размещенияElementстолбец таблицыJSON化первоначальное намерение,Я реально устал раз за разом разглядывать дерьмовые упаковки моих бывших коллег в разных командах и разных компаниях, чтобы понять, что они сделали, адаптирована ли орфография, не хватает ли фич, и она полностью бесполезно учить его заново.API.
Я надеюсь, что каждый может получить хороший опыт при написании кода.
При инкапсуляции компонентов вы можете инкапсулировать компоненты, которые «могут использоваться», «просты в использовании» и «готовы к использованию»!