前端开发Code Review内容【vue记录】

前端  /  管理员 发布于 6年前   241

代码审查的重要性,对码农来说自是不言而喻, 这里记录一次 Code Review的简单纪要，主要以代码审查优化内容为主。

一、Import引入路径

路径尽量使用别名的方式，有效避免相对路径的书写麻烦，以及项目的移植和扩展等。

建议

使用别名，代替使用相对路径。扩展vue.config.js，比如：config.resolve.alias.set('@$', './src');后续只需要修该配置文件即可。 

二、组件、插件的扩展

第三方组件全局引入，可以使用按需加载的形式，只加载需要的部分。比如使用vue.component(name, 组件); 

最好不要直接在main.js中通过Vue.prototype上添加的属性和方法。

建议

Vue的全局组件，或者插件使用Vue.use()的方式。这样可以避免重复注册插件。比如：export default{install(Vue){//...}} 

 

三、接口请求的位置

项目接口的请求全部在computed中触发的。在vue的生命周期中computed是在dom渲染完才进行的。

建议 

页面初始化的数据，最好放在created,beforeCreated中。这些数据在渲染html前调用。对于渲染完才需进行的操作，以及页面中一些dom的操作才放在computed中 。

四、前端存储

项目采用localStorage的存储，以login.vue为例，在使用的地方，直接使用window.localStorage。如果后续不想使用该方式存储，代码修改将比较麻烦。

 建议 

把存储功能进行封装操作，只提供set,get,clear等接口出来。内部的实现，对于存储时限，存储方式的修改更灵活。

五、路由代码

位置：src/router.js，子路由全部写在routes数组中。这样代码块内容太多，不利于查找，定位。 

建议   

可以把路由的数据封装到数组中。Require方法单独出来；同时每项最好做个备注。 

六、权限验证

位置：src/router.js，项目中通过路由的redirect重定向来判断的，同时项目在接口请求http拦截中也判断了。

建议   

redirect重定向主要用于不同的路径可能是同一个页面或组件的情况这里建议使用路由钩子函数router.beforeEach((to, from, next) => {})To.path为需要授权路由时候，进行判断。

七、配置文件

在部分组件或页面中，使用到下载地址，或一些常量。都是直接在该页面定义的，这样修改的时候，需要改动的地方很多比如下载apk

建议

写个配置文件来放项目使用的常量。比如：请求的URL，安卓，ios等下载地址。把请求的url写在配置文件，也方便接口的查询。

八、cdn的使用

使用了cdn的方式引入第三方库。这样可以减少打包体积，速度。 

建议

项目中常用的模块打包，放到cdn服务器下，其他项目需要可以直接引入就可以了。减少不必要的开发。

九、代码优化方面

1.功能代码封装的不多 ； 

2.if判断还有优化空间 ； 

3.方法行数过长； 

4.方法参数安全判定过少； 

5.多层级.属性过多，需要优化；

建议 

1.相同功能，封装成独立方法； 

2.if(true){}建议改为 if(false )return,减少代码层级，简化代码结构； 

3.方法行数过长，表明方法需要拆分，一个方法尽量处理一个逻辑 ； 

4.js为弱类型语言 ，参数的安全判定很有必要 ，可采用es6的解析赋值，默认参数类型； 

5.多次调用某一对象的属性时，创建临时变量，减少原型链的查询，提高代码效率

总结 

1.从细节提高代码质量 

2.要学会“偷懒”去提高代码复用性，可扩展性。