本文仅仅针对vue系列做探讨, 项目倾向于大量增删改查的后台管理项目

组件二封不是换一种写法

大量帖子的组件二封都是用json, 然后将prop/emit/slot通过一种json配置来完成.

不是说这种写法绝对不好, 毕竟还真有这种场景, 比如动态表单.

但是, 一般理性而论, 失去了IDE的代码提示, 失去了eslint的规范检查, 不够灵活且不方便调试.

顺带一提, 还有this指向问题.

封装的意义在于更好的维护, 而不是为了封装而封装

组件二封应当具备哪些条件

  1. 团队人员稳定

    二封组件过多, 相当于每个人都要花时间了解二封的内容, 人员流动大, 二封可能会得不偿失

  2. 团队有一定的样式规范

    通往罗马的路不止一条, 规范的作用是只走一条, 比如说我们有如下要求:

    • 检索按钮应当在检索条件下另起一行, 并置于右侧
    • 所有table应当具有斑马条纹和border
    • select下拉组件应当和input组件等宽
    • 分页默认10, 可选10/20/50, 居右, 变量名: pageSize(大小)/pageNum(页码)

    上述规范仅举例, 未必合理. 拥有类似这样的规范, 才是二封的前提

  3. 团队有一定的编码规范

    如上述样式规范, 如果没有编码规范, 每个规范实现方式都千奇百怪

    那么根据上述, 我们有如下对应的编码规范

    • 检索条件另起一行功能应当用el-row+"text-align: right"实现, 而不是float实现
    • table的斑马条纹应当用ElTable的stripe和border属性实现, 禁止自己写css样式
    • select下拉组件与input等宽, 应当由全局样式处理, 而非每个select组件上添加样式
    • 分页可选参数去某个地方读取配置, 使用float固定居右
  4. 团队技术领导人具有一定能力

    多了不说, vue2的话, mixin, 生命周期, 自定义指令, provide/inject, 这些官方指南上介绍的功能都应该熟悉, 还要熟悉vue的官方风格指南

    vue3的话, 二封最好ts, 熟悉ts, 异步组件, 单文件组件, 自定义指令, 熟悉官方风格指南

    我觉得这些就够了, 差一点也没关系, 二封没那么难. 全都是在调用原有组件的api而已

    PS: 并不是说只会这些就够了

  5. 公司层面的支持

    好的封装, 不论是二封, 工具类, 规范设计, 对于小公司来说都是很大的开销, 如果公司没这个打算, 还是自己捣鼓着玩吧. 就像某boss的言论: "我觉得代码写的太好或太差都不行, 别人看不懂, 还不如没写". 这种情况下就需要审时度势了

我认为的二封应当有哪些作用

  1. 实现团队中90%以上的功能全部使用二封组件
  2. 过滤掉原有组件中不推荐使用的prop/methods(expose)/slot
  3. 样式处理, 如检索条件的布局, 列表的布局, 常规表单的布局等等等等
  4. 自动的格式转换, 如日期格式应当仅使用字符串格式, 以下是几个组件常见日期格式, 几乎每次传给后端都需要自己处理一下, 很是麻烦:
    • element-ui: Date/Date[]
    • element-plus: Date/number/string/any[]
    • antd vue 1.x: moment
    • antd vue 2.x: dayjs
  5. 功能拓展, 列举一下我见到的一些需求, 有些功能是部分场景有的, 有些则是全部场景都要的, 全部场景都要, 就要尽量禁止开发人员关闭此功能
    • table列支持拖拽调整列宽
    • table支持自定义列
    • 日期选择器支持快速选择, 输入时支持中文冒号
    • 数字输入时, 自动提示大写, 如"一万两千三百四十二"
    • 图片/视频/文档预览功能(这种需求就千奇百怪了)
    • 所有弹窗支持可拖拽
  6. 功能屏蔽, 列举一下我见过的客户不要的, 组件默认启用的功能:
    • 数字输入框, 屏蔽+/-号和控制按钮
    • 弹窗干掉右上角的x号
    • 弹窗不允许点击空白处关闭
  7. 灵活性, 业务人员只需要关心"有没有", 而不需要关心样式
    • 如检索表单, 查询/重置按钮位置
    • 如表格支持自定义列
    • 如弹窗的可拖拽, 亦无需业务人员处理
    • 如按钮封装, 业务人员无需关心使用什么按钮图标, 按钮里面应当是什么文字

二封的好处

先来一个列表页demo来看看效果(Vue2)

<template>
<div>
<ly-form :loading="loading" search-form @reset="handleReset" @search="handleSearch">
<ly-input label="客户姓名" v-model="searchForm.title"/>
<ly-input label="客户手机号" v-model="searchForm.title"/>
<template #append-buttons>
<ly-btn-create @click="$refs.edit.init()"/>
</template>
</ly-form>
<ly-table :data="tableData" :loading="loading" :paging="paging" @paging="handleSearch">
<ly-table-index/>
<ly-table-column label="客户姓名" prop="name"/>
<ly-table-column label="客户类别" dict-code="sys_xxx_type" prop="type" width="120"/>
<ly-table-column label="客户消费额" prop="consumption" sortable width="100"/>
<ly-table-column label="客户活跃度" prop="loginDays" sortable width="100"/>
<ly-table-action width="330">
<template #default="{row}">
<ly-action-detail @click="$router.push({name: 'CustomerDetail', query: {id: row.id}})"/>
<ly-action-modify @click="$refs.edit.init(row)"/>
<ly-action-remove @click="handleRemove(row.id)"/>
</template>
</ly-table-action>
</ly-table>
<customer-edit ref="edit" @ok="handleSearch"/>
</div>
</template> <script>
import LySearchMixin from '@/mixins/ly-search-mixin'
import {customerService} from '@/api/biz/xxx'
import CustomerEdit from '@/views/biz/dataset-manage/component/dataset-edit' export default {
name: 'CustomerManage',
components: {CustomerEdit},
mixins: [LySearchMixin],
data: () => ({
api: {search: customerService.search, remove: customerService.remove}
})
}
</script>

来让我们梳理一下这段代码的封装内容:

浅谈组件二封-vue的更多相关文章

  1. Android开发-浅谈架构(二)

    写在前面的话 我记得有一期罗胖的<罗辑思维>中他提到 我们在这个碎片化 充满焦虑的时代该怎么学习--用30%的时间 了解70%该领域的知识然后迅速转移芳草鲜美的地方 像游牧民族那样.原话应 ...

  2. Delphi 组件渐进开发浅谈(二)——双简合璧

    2.双简合璧2.1.带有T[x]Label的T[x]Edit组件 请允许我用[x]的书写方式来表示不同的对象.因为随后将大量提及TLabeledEdit与TTntLabeledEdit.TCustom ...

  3. 浅谈SpringCloud (二) Eureka服务发现组件

    上面学习到了如何由一个程序访问另一个程序,那么如果使用SpringCloud来进行访问,该如何访问呐? 可以借助Eureka服务发现组件进行访问. 可以借助官方文档:https://spring.io ...

  4. Vue 浅谈前端js框架vue

    Vue Vue近几年来特别的受关注,三年前的时候angularJS霸占前端JS框架市场很长时间,接着react框架横空出世,因为它有一个特性是虚拟DOM,从性能上碾轧angularJS,这个时候,vu ...

  5. Android事件分发机制浅谈(二)--源码分析(ViewGroup篇)

    上节我们大致了解了事件分发机制的内容,大概流程,这一节来分析下事件分发的源代码. 我们先来分析ViewGroup中dispatchTouchEvent()中的源码 public boolean dis ...

  6. Qt浅谈之二十七进程间通信之QtDBus

    一.简介 DBus的出现,使得Linux进程间通信更加便捷,不仅可以和用户空间应用程序进行通信,而且还可以和内核的程序进行通信,DBus使得Linux变得更加智能,更加具有交互性.        DB ...

  7. Qt浅谈之二十App自动重启及关闭子窗口

    一.简介 最近因项目需求,Qt程序一旦检测到错误,要重新启动,自己是每次关闭主窗口的所有子窗口但有些模态框会出现问题,因此从网上总结了一些知识点,以备以后的应用. 二.详解 1.Qt结构 int ma ...

  8. Qt浅谈之二十App自动重启及关闭子窗口(六种方法)

    一.简介 最近因项目需求,Qt程序一旦检测到错误,要重新启动,自己是每次关闭主窗口的所有子窗口但有些模态框会出现问题,因此从网上总结了一些知识点,以备以后的应用. 二.详解 1.Qt结构 int ma ...

  9. 浅谈Struts2(二)

    一.struts2的跳转 1.action跳转JSP a.默认为forward <action name="action1" class="com.liquidxu ...

  10. 浅谈JSP(二)

    一.EL表达式 作用:从作用域(pageContext,request,session,application)中取值,并显示在页面中. 本质:用于替换输出脚本(<%= %>). 1.从作 ...

随机推荐

  1. Python连接Hadoop-impala方法

    from impala.dbapi import connectfrom impala.util import as_pandas连接方式 conn1= connect(host='xxx.xxx.x ...

  2. JAVA快速获取网络图片或者URL图片并保存到本地

    JAVA快速获取网络图片或者URL图片并保存到本地,直接上代码: package com.xh.service;import org.springframework.stereotype.Servic ...

  3. 转码服务serverless探索

    背景 公司目前主要聚焦于视频这个领域,利用视频为媒体.文旅.会议等行业进行赋能. 既然聚焦于视频领域,那么视频转码则是绕不开的话题. 为了降低成本,以及保证产品的核心能力,公司自建了一套转码系统. 转 ...

  4. 464. 我能赢吗 (Medium)

    问题描述 464. 我能赢吗 (Medium) 在 "100 game" 这个游戏中,两名玩家轮流选择从 1 到 10 的任意整数,累计整数和,先使得累计整数和 达到或超过 100 ...

  5. 项目管理 VS. 个人计划

    注会考试临近,好好的安排一下自己的时间.做个小计划是很有必要的了. 突然想到一个软件也许可以帮到我的忙,那就微软提供的办公软件 Project,大学时候就知道Project软件的存在,但是始终没有机会 ...

  6. Django,Flask中的request

    request的结构获取 class Upload(Resource): def post(self): print(curPath) print(request.files['file'].__di ...

  7. elasticsearch别名

    es创建别名的好处: 1.不暴露索引名 2.可以为多个结构类似的索引(动态索引)创建相同的别名,查询的时候直接查询别名 ,然后自动匹配多个索引. 在不同的索引创建窗口.比如,如果为数据创建了每日索引, ...

  8. 用js实现元素两个元素位置对齐

    一.问题描述 使得填表单位那一行字与下面的表格左对齐,对表格使用css中的margin:auto实现了居中,但是对那一行字(用div包裹的)使用margin:auto不生效:并且2021年下面对应的月 ...

  9. wpa_supplicant 交叉编译

    交叉编译 wpa_supplicant 指定交叉编译环境: CC=arm-linux-xxxxx-gcc 运行错误 :  wlan0: Unsupported driver 'nl80211' 在.c ...

  10. 2022-05-30内部群每日三题-清辉PMP

    1.对于一个长期的基础设施项目,由于全球商业环境,项目经理必须获得风险最小的供应商.项目经理应该使用什么合同类型? A.固定总价合同(FFP) B.成本加固定费用合同(CPFF) C.总价加激励费用合 ...