浅谈组件二封-vue
本文仅仅针对vue系列做探讨, 项目倾向于大量增删改查的后台管理项目
组件二封不是换一种写法
大量帖子的组件二封都是用json, 然后将prop/emit/slot通过一种json配置来完成.
不是说这种写法绝对不好, 毕竟还真有这种场景, 比如动态表单.
但是, 一般理性而论, 失去了IDE的代码提示, 失去了eslint的规范检查, 不够灵活且不方便调试.
顺带一提, 还有this指向问题.
封装的意义在于更好的维护, 而不是为了封装而封装
组件二封应当具备哪些条件
团队人员稳定
二封组件过多, 相当于每个人都要花时间了解二封的内容, 人员流动大, 二封可能会得不偿失
团队有一定的样式规范
通往罗马的路不止一条, 规范的作用是只走一条, 比如说我们有如下要求:
- 检索按钮应当在检索条件下另起一行, 并置于右侧
- 所有table应当具有斑马条纹和border
- select下拉组件应当和input组件等宽
- 分页默认10, 可选10/20/50, 居右, 变量名: pageSize(大小)/pageNum(页码)
上述规范仅举例, 未必合理. 拥有类似这样的规范, 才是二封的前提
团队有一定的编码规范
如上述样式规范, 如果没有编码规范, 每个规范实现方式都千奇百怪
那么根据上述, 我们有如下对应的编码规范
- 检索条件另起一行功能应当用el-row+"text-align: right"实现, 而不是float实现
- table的斑马条纹应当用ElTable的stripe和border属性实现, 禁止自己写css样式
- select下拉组件与input等宽, 应当由全局样式处理, 而非每个select组件上添加样式
- 分页可选参数去某个地方读取配置, 使用float固定居右
团队技术领导人具有一定能力
多了不说, vue2的话, mixin, 生命周期, 自定义指令, provide/inject, 这些官方指南上介绍的功能都应该熟悉, 还要熟悉vue的官方风格指南
vue3的话, 二封最好ts, 熟悉ts, 异步组件, 单文件组件, 自定义指令, 熟悉官方风格指南
我觉得这些就够了, 差一点也没关系, 二封没那么难. 全都是在调用原有组件的api而已
PS: 并不是说只会这些就够了
公司层面的支持
好的封装, 不论是二封, 工具类, 规范设计, 对于小公司来说都是很大的开销, 如果公司没这个打算, 还是自己捣鼓着玩吧. 就像某boss的言论: "我觉得代码写的太好或太差都不行, 别人看不懂, 还不如没写". 这种情况下就需要审时度势了
我认为的二封应当有哪些作用
- 实现团队中90%以上的功能全部使用二封组件
- 过滤掉原有组件中不推荐使用的prop/methods(expose)/slot
- 样式处理, 如检索条件的布局, 列表的布局, 常规表单的布局等等等等
- 自动的格式转换, 如日期格式应当仅使用字符串格式, 以下是几个组件常见日期格式, 几乎每次传给后端都需要自己处理一下, 很是麻烦:
- element-ui: Date/Date[]
- element-plus: Date/number/string/any[]
- antd vue 1.x: moment
- antd vue 2.x: dayjs
- 功能拓展, 列举一下我见到的一些需求, 有些功能是部分场景有的, 有些则是全部场景都要的, 全部场景都要, 就要尽量禁止开发人员关闭此功能
- table列支持拖拽调整列宽
- table支持自定义列
- 日期选择器支持快速选择, 输入时支持中文冒号
- 数字输入时, 自动提示大写, 如"一万两千三百四十二"
- 图片/视频/文档预览功能(这种需求就千奇百怪了)
- 所有弹窗支持可拖拽
- 功能屏蔽, 列举一下我见过的客户不要的, 组件默认启用的功能:
- 数字输入框, 屏蔽+/-号和控制按钮
- 弹窗干掉右上角的x号
- 弹窗不允许点击空白处关闭
- 灵活性, 业务人员只需要关心"有没有", 而不需要关心样式
- 如检索表单, 查询/重置按钮位置
- 如表格支持自定义列
- 如弹窗的可拖拽, 亦无需业务人员处理
- 如按钮封装, 业务人员无需关心使用什么按钮图标, 按钮里面应当是什么文字
二封的好处
先来一个列表页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的更多相关文章
- Android开发-浅谈架构(二)
写在前面的话 我记得有一期罗胖的<罗辑思维>中他提到 我们在这个碎片化 充满焦虑的时代该怎么学习--用30%的时间 了解70%该领域的知识然后迅速转移芳草鲜美的地方 像游牧民族那样.原话应 ...
- Delphi 组件渐进开发浅谈(二)——双简合璧
2.双简合璧2.1.带有T[x]Label的T[x]Edit组件 请允许我用[x]的书写方式来表示不同的对象.因为随后将大量提及TLabeledEdit与TTntLabeledEdit.TCustom ...
- 浅谈SpringCloud (二) Eureka服务发现组件
上面学习到了如何由一个程序访问另一个程序,那么如果使用SpringCloud来进行访问,该如何访问呐? 可以借助Eureka服务发现组件进行访问. 可以借助官方文档:https://spring.io ...
- Vue 浅谈前端js框架vue
Vue Vue近几年来特别的受关注,三年前的时候angularJS霸占前端JS框架市场很长时间,接着react框架横空出世,因为它有一个特性是虚拟DOM,从性能上碾轧angularJS,这个时候,vu ...
- Android事件分发机制浅谈(二)--源码分析(ViewGroup篇)
上节我们大致了解了事件分发机制的内容,大概流程,这一节来分析下事件分发的源代码. 我们先来分析ViewGroup中dispatchTouchEvent()中的源码 public boolean dis ...
- Qt浅谈之二十七进程间通信之QtDBus
一.简介 DBus的出现,使得Linux进程间通信更加便捷,不仅可以和用户空间应用程序进行通信,而且还可以和内核的程序进行通信,DBus使得Linux变得更加智能,更加具有交互性. DB ...
- Qt浅谈之二十App自动重启及关闭子窗口
一.简介 最近因项目需求,Qt程序一旦检测到错误,要重新启动,自己是每次关闭主窗口的所有子窗口但有些模态框会出现问题,因此从网上总结了一些知识点,以备以后的应用. 二.详解 1.Qt结构 int ma ...
- Qt浅谈之二十App自动重启及关闭子窗口(六种方法)
一.简介 最近因项目需求,Qt程序一旦检测到错误,要重新启动,自己是每次关闭主窗口的所有子窗口但有些模态框会出现问题,因此从网上总结了一些知识点,以备以后的应用. 二.详解 1.Qt结构 int ma ...
- 浅谈Struts2(二)
一.struts2的跳转 1.action跳转JSP a.默认为forward <action name="action1" class="com.liquidxu ...
- 浅谈JSP(二)
一.EL表达式 作用:从作用域(pageContext,request,session,application)中取值,并显示在页面中. 本质:用于替换输出脚本(<%= %>). 1.从作 ...
随机推荐
- Python连接Hadoop-impala方法
from impala.dbapi import connectfrom impala.util import as_pandas连接方式 conn1= connect(host='xxx.xxx.x ...
- JAVA快速获取网络图片或者URL图片并保存到本地
JAVA快速获取网络图片或者URL图片并保存到本地,直接上代码: package com.xh.service;import org.springframework.stereotype.Servic ...
- 转码服务serverless探索
背景 公司目前主要聚焦于视频这个领域,利用视频为媒体.文旅.会议等行业进行赋能. 既然聚焦于视频领域,那么视频转码则是绕不开的话题. 为了降低成本,以及保证产品的核心能力,公司自建了一套转码系统. 转 ...
- 464. 我能赢吗 (Medium)
问题描述 464. 我能赢吗 (Medium) 在 "100 game" 这个游戏中,两名玩家轮流选择从 1 到 10 的任意整数,累计整数和,先使得累计整数和 达到或超过 100 ...
- 项目管理 VS. 个人计划
注会考试临近,好好的安排一下自己的时间.做个小计划是很有必要的了. 突然想到一个软件也许可以帮到我的忙,那就微软提供的办公软件 Project,大学时候就知道Project软件的存在,但是始终没有机会 ...
- Django,Flask中的request
request的结构获取 class Upload(Resource): def post(self): print(curPath) print(request.files['file'].__di ...
- elasticsearch别名
es创建别名的好处: 1.不暴露索引名 2.可以为多个结构类似的索引(动态索引)创建相同的别名,查询的时候直接查询别名 ,然后自动匹配多个索引. 在不同的索引创建窗口.比如,如果为数据创建了每日索引, ...
- 用js实现元素两个元素位置对齐
一.问题描述 使得填表单位那一行字与下面的表格左对齐,对表格使用css中的margin:auto实现了居中,但是对那一行字(用div包裹的)使用margin:auto不生效:并且2021年下面对应的月 ...
- wpa_supplicant 交叉编译
交叉编译 wpa_supplicant 指定交叉编译环境: CC=arm-linux-xxxxx-gcc 运行错误 : wlan0: Unsupported driver 'nl80211' 在.c ...
- 2022-05-30内部群每日三题-清辉PMP
1.对于一个长期的基础设施项目,由于全球商业环境,项目经理必须获得风险最小的供应商.项目经理应该使用什么合同类型? A.固定总价合同(FFP) B.成本加固定费用合同(CPFF) C.总价加激励费用合 ...