- A+
前言
在我们日常代码开发过程中,组件的使用是必不可少的,我们也会去封装组件。但是大家写组件的风格各式各样,没有一个统一的准则。而且也没有遵循软件开发的原则:高内聚、低耦合;因为我是给行业提供代码的,行业给交付提供代码。我们要尽量去减少大家的接入成本,降低接入成本的最好方案就是我们在设计组件的时候编写好文档,保证职责单一,不要耦合业务,就在很多程度上降低了成本了。在我们平时开发过程中,也遇到过一些组件,一个组件的实现有上千行代码,那种组件我是直接不想看的。所以我们在开发组件的时候如果你的代码超过了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" />
进阶篇
用 JSX 赋能 Vue
Vue 本身是完全支持 JSX 渲染的,但是大部分情况我们还是习惯或者推荐使用模板。
如果你习惯了 React 的 renderProps ,觉得 Vue 的 slot 不够用,那么可以上 JSX。