Vue实战中的模块化开发
最近公司接了一个Pc端的后台项目，所以我也从APP转向了Web平台的开发，在经受了一年多的APP开发的折磨之后终于迎来了春天，再也不用自己梳理业务、绘制原型、编写各种文档、处理IM、做后台保活这些让人秃顶的事，终于可以轻松的做我的码农了。
前端技术选择
使用的技术：Vue
使用的UI库：若依
api: axios
总结
虽然这种后台管理系统都比较简单，多数页面都是重复重复再重复，但是在开发过程中如果用心去写，去总结还是会有很多收获的，结束。
这就结束了？
不，开个玩笑，哈哈
一、什么是模块化开发
举用积木造房子例子说明什么是模块化：
加入我们想用积木拼一个房子出来，我们会先将一个个积木拼接成一个个的横条，圆圈等小模块，然后再用这些横条、圆圈这些小模块拼成墙面、窗户、门、房顶等大模块，最后再用墙面、窗户、房顶拼成最终的成品——房子。这些小模块和大模块拼装过程就是模块化。小模块更加的灵活，大模块对于开发同类的产品更快
二、模块化开发的优点
想必很多新手都遇到过这种情况：拿到设计图后一看一共30个页面其中有一半以上的页面基本上都是重复的这不是很容易搞定吗？偷偷的一笑，安抚一下自己浮躁的内心就开始写第一个页面，然后非常熟练地使用CV大发（Ctrl+C/V）完成任务，这个时候产品经理过来说这块布局不好看改一下，然后我们一顿操作一个页面一个页面的改，改完了产品经理又说这样也不好看，再麻烦一下改回去吧，是不是突然就傻比了？
这个时候模块化开发的优点就凸显出来了，我们直接写一个适合大部分情况的模板，然后根据页面的具体要求稍作修改即可满足需求，省时省力还能减少的代码量，方便后期的维护工作，并且在这个项目写的东西，说不定在另外一个项目中还能用的到，你说爽不爽。
三、模块化开发在我本次开发中发挥的优势
既然知道了什么是模块化和模块化开发的优点,当然是用起来啦，光说不练假把式。
1、产生封装想法的背景：
在此次开发中前端共两人，我和另外一个前端，在我入这个项目之前都是她一人在做；刚入项目组的时候我对这个项目是一脸蒙蔽，当时写页面还是copy她的页面然后自己再慢慢的改，但写两个页面之后我基本上对这些有个大概的了解了，然后我就不再按照她的开始写了。因为我通过写的这两个界面发现页面中有些地方是通用的，但是每个页面都需要写一次即使是copy也需要花费很多时间去做修改，所以我就想能不能生成一个模板哪里用引哪里。
我对比了之前的页面和所有的原型图，因为设计是个大懒逼设计图都是残缺的所以看原型图比较全些，对比发现页面基本上包含两大元素一个是搜索条件模块，一个是列表展示模块，列表展示直接用elementUI的el-table已经够简单了绘制起来不复杂所以保持现状即可，那么就剩下搜索条件这块了，我对比发现所有页面的搜索条件加起来基本上就那几个只是不同的页面显示的检索条件不同而已，所以就开始了第一版的搜索条件封装。
2、页面搜索条件模块化封装的第一版
- 实现思路：将所有的搜索条件放入同一个Vue组件中，然后加上判断条件控制元素的显示隐藏，统一引入api接口，给每一个搜索条件添加一个change事件，当用户改变选项时调用父组件的方法将参数传入到父组件，大概就这么个思路；
- 完成封装并使用：花费了半天的时间开始搞，第一步计划先将当前页面所需要的搜索条件给封好放到公共组件中，以后页面用到其他的再慢慢的添加，搞好之后我就迫不及待的想要写个页面试试，然后发现真的省事了很多，嘿嘿美滋滋。
- 发现新问题：接下来几个页面都是按照这种方式去进行开发，但是随着页面的增加和搜索元素的增加页面变得越来越臃肿，即使当初写的时候基本上我每一行每一个功能都有注释我也不愿意再看这个组件的内容了，真是糟糕透顶了，所以开始了第二版的封装.
3、页面搜索条件模块化封装的第二版
- 目标：因为第一版代码的臃肿所以产生的第二版的封装，那么这个版本主要任务就是在继承第一版的优点的同时使代码更加的简洁易于维护；
- 实现思路：将整个搜索模块分成多个模块，第一个模块就是外层的壳子，内部放入一个插槽(slot)；然后再将每一个搜索条件都单独封装，最后将所有的组件挂载到全局供整个项目使用
- 结果：感觉挺好用再也不用写一堆v-if了代码也简化了不少，并且也是实现了样式上的统一，如果要更改搜索条件的布局只用改外边的那层壳子，哎，真香！
4、优势
- 开发中的优势，做的重复工作少了很多，代码量也少了很多
- 后期维护中的优势，有一天领导让我们将所有的搜索框添加一个模糊搜索的功能，我写的页面只用修改一下封装好的几个模块然后就大功告成了，另外一个前端需要一个页面一个页面的改，我想这优势够明显吧
最后当一下搬运工：
初步理解前端模块化开发
模块化开发
算了你们还是自己百度吧！
Vue实战中的模块化开发相关推荐
- 真 · 前端Vue实战：头条新闻开发项目（下）
现在在企业里面,Vue成为前端框架中最火的一个.由于其简单易学,越来越多的网站前端开始采用Vue开发,毋庸置疑,掌握Vue技术可以为你的职场增加更多的机会. 今晚,黑马程序员金牌讲师伍老师,将为大家 ...
- 从实战中了解数据开发全流程——DataWorks OpenAPI实战
简介:DataWorks作为飞天大数据平台操作系统,历经11年发展,形成了涵盖数据集成.数据开发.数据治理.数据服务的一站式大数据开发治理平台.很多企业用户在使用产品的过程中希望他们的本地服务能够和阿 ...
- 实战中的Agile开发
Agile(敏捷)开发介绍 开始本篇之前先来大致看看敏捷开发的内容: 首先敏捷开发的宣言: 个体和交互 胜过 过程和工具 可以工作的软件 胜过 面面俱到的文档 客户合作 胜过 合同谈判 响应变化 胜过 ...
- Vue实战中的一些小魔法
大家好,我是漫步,之前我分享过一篇关于Vue性能优化的文章反响不错,今天分享一篇类似的,希望你看完有所收获. -- 已经好久好久没写过文章,上一次写应该是年前吧,可能是变懒了吧.最近都在看坑找坑,闲下 ...
- 发现新大陆＞think-addons可以在自己的应用中做模块化开发
think-addons 项目地址: https://github.com/zz-studio/think-addons composer require zzstudio/think-addons ...
- Node.js模块化开发||Node.js中模块化开发规范
JavaScript开发弊端 a.js b.js JavaScript在使用时存在两大问题,文件依赖和命名冲突. 生活中的模块化开发 软件中的模块化开发 app.j user.一个功能就是一个模块,多 ...
- 模块加载及第三方包：Node.js模块化开发、系统模块、第三方模块、package.json文件、Node.js中模块的加载机制、开发环境与生产环境、cookie与session
1.Node.js模块化开发 1.1 JavaScript开发弊端 JavaScript 在使用时存在两大问题,文件依赖和命名冲突. 1.2 软件中的模块化开发 一个功能就是一个模块,多个模块可以组成 ...
- Vue data 中随意更改一个属性，视图都会被更新吗？
以下内容来自公众号逆锋起笔,关注每日干货及时送达 作者:Rudy24 链接:https://juejin.cn/post/7040733315791323143 面试官:看过 Vue 的源码没? 候选 ...
- 视频教程-vue 实战培训课程-Vue
vue 实战培训课程 从事it开发7年以上,HP.Mysql.linux.apache,nginx,lvs,docker,golang,lua,python,c/c++等技术,对服务化分布式存储.ms ...
最新文章
- 循环小数是分数集合吗_2020年部分CFA国外考场取消，通过率会受影响吗？
- 随机梯度下降、批量梯度下降、小批量梯度下降分类是什么？有什么区别？batch_size的选择如何实施、有什么影响？
- 乔布斯当年是这样面试我的，你能挺到哪一步？
- Atitit 项目的主体设计与结构文档 v5
- Atitit 图像处理的心得与疑惑 attilax总结
- 二分逼近二分查找 高效解析800万大数据之区域分布
- 信息系统项目管理师-信息系统项目管理基础考点笔记
- [收集]美女与野兽——萨尔和吉安娜的绯闻
- [vue-cli]vue-cli3你有使用过吗？它和2.x版本有什么区别？
- python在线搭建教程_理解python web开发，轻松搭建web app！
- 左对齐杨辉三角python_python实现杨辉三角思路
- 如何改变Myeclipse编辑区背景色(转)
- [译]36 Days of Web Testing(六)
- git问题ERROR: Repository not found.的解决办法
- round()和trunc()函数的应用
- 从 ASCII 到 UTF-8 : 大话编码
- CSS：布局——圣杯布局和双飞翼布局
- 未来教育考试系统无法答题，点击选项后没有反应，不会记录答题
- 合并Python列表的魔幻12法
- 5.15 vs2019 静态编译_《淫巧系列一》MATLAB编译exe与生成C++库