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 相关文章推荐
Add a Picture to a Microsoft Word Document
Jun 15 Javascript
firefox火狐浏览器与与ie兼容的2个问题总结
Jul 20 Javascript
JavaScript 类型的包装对象(Typed Wrappers)
Oct 27 Javascript
JavaScript使用setTimeout实现延迟弹出警告框的方法
Apr 07 Javascript
json定义及jquery操作json的方法
Sep 29 Javascript
Javascript实现页面滚动时导航智能定位
May 06 Javascript
详解JavaScript中的六种错误类型
Sep 21 Javascript
解决vue attr取不到属性值的问题
Sep 18 Javascript
Vue 自定义指令功能完整实例
Sep 17 Javascript
JavaScript正则表达式验证登录实例
Mar 18 Javascript
微信小程序swiper组件实现抖音翻页切换视频功能的实例代码
Jun 24 Javascript
解决iview table组件里的 固定列 表格不自适应的问题
Nov 13 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/08/18 国漫
php防止站外远程提交表单的方法
2014/10/20 PHP
php截取指定2个字符之间字符串的方法
2015/04/15 PHP
crontab无法执行php的解决方法
2016/01/25 PHP
在CentOS系统上从零开始搭建WordPress博客的全流程记录
2016/04/21 PHP
总结PHP如何获取当前主机、域名、网址、路径、端口和参数等
2016/09/09 PHP
ThinkPHP框架分布式数据库连接方法详解
2017/03/14 PHP
用 JSON 处理缓存
2007/04/27 Javascript
javascript 火狐(firefox)不显示本地图片问题解决
2008/07/05 Javascript
Js实现双击鼠标自动滚动屏幕的示例代码
2013/12/14 Javascript
jquery判断浏览器后退时候弹出消息的方法
2014/08/11 Javascript
jQuery实现拖拽效果插件的方法
2015/03/23 Javascript
jQuery制作简洁的图片轮播效果
2015/04/03 Javascript
详解JavaScript中数组的相关知识
2015/07/29 Javascript
JavaScript+html5 canvas实现本地截图教程
2020/04/16 Javascript
JS基于onclick事件实现单个按钮的编辑与保存功能示例
2017/02/13 Javascript
jQuery实现动态生成表格并为行绑定单击变色动作的方法
2017/04/17 jQuery
JS 组件系列之Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案
2017/06/30 Javascript
Angular2生命周期钩子函数的详细介绍
2017/07/10 Javascript
Vue.js递归组件构建树形菜单
2017/12/24 Javascript
JS实现返回上一页并刷新页面的方法分析
2019/07/16 Javascript
在vue中利用全局路由钩子给url统一添加公共参数的例子
2019/11/01 Javascript
JS通过识别id、value值对checkbox设置选中状态
2020/02/19 Javascript
[01:11:21]DOTA2-DPC中国联赛 正赛 Phoenix vs CDEC BO3 第三场 3月7日
2021/03/11 DOTA
Python pickle类库介绍(对象序列化和反序列化)
2014/11/21 Python
Python实现简单层次聚类算法以及可视化
2019/03/18 Python
详解Django项目中模板标签及模板的继承与引用(网站中快速布置广告)
2019/03/27 Python
树莓派采用socket方式文件传输(python)
2019/06/22 Python
Python爬虫运用正则表达式的方法和优缺点
2019/08/25 Python
python连接手机自动搜集蚂蚁森林能量的实现代码
2021/02/24 Python
无工作经验者个人求职信范文
2013/12/22 职场文书
2014道德模范事迹材料
2014/02/16 职场文书
教师考察材料范文
2014/06/03 职场文书
音乐教师求职信
2014/06/28 职场文书
四风问题查摆剖析材料
2014/10/11 职场文书
教你使用Jenkins集成Harbor自动发布镜像
2022/04/03 Servers