前端代码重构

模式流星
• 阅读 5055

一、代码规范化

  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. 这里主要涉及到前端优化的一些工作,不展开。

点赞
收藏
评论区
推荐文章
blmius blmius
4年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Wesley13 Wesley13
3年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
美凌格栋栋酱 美凌格栋栋酱
7个月前
Oracle 分组与拼接字符串同时使用
SELECTT.,ROWNUMIDFROM(SELECTT.EMPLID,T.NAME,T.BU,T.REALDEPART,T.FORMATDATE,SUM(T.S0)S0,MAX(UPDATETIME)CREATETIME,LISTAGG(TOCHAR(
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
Jacquelyn38 Jacquelyn38
4年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
Stella981 Stella981
3年前
SpringBoot学习:整合shiro自动登录功能(rememberMe记住我功能)
首先在shiro配置类中注入rememberMe管理器!复制代码(https://oscimg.oschina.net/oscnet/675f5689159acfa2c39c91f4df40a00ce0f.gif)/cookie对象;rememberMeCookie()方法是设置Cookie的生成模
Wesley13 Wesley13
3年前
mysql设置时区
mysql设置时区mysql\_query("SETtime\_zone'8:00'")ordie('时区设置失败,请联系管理员!');中国在东8区所以加8方法二:selectcount(user\_id)asdevice,CONVERT\_TZ(FROM\_UNIXTIME(reg\_time),'08:00','0
Easter79 Easter79
3年前
SpringBoot学习:整合shiro自动登录功能(rememberMe记住我功能)
首先在shiro配置类中注入rememberMe管理器!复制代码(https://oscimg.oschina.net/oscnet/675f5689159acfa2c39c91f4df40a00ce0f.gif)/cookie对象;rememberMeCookie()方法是设置Cookie的生成模
Wesley13 Wesley13
3年前
Java日期时间API系列36
  十二时辰,古代劳动人民把一昼夜划分成十二个时段,每一个时段叫一个时辰。二十四小时和十二时辰对照表:时辰时间24时制子时深夜11:00凌晨01:0023:0001:00丑时上午01:00上午03:0001:0003:00寅时上午03:00上午0
Stella981 Stella981
3年前
Django中Admin中的一些参数配置
设置在列表中显示的字段,id为django模型默认的主键list_display('id','name','sex','profession','email','qq','phone','status','create_time')设置在列表可编辑字段list_editable
Python进阶者 Python进阶者
1年前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这