前端架构之路:数据驱动型组件-HeyUI,一个新型的VUE组件库
什么是数据驱动型组件?
其实,目前来说,也只有HEYUI组件库是这种方式的尝试者,这也是我在设计组件库的过程中,慢慢思考的成果。
所以,关于这一种定义,还没有人运用过。
当然,这也是HEYUI区别于其他组件库很重要的一点。
不熟悉HEYUI的人,可以移步:HEYUI官网。
或者也看下我们自我介绍的文章:HEYUI,新的vue组件库发布啦~~。
前言
有很多人对于我写的关于HEYUI的config全局配置不是很容易理解。
所以,今天这篇文章主要是用于仔细说明HEYUI这个“数据驱动型组件”到底是什么?
并由数据驱动型组件引发的全局配置又是如果使用的。
数据双向绑定
在说组件之前,我们来说说数据双向绑定。
我们目前终于摆脱使用jquery操作dom的方式来完成所有的交互,而是使用数据双向绑定的机制来完成我们的前端交互。
那为什么越来越多的人选择使用双向绑定呢?
因为我们希望,我们只需要来处理交互的逻辑就好,这样逻辑的变动引发的dom变动,如果能变成自动的,那么我们的开发速度,以及代码质量将会大大的增高。
想起以前,我们的修改了一个值,jquery修改一个地方的展示,修改了第二个地方的展示,还悲催的漏了第三个的改动。
那同理,我们来说说数据驱动型的组件。
数据驱动型组件
在数据双向绑定的基础之上,我们简化了dom的操作,甚至已经抛弃了jquery。
而依据于双向绑定机制开发的组件,越来越多。
那数据驱动型组件,到底和普通的组件有什么不一样的呢?
首先,我想问,大多数前端组件,到底是用来做什么的呢?
我给的答案是:给用户一组数据,让用户去选择
我将我写在heyui的全局配置的文字拿过来说明一下:
- 1~5个选择项单选:Radio, 或者Select
- 1~5个选择项多选:Checkbox, 或者Select(multiple)
- 5~15个选择项单选/多选:Select
- 15~40个选择项单选/多选:Select(filterable), 或者AutoComplete
- 40个以上或者需要远程模糊查询:AutoComplete
- 拥有层级信息的数据选择:TreePicker
不管设计是什么样子的,但是数据和交互都是一致的。
我不在乎组件是什么样子的,我们要做的,是帮你将数据与内部的交互机制封装好,让你可以按照自己的需求开发,不需要重复写一套又一套,逻辑一模一样的代码。
下面,我们通过示例来说明。
示例
线上代码&运行:codesandbox.io/s/github/vv…
简单应用
我们以demo1的示例来说明。
所有的组件都是通过datas来做处理的。
<template><Select v-model="value" :datas="options" placeholder="请选择"></Select>
</template><script>
export default {data() {return {//heyui 同时支持多种数据格式,详细可查看http://www.heyui.top/component/data/plugin/selectoptions: [ { key: "a", title: "黄金糕" }, { key: "b", title: "双皮奶" }, { key: "c", title: "蚵仔煎" }, { key: "d", title: "龙须面" }, { key: "e", title: "北京烤鸭" } ],value: "a"};}
};
</script>
复制代码
我们再看看element的示例,包括iview与ant-design都是这一种方式。
<template><el-select v-model="value" placeholder="请选择"><el-optionv-for="item in options":key="item.value":label="item.label":value="item.value"></el-option></el-select>
</template><script>export default {data() {return {options: [ { key: "a", title: "黄金糕" }, { key: "b", title: "双皮奶" }, { key: "c", title: "蚵仔煎" }, { key: "d", title: "龙须面" }, { key: "e", title: "北京烤鸭" } ],value: ''}}}
</script>
复制代码
这里主要的区分是我们没有option选项的标签编写。
其实option标签的编写,还是继承了html原生模式的思维模式。
如果你仔细看heyui的select组件,你会发现,其实我们是通过单选,双选,有没有‘请选择’选择项等配置来设定select的行为,而本身select的选择来源,我们通过dict统一配置。
有兴趣的可以去 HeyUI Select 组件 查看。
代码说明
1、展示数据驱动型组件
通过使用datas的数据,我们可以渲染不同的组件。
代码目录:src/components/demo/datas
2、定义字典
代码目录:src/js/config/dict-config.js
3、使用字典配置
代码目录:src/components/demo/dict
4、更多的应用
优势
更少的重复代码量
select 等组件,原则上面都key与title的数据,然后进行选择。
当然,我们也拥有更复杂的展现形式,这个heyui是支持的。
<Select v-model="value" :datas="options" placeholder="请选择"></Select>
复制代码
<el-select v-model="value" placeholder="请选择"><el-optionv-for="item in options":key="item.value":label="item.label":value="item.value"></el-option>
</el-select>
复制代码
当在你的系统复用无数遍的select,你会发现你的代码极其简洁。
代码可读性
当你编写一个庞大的Form,代码量的减少,一行一个组件,这样的方式可以让我们的代码可读性非常的高。
而在一些代码的复制上面,你只需要关心v-model
绑定的函数,减少了无数个for循环的代码。
代码可控性
使用dict config
,通用的字典集中化配置,更好的调用,更好的维护。
在代码编写上,只需要通过dict
属性的配置即可完成。
背景图--LAN(摄于四川若尔盖)
前端架构之路:数据驱动型组件-HeyUI,一个新型的VUE组件库相关推荐
- vue 移动端头像裁剪_vue头像上传裁剪组件_一个漂亮的Vue组件,用于图像裁剪和上传...
vue头像上传裁剪组件 vue-image-crop-upload (vue-image-crop-upload) A beautiful vue component for image crop a ...
- 前端架构之路(3) - 前端开发规范
前端开发规范 1. 为什么需要 "前端开发规范" 规范不是强制性的,对代码的编写和程序的运行不会有致命的问题,但是没有规范会有一系列的问题,比如: 缺乏规范,第一个问题就是团队编码 ...
- 前端架构之路:使用Vue开始第一个项目
Vue.js做为目前前端最热门的库之一,为快速构建并开发前端项目多了一种思维模式.本文通过一个简单的实例开始上手Vue.js开发. 一.技术准备 使用传统mvc项目的开发人员,笔者建议在开始项目前,对 ...
- 利用递归组件实现一个简单的树组件(vue3)
1. 简言 闲来无事不从容,睡觉东窗日已红. 万物静观皆自得,四时佳兴与认同. 最近学习vue3组件的时候实现了一个简单的树组件.话不多说,直接上代码. 2.效果 这个数组件实现了展开.选中和选择三个 ...
- 一个优质的Vue组件库应该遵循什么样的设计原则
一.组件库的价值 就个人而言,拥有一套自己的组件库,可以让你的开发变得更高效,让你在行业里更有价值. 就团队而言,拥有一套团队的组件库,可以让协同开发变得更高效规范,让你的团队在公司更具有影响力. 就 ...
- vue 构建根组件_构建迷你图Vue组件
vue 构建根组件 Sparklines can be used to quickly visualize data variance. They are small and intuitive to ...
- Vue组件间通信:一个例子学会Vue组件-Vue.js学习总结)(转载)
详情请点击 http://www.jianshu.com/p/9ad1ba89a04b 转载于:https://www.cnblogs.com/zhongjiang/p/6694459.html
- 前端架构师亲述:前端工程师成长之路的 N 问 及 回答
问题回答者:黄轶,目前就职于 Zoom 公司担任前端架构师,曾就职于滴滴和百度,毕业于北京科技大学. 1. 前端开发 "我自己是一名从事了8年web前端开发的老程序员(我的微信:webxxq ...
- 乾坤 微前端_微前端架构初探以及我的前端技术盘点
前言 最近几年微前端一直是前端界的热门议题, 它类似于微服务架构, 主要面向于浏览器端,能将一个复杂而庞大的单体应用拆分为多个功能模块清晰且独立的子应用,且共同服于务同一个主应用.各个子应用可以独立运 ...
最新文章
- NSIS 打包 win7 中无法删除快捷方式
- curl_init()和curl_multi_init()多线程的速度比较
- element 时间日期选择器el-date-picker点击清空按钮报错 Cannot read property ‘0‘ of null
- PAMIE:点击网页中的弹出窗口的按钮
- ImageNet标签竟然部分有误!数据集MNIST也会出错?
- oppo手机显示andrOid什么意思,OPPO R17 Pro手机状态栏图标分别代表什么意思?
- 上计算机课睡觉检讨书400,小学生上自习课睡觉检讨书
- php fpm 日志记录,使用Nginx在PHP-FPM 7上启用错误日志记录?
- 经典卷积神经网络的学习(三)—— Inception Net
- 音轨分离软件 Spleeter 使用教程及踩过的坑
- 美服lol服务器状态,LOL美服训练模式上线:炮塔可关闭 野区无限刷新
- 实验二 分析1996~2015年人口数据各个特征的分布与分散状况
- 常用物流快递单号自动识别api接口-快递鸟对接
- python线程isalive_如何在线程类上使用.isAlive()
- 微带线特性阻抗计算公式_几种计算微带线特性阻抗的方法.pdf
- java获取文件列表,[javaSE] java获取文件列表
- linux如何把文件压缩成,linux把文件压缩成.tar.gz的命令
- 第4关 注册配置中心实现
- [乐意黎转载]关于泸西县弯腰树村委会经济社会发展思路调研报告
- 公安计算机保密整改落实情况报告,2017年保密工作整改情况报告
热门文章
- 太原计算机编程开发暑期培训班,太原电脑编程少儿培训
- 深度Linux下的中望CAD软件,在Deepin系统中可用商店功能来安装中望CAD Linux预装版...
- 大数据实时计算框架简介
- AD拼版防止器件编号增加
- 问题单-CtsCameraTestCases模块下android.hardware.camera2.cts.CaptureRequestTest#testAeModeAndLock[1]测试fail
- 大咖说|如何做好一个“业务中台”
- 2017.1-2018.4低运算复杂度和存储复杂度的图像分类网络实现
- 无法在表 'Test' 中可为空的列上定义 PRIMARY KEY 约束
- NKOI 1507 做错的括号
- 网络爬虫2:使用crawler4j爬取网络内容