组件设计要求

更新日期: 2022-05-11阅读: 821标签: 组件

前言

在我们日常代码开发过程中,组件的使用是必不可少的,我们也会去封装组件。但是大家写组件的风格各式各样,没有一个统一的准则。而且也没有遵循软件开发的原则:高内聚、低耦合;因为我是给行业提供代码的,行业给交付提供代码。我们要尽量去减少大家的接入成本,降低接入成本的最好方案就是我们在设计组件的时候编写好文档,保证职责单一,不要耦合业务,就在很多程度上降低了成本了。在我们平时开发过程中,也遇到过一些组件,一个组件的实现有上千行代码,那种组件我是直接不想看的。所以我们在开发组件的时候如果你的代码超过了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

链接: https://fly63.com/article/detial/11479

Vuetify基于vue2.0,为移动而生的组件框架

Vuetify 支持SSR(服务端渲染),SPA(单页应用程序),PWA(渐进式Web应用程序)和标准HTML页面。 Vuetify是一个渐进式的框架,试图推动前端开发发展到一个新的水平。

Vue中插槽的作用_Vue组件插槽的使用以及调用组件内的方法

通过给组件传递参数, 可以让组件变得更加可扩展, 组件内使用props接收参数,slot的使用就像它的名字一样, 在组件内定义一块空间。在组件外, 我们可以往插槽里填入任何元素。slot-scope的作用就是把组件内的数据带出来

react 函数子组件(Function ad Child Component)

函数子组件(FaCC )与高阶组件做的事情很相似, 都是对原来的组件进行了加强,类似装饰者。FaCC,利用了react中children可以是任何元素,包括函数的特性,那么到底是如何进行增强呢?

Vue和React组件之间的传值方式

在现代的三大框架中,其中两个Vue和React框架,组件间传值方式有哪些?组件间的传值是灵活的,可以有多种途径,父子组件同样可以使用EventBus,Vuex或者Redux

vue.js自定义组件directives

自定义指令:以v开头,如:v-mybind。bind的作用是定义一个在绑定时执行一次的初始化动作,观察bind函数,它将指令绑定的DOM作为一个参数,在函数体中,直接操作DOM节点为input赋值。

vue中prop属性传值解析

prop的定义:在没有状态管理机制的时候,prop属性是组件之间主要的通信方式,prop属性其实是一个对象,在这个对象里可以定义一些数据,而这些数据可以通过父组件传递给子组件。 prop属性中可以定义属性的类型,也可以定义属性的初始值。

Web组件简介

Web组件由三个独立的技术组成:自定义元素。很简单,这些是完全有效的HTML元素,包含使用一组JavaScript API制作的自定义模板,行为和标记名称(例如,<one-dialog>)。

web组件调用其他web资源

web组件可以直接或间接的调用其他web资源。一个web组件通过内嵌返回客户端内容的另一个web资源的url来间接调用其他web资源。在执行时,一个web资源通过包含另一个资源的内容或者转发请求到另一个资源直接调用。

vue中如何实现的自定义按钮

在实际开发项目中,有时我们会用到自定义按钮;因为一个项目中,众多的页面,为了统一风格,我们会重复用到很多相同或相似的按钮,这时候,自定义按钮组件就派上了大用场,我们把定义好的按钮组件导出,在全局引用,就可以在其他组件随意使用啦,这样可以大幅度的提高我们的工作效率。

Vue子组件调用父组件的方法

Vue中子组件调用父组件的方法,这里有三种方法提供参考,第一种方法是直接在子组件中通过this.$parent.event来调用父组件的方法,第二种方法是在子组件里用$emit向父组件触发一个事件,父组件监听这个事件就行了。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!