在我们日常代码开发过程中,组件的使用是必不可少的,我们也会去封装组件。但是大家写组件的风格各式各样,没有一个统一的准则。而且也没有遵循软件开发的原则:高内聚、低耦合;因为我是给行业提供代码的,行业给交付提供代码。我们要尽量去减少大家的接入成本,降低接入成本的最好方案就是我们在设计组件的时候编写好文档,保证职责单一,不要耦合业务,就在很多程度上降低了成本了。在我们平时开发过程中,也遇到过一些组件,一个组件的实现有上千行代码,那种组件我是直接不想看的。所以我们在开发组件的时候如果你的代码超过了300行,那你就需要好好思考一下,是否有需要优化的了,设计是否合理,是否有重复的代码可以封装等等。
创新互联公司成立于2013年,先为防城港等服务建站,防城港等地企业,进行企业商务咨询服务。为防城港企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。
大家在看这个文档时可以先详细阅读一下这个文档
比如商品列表筛选条件组件,提供筛选功能,输出一个选择的form提供给外部组件请求列表数据。
一个很简单的功能,为了保证组件的功能的单一,不允许其他模块往这个组件中新增筛选条件,如果在不修改组件的情况下可以直接使用这个组件
搜索
重置
为了不让组件去耦合业务,要尽可能的保证组件的纯粹性,如上面讲到的筛选条件组件,只需要保证输出的筛选字段正确性,而筛选的条件的值可以由外部组件提供(如商品分类的数据),
为什么数据要外部传入?
这是因为一般情况下存在的筛选条件,列表也肯定会有,而有时候后端在返回数据时只返回了id,就需要我们去通过id解析出对应的name,这就需要使用到对应的数据,这个时候就可以共享数据。
这样也可以进一步降低耦合与体积
很多组件都有他们的惯用方法,比如表单组件会使用 v-model 来进行绑定表单值、模态框我们会使用visible 或 show() 方法来控制显示。
遵循这些惯用方法, 可以减少开发者的心智负担,维持接口的统一性,另外也更容易地被组合/集成(比如在 Ant-design 中 Form.Item 就依赖于这个协议)。
举个例子,头像选择器:
export default {
name: 'AvatarSelect',
props: ['avatar'],
methods: {
handleSelect() {
// ...
this.$emit('avatar-change', value)
}
}
}
每个组件应该有一个命名空间。且这个命名空间最好避免和其他组件冲突。
...
hi
CSS 类嵌套不要超过两级。否则从可读性和可维护性上都会大打折扣
.foo {
.bar {
.baz {
// 几百几千行代码
}
// 几百几千行代码
}
}
推荐使用 BEM 来作为CSS 类名。让CSS 的语义和组件结构关联起来。
.my-component {
&__head {/*...*/}
&__footer {/*...*/}
}
通过 class 或 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 来衍生数据。保持源数据的纯洁。
分离业务状态和视图状态。比如列表项的激活状态就是视图状态,而后端返回的数据就是业务状态。
// 推荐
// 不推荐: 直接在源数据上添加了一个字段,污染了原有的数据。
Vue 本身是完全支持 JSX 渲染的,但是大部分情况我们还是习惯或者推荐使用模板。
如果你习惯了 React 的 renderProps ,觉得 Vue 的 slot 不够用,那么可以上 JSX。