web前端代码重构

更新日期: 2019-10-12阅读: 2.3k标签: 重构

一、代码规范化

1. 整理一套vscode中格式化配置,在页面保存时自动格式化,团队成员格式统一(搭配eslint)。

2. 整理项目中的命名(不要嫌长,但也不能过于冗长,尽量能让人一眼看明白)

1. 私有变量前加'_'
2. 方法使用驼峰命名
3. 组件大写开头的驼峰命名
4. 样式'-'连接
5. 文件名统一

3. html嵌套尽量少于5层,标签语义化。

4. 规范项目中的注释(可稍晚点进行)


二、删除冗余代码

1. 删除项目中没有用到的代码

2. 去掉页面中引入了却没有使用的组件

3. 删掉项目中用不到的文件


三、重构样式(sass)

1. 通用样式中的代码需适当合理放置(基础样式、颜色样式、边距样式、字体样式等)。

2. 无需大批量生成基础样式,用到的放上就好了。

3. 组件及页面内的独立样式使用scoped区别开。

4. 布局统一,不要em/rem/px混合使用。

5. 少用或不用通配符。


四、修复一些逻辑或代码错误

1. 项目中出现一些js异常报错问题(例如,遍历接口返回的数据,但是接口返回的是null,这时就需要兼容下)

2. 因为前开发者的逻辑问题,导致代码异常难改,各种混乱引用。

3. 对于可能出现问题的地方,需要尽行异常捕获,并处理异常情况。

4. 对于定时器,在离开页面的时候必须清理掉。


五、抽离公共方法

1. 基础方法需抽离出来,放到公共模块。

2. 项目中,两次及以上用到的同一功能方法,都需提取出来。

3. 一个方法超过一屏幕,基本就要考虑抽离了。


六、抽离公共组件

1. 基础组件需抽离出来。

2. 两次及以上用到同一功能的代码,都应该抽离成组件的形式,便于重复使用。

3. 组件可以引用组件,但是必须防止死锁。


七、优化组件内部代码

1. 组件内部代码,如有不合理或者冗余的地方,必须进行优化。

2. props中参数,补全类型及默认值。


八、优化公共方法实现

1. 方法内,如有不合理的实现,必须优化掉。

2. 简单逻辑简单化,不要过于复杂实现。

3. 公共方法,尽量通用,解偶。


九、接口相关优化

1. 请求接口功能统一封装。

2. 请求url统一管理。

3. 错误信息必须捕获并提示。


十、提高页面加载性能

1. 这里主要涉及到前端优化的一些工作,不展开。


链接: https://fly63.com/article/detial/6807

web页面的重构和回流【转载】

在了解什么是重构和回流之前,我们应该先看看浏览器是怎么渲染的?浏览器的渲染过程;什么是重构和回流;什么操作会引起重绘、回流;浏览器对回流的优化;如何减少回流、重绘

web页面重构和前端性能优化

在不改变外部行为的前提下,简化结构、添加可读性,而在网站前端保持一致的行为;你有用过哪些前端性能优化的方法?减少http请求次数:CSS Sprites, JS、CSS源码压缩、图片大小控制合适

代码重构!你敢吗?

我从基础架构部门,转调到业务部门。技术负责人想让我搞定业务系统的稳定性问题。当时的业务系统确实存在不少问题,不过我初来乍到,对整体系统不熟悉,就想在熟悉一段时间后再动手。

代码重构的基本认知

代码不可能在第一次就写得完美,这是一个持续修改的过程,那么应该怎么来进行呢?好代码的检验标准就是人们是否能轻而易举地修改它。

前端项目重构要点总结

项目是公司主打业务产品之一的可视化子项目,与其他子项目几乎没有耦合,所以可以单独拎出来重构。具体业务不作描述。技术主要用的是Vue2系列和JavaScript,还有一个自研的可视化工具库。第一个重构原因就是没有引入静态类型

重构保持函数的单一职责

单一职责的定义可以理解为:一个对象或者方法,只做一件事。遵守单一职责的实例太多了,下面简单列举一下。说是这样说,但是大家看着可能会有点懵,看不出来遵守单一原则有什么好处,下面看一个实例。

指尖前端重构(React)技术调研分析

React是当前前端应用最广泛的框架。三大SPA框架 Angular、React、Vue比较。Angular出现最早,但其在原理上并没有React创新的性能优化,且自身相对来说显得笨重。Vue出现最晚,其核心原理学习了React

JavaScript重构技巧-让函数简单明了

JavaScript 是一种易于学习的编程语言,编写运行并执行某些操作的程序很容易。然而,要编写一段干净的JavaScript 代码是很困难的。

代码重构的实战经验和那些坑

我在一家创业公司的小团队里搞软件开发。彼时我们有一位真实的企业客户,且软件的第一版也已发布。开发按进度完工,在发布时我欣喜若狂

前端的自动化重构

过去,我一直想着抽时间写一个小的前端工具,以对代码进行自动化的重构。但是呢,经过我再三的考虑,我暂时取消了这个打算 —— 主要是没时间

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!