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 高级语法介绍
Jun 15 Javascript
Jquery 插件学习实例1 插件制作说明与tableUI优化
Apr 02 Javascript
javascript对象的使用和属性操作示例详解
Mar 02 Javascript
JS截取url中问号后面参数的值信息
Apr 29 Javascript
js怎么判断flash swf文件是否加载完毕
Aug 14 Javascript
jQuery中:lt选择器用法实例
Dec 29 Javascript
js判断是否按下了Shift键的方法
Jan 27 Javascript
javascript实现获取浏览器版本、操作系统类型
Jan 29 Javascript
vue cli使用绝对路径引用图片问题的解决
Dec 06 Javascript
JS实现键值对遍历json数组功能示例
May 30 Javascript
JavaScript文本特效实例小结【3个示例】
Dec 22 Javascript
JS中如何轻松遍历对象属性的方式总结
Aug 06 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
[原创]效率较高的php下读取文本文件的代码
2008/07/02 PHP
php在多维数组中根据键名快速查询其父键以及父键值的代码
2011/05/07 PHP
PHP二维数组的去重问题解析
2011/07/17 PHP
PHP下判断网址是否有效的代码
2011/10/08 PHP
解析php多线程下载远程多个文件
2013/06/25 PHP
thinkphp配置连接数据库技巧
2014/12/02 PHP
php去除二维数组的重复项方法
2015/11/03 PHP
PHP从数组中删除元素的四种方法实例
2017/05/12 PHP
PHP基于rabbitmq操作类的生产者和消费者功能示例
2018/06/16 PHP
浅谈laravel5.5 belongsToMany自身的正确用法
2019/10/17 PHP
php swoft框架实例用法
2020/12/22 PHP
浅析hasOwnProperty方法的应用
2013/11/20 Javascript
利用JQuery制作符合Web标准的QQ弹出消息
2014/01/14 Javascript
jquery取子节点及当前节点属性值的方法
2014/09/09 Javascript
Bootstrap每天必学之下拉菜单
2015/11/25 Javascript
jquery捕捉回车键及获取checkbox值与异步请求的方法
2015/12/24 Javascript
js弹出窗口返回值的简单实例
2016/05/28 Javascript
AngularJS 模型详细介绍及实例代码
2016/07/27 Javascript
jQuery中Datatables增加跳转到指定页功能
2017/02/08 Javascript
AngularJS  ng-repeat遍历输出的用法
2017/06/19 Javascript
关于AngularJS中ng-repeat不更新视图的解决方法
2018/09/30 Javascript
jquery无缝图片轮播组件封装
2020/11/25 jQuery
vue 解决数组赋值无法渲染在页面的问题
2019/10/28 Javascript
jQuery事件模型默认行为执行顺序及trigger()与 triggerHandler()比较实例分析
2020/04/30 jQuery
微信小程序实现菜单左右联动
2020/05/19 Javascript
three.js 实现露珠滴落动画效果的示例代码
2021/03/01 Javascript
python使用super()出现错误解决办法
2017/08/14 Python
django框架单表操作之增删改实例分析
2019/12/16 Python
Python __slots__的使用方法
2020/11/15 Python
Python爬虫回测股票的实例讲解
2021/01/22 Python
HTML5通过navigator.mediaDevices.getUserMedia调用手机摄像头问题
2020/04/27 HTML / CSS
英国家用电器购物网站:Hughes
2018/02/23 全球购物
营销与策划个人求职信
2013/09/22 职场文书
班子四风对照检查材料思想汇报
2014/09/29 职场文书
党的作风建设心得体会
2014/10/22 职场文书
nginx如何将http访问的网站改成https访问
2021/03/31 Servers