本文仅仅针对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. 【KAWAKO】TVM-在ubuntu服务器上的安装

    目录 下载源码 安装依赖库 修改config.cmake文件 编译 安装python库 添加tophub 简单验证 官方的安装教程在这里 下载源码 从Download Page中下载下来的源码是0.8 ...

  2. scrapy的pipline的不同操作

    针对json文件 import json import os class SpyOppoPipeline: def __init__(self): self.file = open('曹姐.json' ...

  3. grequest案例对比requests案例

    grequets和requests案例各一个,使用上对比: import grequests import requests headers = { "content-type": ...

  4. JZOJ 2020.02.25【NOIP提高组】模拟A 组

    闲话 难度似乎比之前的简单了一些 但是难的题还是很难(我太菜了) 总结 针对三个题,先罗列正解所涉及的算法:字符哈希,组合数学,点分治 最后一个不会 组合数学?还好吧 字符哈希? 放在 \(T1\) ...

  5. CCRD_TOC_2008年第11期

    中信国健临床通讯 2008年第11期(总第24期) 目 录   脊柱关节炎 1. 一项多中心.大型.随机.双盲.对照试验证实依那西普治疗AS的疗效优于柳氮磺吡啶 Braun J, et al. ACR ...

  6. LCD1602液晶屏

    单片机系统用到的液晶屏(简称LCD)有很多类型,最常用的有两种,一种是1602型(即每行可显示16个字符,同时能显示2行),另一种是12864型(即每行可显示128个点,每列可显示64个点).一般前一 ...

  7. 前端JavaScript深拷贝的三种方法,看了不后悔!!!

    深拷⻉ 深拷⻉开辟⼀个新的栈,两个对象属完成相同,但是对应两个不同的地址,修改⼀个对象的属性,不会 改变另⼀个对象的属性 常⻅的深拷⻉⽅式有: _.cloneDeep() jQuery.extend( ...

  8. 不用PyScript,网页端运行的Python编辑器

    原文:https://lwebapp.com/zh/python-online 需求 有小伙伴可能听说过 PyScript,知道了Python可以通过打包成wasm运行在浏览器端了,这样做一些需要Py ...

  9. LinuxK8S集群搭建二(Node节点部署)

    系统环境: CentOS 7 64位 准备工作: 通过虚拟机创建三台CentOS服务器,可参照之前的文章:Windows10使用VMware安装centos192.168.28.128 --maste ...

  10. nohup原理

    Nohup的原理也很简单,终端关闭后会给此终端下的每一个进程发送SIGHUP信号,而使用nohup运行的进程则会忽略这个信号,因此终端关闭后进程也不会退出. Linux的信号 SIGHUP:当用户退出 ...