组件设计要求
前言
在我们日常代码开发过程中，组件的使用是必不可少的，我们也会去封装组件。但是大家写组件的风格各式各样，没有一个统一的准则。而且也没有遵循软件开发的原则：高内聚、低耦合；因为我是给行业提供代码的，行业给交付提供代码。我们要尽量去减少大家的接入成本，降低接入成本的最好方案就是我们在设计组件的时候编写好文档，保证职责单一，不要耦合业务，就在很多程度上降低了成本了。在我们平时开发过程中，也遇到过一些组件，一个组件的实现有上千行代码，那种组件我是直接不想看的。所以我们在开发组件的时候如果你的代码超过了300行，那你就需要好好思考一下，是否有需要优化的了，设计是否合理，是否有重复的代码可以封装等等。
组件职责单一
比如商品列表筛选条件组件，提供筛选功能，输出一个选择的form提供给外部组件请求列表数据。
一个很简单的功能，为了保证组件的功能的单一，不允许其他模块往这个组件中新增筛选条件，如果在不修改组件的情况下可以直接使用这个组件
<template>
<!--过滤器-->
<el-form
style="padding-right: 20px"
inline
class="goods-list-filter"
:model="filter"
ref="filter"
label-position="right"
label-width="120px"
>
<!-- 关键字搜索 -->
<el-form-item label="商品标题：" prop="itemMainTitle">
<el-input
class="w220"
placeholder="请输入"
size="mini"
v-model.trim="filter.itemMainTitle"
@input="checkFilterParam('itemMainTitle', 80)"
/>
</el-form-item>
<!-- barcode条形码搜索 -->
<el-form-item v-if="showBarcode" label="条形码：" prop="barcode">
<el-input
class="w220"
placeholder="条形码搜索"
prefix-icon="el-icon-search"
size="mini"
v-model.trim="filter.barcode"
@input="checkFilterParam('barcode', 20)"
/>
</el-form-item>
<el-form-item label="商品分类：" prop="categoryId">
<goods-category-cascader
class="w220"
:active-goods-type="goodsType"
:with-all="true"
size="mini"
v-model="filter.categoryId"
:reset-selecte="resetSelecte"
@changeRestStatus="changeRestStatus"
/>
</el-form-item>
<el-form-item label="售卖类型：" prop="saleType">
<el-select class="w220" v-model="filter.saleType" size="mini" placeholder="售卖类型">
<el-option label="全部类型" :value="null"></el-option>
<el-option label="普通售卖" :value="SaleChannel.Normal"></el-option>
<el-option label="活动售卖" :value="SaleChannel.Activity"></el-option>
</el-select>
</el-form-item>
<!-- 上下架状态 -->
<el-form-item v-if="showStatus" prop="itemActiveStatus" label="状态：">
<el-select class="w220" v-model="filter.itemActiveStatus" size="mini">
<el-option label="全部状态" :value="null"></el-option>
<el-option label="启用" :value="GoodsStatus.PullShelves"></el-option>
<el-option label="禁用" :value="GoodsStatus.RemoveShelves"></el-option>
</el-select>
</el-form-item>
<el-form-item label="是否支持退款：" prop="notAllowRefund">
<el-select class="w220" v-model="filter.notAllowRefund" size="mini" placeholder="是否支持退款">
<el-option label="全部状态" :value="null"></el-option>
<el-option label="支持" :value="AllowRefund.Yes"></el-option>
<el-option label="不支持" :value="AllowRefund.No"></el-option>
</el-select>
</el-form-item>
<el-form-item v-if="showPerformance" label="履约主体：" prop="performanceBuId">
<slot></slot>
</el-form-item>
<el-button type="primary" @click="onFilter">搜索</el-button>
<el-button v-if="!showLabel" plain @click="handleReset" style="margin-top: 2px">重置</el-button>
</el-form>
</template>体积要小
为了不让组件去耦合业务，要尽可能的保证组件的纯粹性，如上面讲到的筛选条件组件，只需要保证输出的筛选字段正确性，而筛选的条件的值可以由外部组件提供（如商品分类的数据），
为什么数据要外部传入？
这是因为一般情况下存在的筛选条件，列表也肯定会有，而有时候后端在返回数据时只返回了id，就需要我们去通过id解析出对应的name，这就需要使用到对应的数据，这个时候就可以共享数据。
这样也可以进一步降低耦合与体积
遵循使用习惯
很多组件都有他们的惯用方法，比如表单组件会使用 v-model 来进行绑定表单值、模态框我们会使用visible 或 show() 方法来控制显示。
遵循这些惯用方法， 可以减少开发者的心智负担，维持接口的统一性，另外也更容易地被组合/集成(比如在 Ant-design 中 Form.Item 就依赖于这个协议)。
举个例子，头像选择器：
export default {
name: 'AvatarSelect',
props: ['avatar'],
methods: {
handleSelect() {
// ...
this.$emit('avatar-change', value)
}
}
}
<avatar-select :avatar="form.avatar" @avatar-change="form.avatar = $event" />谨防样式污染
每个组件应该有一个命名空间。且这个命名空间最好避免和其他组件冲突。
<template>
<div class="my-component">
...
</div>
</template>
<style lang="scss">
.my-component {
// 下级组件样式
}
<style>
总是开启 Scoped CSS. 这是一种最简便的防止污染的方式
<style scoped>
.example {
color: red;
}
</style>
<template>
<div class="example">hi</div>
</template>
CSS 类嵌套不要超过两级。否则从可读性和可维护性上都会大打折扣
.foo {
.bar {
.baz {
// 几百几千行代码
}
// 几百几千行代码
}
}
推荐使用 BEM 来作为CSS 类名。让CSS 的语义和组件结构关联起来。
.my-component {
&__head {/*...*/}
&__footer {/*...*/}
}
通过 class 或 style 来定制组件的样式。不要使用直接给标签加样式
// ×
<el-input />
<style>
.el-input {
// 样式覆盖
}
</style>
// √
<el-input class="my-input" />
<style>
.my-input {
// 样式覆盖
}
</style>组件扩展
由于我们是基础产品，那提供的组件也要尽量丰富，丰富并不是说要在组件中加各种判断，而是在职责单一、体积、耦合间权衡利弊，也可以创建同类型组件，在同一个文件index.js中export
单向数据流
只通过 props 向下级传递状态。不要通过 ref 这类方式，过程式地去影响下级组件的状态。
下级组件只通过 event 向上级通信。
下级组件不准修改 props 源数据。
遵循 v-model, update:* 协议。
v-model 遵循数据不可变原则。即你不能直接修改 value，而是应该创建一个新的 value。
// 假设 value 是一个列表
handleRemove(item) {
const idx = this.value.indexOf(item)
if (idx !== -1) {
const newValue = [...this.value]
newValue.splice(idx, 1)
this.$emit('input', newValue)
}
}
使用 computed 来衍生数据。保持源数据的纯洁。
分离业务状态和视图状态。比如列表项的激活状态就是视图状态，而后端返回的数据就是业务状态。
// 推荐
<item :checked="item.id in checked" @click="checked.add(item.id)" />
// 不推荐: 直接在源数据上添加了一个字段，污染了原有的数据。
<item :checked="item.checked" @click="item.checked = true" />来自：https://www.cnblogs.com/fshmjl/archive/2022/05/10/16253936.html
本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！
