完全重构一个项目的前端代码
前提
入职新公司,接手了前员工的一个前端项目,技术栈为vue。刚进入公司的时候,让我添加一个小功能,从首页点击选项跳转到对应页面,并携带点击点的参数,然后开启了我的痛苦修改bug阶段。
对之前的vue代码稍微理一下
- 所有文件组件代码都放在了views文件夹下,view文件夹内没有其他任何文件夹了
- 发送异步请求使用了vue-resource和axios两种方式
- 所有接口都是直接使用绝对地址,进行跨域请求
- ui组件库同时使用了elment-ui和iview
- 路由配置组件没有尽心按需加载
- 图标组件库同时使用了echarts和d3
- 使用了jquery操作DOM
- 所有无用代码依然保留在项目当中
- 一个一年左右的项目,我已经是第七任接手的前端开发人员了
同时,新任领导,正在与局方洽谈项目二期开发,然而在当前版本上,我已经没有办法继续进行新一期的开发了。
所有一切综合在一起,所以跟领导申请进行项目重构。这才导致连续一个多月,没有进行任何文章的更新了。经过前端重构,测试重新测试,项目在今天终于准备上线了,利用上线之前这一段时间,稍微总结一下,这一项目的重构。
重构的目的是可以进行新一期的继续开发,修改发现的bug,减少无谓的数据请求,由于该项目是没有设计图的,所以还得考虑页面布局。
重构之后的技术栈
- 依然是vue项目
- UI库采用element-ui
- 发送请求使用axios
- 取消所有的跨域请求
- 路由按需加载
- 图标库使用echarts
- 删除jquery
至于过程和修正业务逻辑部分不做任何表述。主要稍微简要介绍一些用户体验方面的修改。
1.关于echarts图标绘制,首先确定所有基础项配置属性,最起码在页面出来的时候,绘制出来图形基础。直接配置option。
init () {this.$nextTick(function () {if (!this.myChart) this.myChart = this.$echart.init(this.$refs.ref)this.myChart.setOption(this.option)})
}
这块其实很容易理解,初始化图标,需要在当前组件DOM绘制完成之后。
然后数据请求回来之后,对数据进行处理。
const series = ...
this.myChart.setOption({series})
这里需要理解echarts的实例方法setOption
设置图表实例的配置项以及数据,万能接口,所有参数和数据的修改都可以通过 setOption 完成,ECharts 会合并新的参数和数据,然后刷新图表。如果开启动画的话,ECharts 找到两组数据之间的差异然后通过合适的动画去表现数据的变化。
此时,echarts图表绘制基本完成,考虑到用户体验,还需要监听浏览器resize事件,此时,echarts也提供了echarts的实例方法resize,所以只要监听了window.onresize,然后调用echrtsInst.resize()即可。
window.addEventListener('resize', () => {if (this.myChart) this.myChart.resize()
}, false)
前后也就三行代码,给人的体验是完全不一致的。
剩下的其实就是代码规范之类的。
建议
代码组织,按照vuejs官方风格指南。
代码规范,采用eslint进行约束,虽然第一次使用,需要配置idea开发工具(因为我们基本上都会装上prettier插件),比较麻烦,但是后面真是一劳永逸的工作。
转载于:https://www.cnblogs.com/zhuhuoxingguang/p/11433248.html
完全重构一个项目的前端代码相关推荐
- 如何在github上fork一个项目来贡献代码以及同步原作者的修改
如何在github上fork一个项目来贡献代码以及同步原作者的修改 作为一个IT人,通过github进行学习是最快的成长手段.我们可以浏览别人的优秀代码.但只看不动手还是成长得很慢,因此为别人贡献代码 ...
- 窥探原理:实现一个简单的前端代码打包器 Roid
roid roid 是一个极其简单的打包软件,使用 node.js 开发而成,看完本文,你可以实现一个非常简单的,但是又有实际用途的前端代码打包工具. 如果不想看教程,直接看代码的(全部注释):点击地 ...
- 一个项目学会前端实现登录拦截
一个项目学会vue全家桶+axios实现登录.拦截.登出功能,以及利用axios的http拦截器拦截请求和响应. 前言 该项目是利用了Github 提供的personal token作为登录token ...
- 在线html代码测试工具,CodePen - 一个在线的前端代码编辑工具(可用于制作测试页面、代码调试)...
有时我们需要调试一些前端代码(无论是 html.css,还是 js),或者要制作一个 demo 分享给他人.这些都可以借助 CodePen 这个网站来实现. 一.基本介绍 1,什么是 CodePen? ...
- 一个在线编写前端代码的好玩的工具
https://codesandbox.io/ 可以编写 Angular,React,Vue 等前端代码. 可以实时编辑和 preview. live 功能,可以多人协作编辑,不过是收费的功能. 可以 ...
- 【转】如何在github上fork一个项目来贡献代码以及同步原作者的修改 -- 不错
原文网址:http://www.cnblogs.com/astwish/articles/3548844.html 作为一个IT人,通过github进行学习是最快的成长手段.我们可以浏览别人的优秀代码 ...
- 前端代码标准最佳实践:javascript篇
2019独角兽企业重金招聘Python工程师标准>>> 前言 最近一直重构项目的前端代码,也参考了各种前端代码的最佳实践,目的是让前端的HTML,CSS,Javacript代码更符合 ...
- 如何降低前端代码圈复杂度?
作者 | ConardLi 责编 | maozz 出品 | CSDN(ID:CSDNnews) 写程序时时刻记着,这个将来要维护你写的程序的人是一个有严重暴力倾向,并且知道你住在哪里的精神变态者. 导 ...
- 前端代码质量-圈复杂度原理和实践
写程序时时刻记着,这个将来要维护你写的程序的人是一个有严重暴力倾向,并且知道你住在哪里的精神变态者. 1. 导读 你们是否也有过下面的想法? 重构一个项目还不如新开发一个项目... 这代码是谁写的,我 ...
- 技术总监灵魂一问:你精通那么多技术,为何还做不好一个项目?
作者 | 李英权 来源 | 四猿外(ID:si-yuanwai) 编写高质量可维护的代码既是程序员的基本修养,也是能决定项目成败的关键因素,本文试图总结出问题项目普遍存在的共性问题并给出相应的解决方案 ...
最新文章
- python 的文件目录拷贝转移,自动递归目录建立目录
- 44种模型、1200种子网,RobustART评测CNN、Transformer、MLP-Mixer谁最鲁棒?
- 在亚马逊网站上查看此物品
- 【 C 】预处理指令
- 浅谈runtime运行时机制
- api怎么写_月薪几十K 的人是怎么设计REST API
- 行高 line-height
- Objective-C基础笔记(3)OC的内存管理
- mysql 整数_MySQL 整数(int)数据类型
- 四种常见的 POST 提交数据方式对应的content-type取值
- 技术解析:一文看懂 Anolis OS 国密生态 | 龙蜥专场
- Django(三)模板
- 【超参数寻优】交叉验证(Cross Validation)超参数寻优的python实现:多参数寻优
- iTextSharp 生成pdf Form 实例
- 亲身体验 DDOS(拒绝服务)攻击硬防DIY
- 评分卡模型python实现
- 尚硅谷谷粒商城第九天 模板引擎-Thymeleaf
- FBI 打击全球 DDoS 出租市场
- (更新时间)2021年6月5日 商城高并发秒杀系统(.NET Core版) 36-高并发秒杀项目k8s集群部署
- gearman 总结
热门文章
- APACHE配置文件中文版 httpd.conf FOR Apache 2.2.4
- 「leetcode」129. 求根到叶子节点数字之和【递归中隐藏着回溯】详解
- 「Leetcode」707.设计链表:一道题目考察了常见的五个操作!
- SSH客户端:Termius for Mac
- Charles for Mac(信息抓包工具)
- BricsCAD 22 for Mac(CAD建模软件)
- macBook户外省电有技巧,2招即可找出高耗电应用
- Screaming Frog SEO Spider for Mac进行网页抓取和数据提取的技巧
- CC***的解决方案
- Centos 7 keepalived双机热备