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 相关文章推荐
javascript显示隐藏层比较不错的方法分析
Sep 30 Javascript
jquery刷新页面的实现代码(局部及全页面刷新)
Jul 11 Javascript
jquery获取被勾选的checked(选中)的那一行的3列和4列的值
Jul 04 Javascript
JavaScript动态修改网页元素内容的方法
Mar 21 Javascript
为什么JS中eval处理JSON数据要加括号
Apr 13 Javascript
JavaScript中的toDateString()方法使用详解
Jun 12 Javascript
详解Javacript和AngularJS中的Promises
Feb 09 Javascript
javascript获取select标签选中的值
Jun 04 Javascript
原生javascript实现图片放大镜效果
Jan 18 Javascript
Angularjs添加排序查询功能的实例代码
Oct 24 Javascript
JS实现百度搜索接口及链接功能实例代码
Feb 02 Javascript
package.json配置文件构成详解
Aug 27 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
ThinkPHP实现将SESSION存入MYSQL的方法
2014/07/22 PHP
document对象execCommand的command参数介绍
2006/08/01 Javascript
修改jquery里的dialog对话框插件为框架页(iframe) 的方法
2010/09/14 Javascript
jquery ajax请求实例深入解析
2012/11/26 Javascript
纯javascript实现分页(两种方法)
2015/08/26 Javascript
浅谈JavaScript函数的四种存在形态
2016/06/08 Javascript
JS模仿腾讯图片站的图片翻页按钮效果完整实例
2016/06/21 Javascript
简单谈谈ES6的六个小特性
2016/11/18 Javascript
jQuery实现鼠标滑过图片移动特效
2016/12/08 Javascript
AngularJs中 ng-repeat指令中实现含有自定义指令的动态html的方法
2017/01/19 Javascript
利用transition实现文字上下抖动的效果
2017/01/21 Javascript
RequireJs的使用详解
2017/02/19 Javascript
EasyUI Datebox 日期验证之开始日期小于结束时间
2017/05/19 Javascript
bing Map 在vue项目中的使用详解
2018/04/09 Javascript
vue的过滤器filter实例详解
2018/09/17 Javascript
在node中使用jwt签发与验证token的方法
2019/04/03 Javascript
如何自动化部署项目?折腾服务器之旅~
2019/04/16 Javascript
javascript中this的用法实践分析
2019/07/29 Javascript
vue开发移动端底部导航条功能
2020/04/08 Javascript
[06:53]DOTA2每周TOP10 精彩击杀集锦vol.3
2014/06/25 DOTA
[35:29]Secret vs VG 2018国际邀请赛淘汰赛BO3 第三场 8.23
2018/08/24 DOTA
[50:50]完美世界DOTA2联赛PWL S3 Galaxy Racer vs Phoenix 第一场 12.10
2020/12/13 DOTA
Python实现网站文件的全备份和差异备份
2014/11/30 Python
深入解析Python中的list列表及其切片和迭代操作
2016/03/13 Python
详解django三种文件下载方式
2018/04/06 Python
详解Python解决抓取内容乱码问题(decode和encode解码)
2019/03/29 Python
HTML5拖拽API经典实例详解
2018/04/20 HTML / CSS
深入了解canvas在移动端绘制模糊的问题解决
2019/04/30 HTML / CSS
质检部岗位职责
2013/11/11 职场文书
协商一致解除劳动合同协议书
2014/09/14 职场文书
员工年终自我评价
2014/09/14 职场文书
硕士论文致谢范文
2015/05/14 职场文书
律师函格式范本
2015/05/27 职场文书
先进个人事迹材料(2016推荐版)
2016/03/01 职场文书
聊聊JS ES6中的解构
2021/04/29 Javascript
Mysql中 unique列插入重复值该怎么解决呢
2021/05/26 MySQL