本文已参与好文召集令活动，点击查看：后端、大前端双赛道投稿，2万元奖池等你挑战！
前段时间因为校招同学毕业了，开始来公司做了些项目，刚好最近有空闲的时间，就去看了看他们写的代码，发现整体写的还行，但是也发现了些问题，下面从几个方面来说说发现的问题，希望能帮助到刚工作的同学。
界面用户体验方面
- 提示不友好，代码上的错误不应该直接呈现给用户，用户所需要知道的是哪个数据没有正确，提示应该直观、易懂、短小；
-
选择框没有给默认选择值，造成页面一片空白，而且数据为空时没有给‘暂无数据’或者“--”等空数据符号显示；
-
数字没有处理好，界面上显示的
NaN，转换后台的数据时需要判断，NaN、null、undefined等值时用0、无等字眼替代； -
多个选择框，展开了一个选择框，再点击另一个选择框，第一个选择框没有收起
-
可以点击的按钮没有给可点击的手势，也就是设置
cursor:point; -
文字没有限制长度，导致文字占满整个屏幕，对于后台返回的不确定长度的文字，可以添加超出宽度显示
...的样式进行处理； -
需要分页的内容没有固定高度，导致分页组件跟着分页内容高度变化而变化；
-
点击某个按钮，没有给成功或者失败的提示，这让用户不知道点击后是否成功还是失败
-
文字过长造成换行，导致文字超出了容器的高度，建议添加文字根据容器高度显示特定行，超出行数则使用
...显示； -
在添加行内容的功能时，都重新请求刷新局部页面，造成滚动条又回到顶部，造成不好的用户体验；
代码方面
-
css类名用中文拼音加英文命名，如：xiafang_box、shangfang_box；
-
css类名一会采用下划线，一会采用横杠连接，如：xiafang-box、shangfang_box
-
js命名不规范，如：replacestr，建议使用驼峰命名，这里推荐使用
vscode的插件Code Spell Checker来进行检测是否出现这种命名; -
没有按需加载，造成打包后代码体积过大，如页面只使用了
el-table、el-button，可是却在入口文件里直接引入整个element-ui的包和样式;
//不提倡
import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css"
-
没有很好的模块化，比如没有对接口进行分开，直接在页面上使用
Vue.prototype.$http = axios；this.$http.get(url)、this.$http.post(url),建议统一封装接口，同时可以在aixos提供的请求拦截器中统一做接口异常处理； -
在
v-for中元素上同时使用v-if,这严重影响了页面性能； -
在代码中大量使用操作
dom的方式，比如zz.style.left = 200px，其实可以替换为<div :style="`left:${left}px`"></div>; -
组件解耦性不够，在同一个组件中通过if判断处理了不同页面传过来的数据，比如有几个页面都用到这个组件，但是每个页面获取的接口数据不一样，而此时都是在组件里处理这些数据，这会造成组件越来越膨胀，组件拓展性差;
-
图片等资源名称使用中文名称,图片使用中文命名时，在部署时有时候会出现图片404的情况，建议图片等资源改成字母数字等命名；
-
摧毁页面时没有摧毁定时器；
-
逻辑没有分离，一个页面不带样式有800多行，建议一个文件中代码行数控制在500行左右，这样子也容易后人维护;
-
使用重复数据辨识，比如使用
flag标识不同的身份，之后又使用userid标识; -
使用了
vue框架，里面使用了大量原生的操作，而且bug很多； -
引入组件图片等使用了大量的相对路径，这样不便于以后维护，建议尽量使用绝对路径，如你页面文件夹变动，而资源文件夹不变，使用绝对路径就不用改动东西，易于维护;
本文从用户体验和代码编写两方面列出了刚工作的同学容易犯的一些错，希望大家做项目的时候，能从用户体验的角度出发，从代码可维护的角度出发，不断成长，不断提高自己。
