Vue组件化开发思考


Posted in Javascript onFebruary 02, 2018

一般说到组件,我首先想到的是弹窗,其他就大脑空白了。

因为觉得这个是在项目中最常用的功能,提取出来方便复用的才是组件~

然而我才发现这个想法是有问题的。

我发觉可能从意识上把Vue的组件和UI库的组件(弹窗之类的)混淆了。。。

缘起于最近的一个表单开发,页面上有2个是联动菜单的选项。

首先想到的是,这个样式和选择地址的那个联动菜单,完全一样哈~

(废话,同一个项目 当然要保持ui风格的相同啊!)

不过差别在于 我这个是 一个1级 一个2级, 地址那个是4级的.

Vue组件化开发思考

然后我就想着把那个地址的组件引进来用,发现这是个写死4级的

这个时候我只想到2种办法

1,分别改写成1级选项和2级选项的2个组件(好像比较low)

2,引用4级联动组件,改写成可选1级选项或2级选项(有点麻烦,到时候还要测地址没被我改坏)

3,重写一个可以通用无限联动菜单(方便可选级的)

最后选了3,自己重新搞了个。

至于为什么没有整合2,主要考虑到这两个组件所处的业务页面不同逻辑也有些差异:

1获取列表的逻辑可能不同,是一次性获取4级还是每次只获取1级或2级,

这个不确定的话,做成通用组件就都要处理了

2我这个是直接弹选项的,地址那个是跳新页面再点击弹选项的

我这个可以父子组件传递数据,地址那个用了vuex(非父子)

总之就是实现成本和维护成本高,复用价值没那么高。

相当于2个页面都各自有一个样式相同逻辑不同的组件。

这完全是2个组件~

复制其通用样式部分,在各自内部实现其业务逻辑。

两个组件放在不同的板块内,相互独立,方便管理和维护。

这个时候 再结合vue组件化的图来看 你会清楚

对于组件化开发

分治(自有业务逻辑)比复用(相同逻辑) 更为重要!

复杂的业务逻辑配合vuex更方便实现组件化~

所以我理解组件化的组件是应该泛指是 高内聚低耦合(某phper讲给我的专业名词,不知道放这用对不对哈)的~

Vue组件化开发思考

Javascript 相关文章推荐
在js中使用"with"语句中跨frame的变量引用问题
Mar 08 Javascript
JQuery中对服务器控件 DropdownList, RadioButtonList, CheckboxList的操作总结
Jun 28 Javascript
js获取内联样式的方法
Jan 27 Javascript
javascript 数组操作详解
Jan 29 Javascript
JS+CSS实现自适应选项卡宽度的圆角滑动门效果
Sep 15 Javascript
Java Mybatis框架入门基础教程
Sep 21 Javascript
基于JQuery的购物车添加删除以及结算功能示例
Mar 08 Javascript
vue、react等单页面项目部署到服务器的方法及vue和react的区别
Sep 29 Javascript
简单说说angular.json文件的使用
Oct 29 Javascript
ES6 Proxy实现Vue的变化检测问题
Jun 11 Javascript
js实现开关灯效果
Mar 30 Javascript
微信小程序开发中var that =this的用法详解
Jan 18 Javascript
微信小程序实现导航栏选项卡效果
Jun 19 #Javascript
解析Vue.js中的组件
Feb 02 #Javascript
如何将你的AngularJS1.x应用迁移至React的方法
Feb 01 #Javascript
vue 2.0 购物车小球抛物线的示例代码
Feb 01 #Javascript
js中getBoundingClientRect的作用及兼容方案详解
Feb 01 #Javascript
深入剖析Express cookie-parser中间件实现示例
Feb 01 #Javascript
JS 实现百度搜索功能
Feb 01 #Javascript
You might like
哪吒敖丙传:新人物二哥敖乙出场 小敖丙奶气十足
2020/03/08 国漫
理解和运用PHP中的多态性[译]
2011/08/02 PHP
openflashchart 2.0 简单案例php版
2012/05/21 PHP
php将textarea数据提交到mysql出现很多空格的解决方法
2014/12/19 PHP
织梦sitemap地图实时推送给百度的教程
2015/08/03 PHP
详谈php静态方法及普通方法的区别
2016/10/04 PHP
Document 对象的常用方法
2009/07/31 Javascript
js中根据字数截取字符串,不能截断url
2012/01/12 Javascript
基于JavaScript 数据类型之Boolean类型分析介绍
2013/04/19 Javascript
js将控件隐藏及display属性的使用介绍
2013/12/30 Javascript
js实现感应鼠标图片透明度变化的方法
2015/02/20 Javascript
JQuery显示隐藏页面元素的方法总结
2015/04/16 Javascript
基于Jquery和CSS3制作数字时钟附源码下载(CSS3篇)
2015/11/24 Javascript
node.js中http模块和url模块的简单介绍
2017/10/06 Javascript
微信小程序如何加载数据库真实数据的实现
2020/03/04 Javascript
vue 封装 Adminlte3组件的实现
2020/03/18 Javascript
小程序实现上传视频功能
2020/08/18 Javascript
详解Python进程间通信之命名管道
2017/08/28 Python
tensorflow实现softma识别MNIST
2018/03/12 Python
Python实现爬虫爬取NBA数据功能示例
2018/05/28 Python
python的常见矩阵运算(小结)
2019/08/07 Python
python 微信好友特征数据分析及可视化
2020/01/07 Python
python+selenium 简易地疫情信息自动打卡签到功能的实现代码
2020/08/22 Python
python PIL模块的基本使用
2020/09/29 Python
意大利在线药房:shop-farmacia.it
2019/03/12 全球购物
惠普香港官方商店:HP香港
2019/04/30 全球购物
德国户外装备、登山运动和攀岩商店:tapir store
2020/02/12 全球购物
银行自荐信范文
2013/10/07 职场文书
初中校园广播稿
2014/02/02 职场文书
年会搞笑主持词
2014/03/27 职场文书
我的祖国演讲稿
2014/05/04 职场文书
车队安全员岗位职责
2015/02/15 职场文书
详解PHP服务器如何在有限的资源里最大提升并发能力
2021/05/25 PHP
Java后台生成图片的完整步骤
2021/08/04 Java/Android
python3中apply函数和lambda函数的使用详解
2022/02/28 Python
利用nginx搭建RTMP视频点播、直播、HLS服务器
2022/05/25 Servers