前端规范

ZRipple
107 阅读2分钟

前端规范， 目的是代码风格统一， 方便维护

基础规范

1、代码需要增加注释， 复杂逻辑，需要添加注释

2、代码行数，单个 vue文件控制在 1000行，1000行不包括 css样式

目的： 代码量过大， 存在维护上的困难， 希望打击都能合理拆分组件

3、代码尽可能不要 隐式引用

例如： vue-plugin 里面引入了 lodash,   有些项目，不安装依赖， 直接使用 _.debounce， 这是有问题的， 也是坚决杜绝的

建议： 项目自行安装 lodash, dayjs,  big.js  等公共流行库， 解决一些业务问题

4、资源释放问题

地图资源，在组件销毁时， 必须注意资源释放问题

定时器，也必须在组件销毁时释放， 避免内存泄露

5、剔除项目中未使用的代码， 方法

特别是在copy 别人代码的时候， 需要剔除掉未使用的代码

6、代码异常捕获， try catch

接口请求，都必须try ... catch

promise 必须 添加 catch

7、Promise 不要写成回调地狱

function getDetail() {
    let arr = []
    this.$api(xxx).then(res => {
        this.$api2GetEnums().then(list => {
            this.$api3().then(res3 => {
                    
                    res.list.forEach(item => {
                        list.forEach(p => {
                            if(item.id === p.id) {
                                item.desc = p.typeName
                            }

                            arr.push(item)
                        })
                        
                        // 等
                        res3.forEach(...)
                    })
            })
        })
    })
}

async function getDetail() {
    try {
        // 接口不要写成回调地狱了
        let api2GetEnums = await this.api2GetEnums()


        let api3 = await this.api3()

        let res1 = await this.api1()


        // 数据处理
        res1.list.forEach(item => {})
    } catch(e) {

    }
    
}

8、 接口不合理的，要及时和后端同学沟通， 优化接口数据返回

例如：本来一个接口能返回的，业务也比较简单， 非要做2个接口返回，就浪费了一次请求， 根据实际情况，建议后端同学做接口数据合并

vue规范

1、组件之间不要循环引用

例如： A 引用组件 B , B引用组件C ， C引用组件A ,   一般递归组件会存在循环引用， 需要注意结束条件

2、每个业务组件必须添加name字段， 比如当前业务是   paySend/index.vue， 则name为  paySend

原因： vue-devtool 可以快速检索我们的组件， 当出现报错， 也能提示对应的信息， 后续 监控接入到项目中， 也能友好提示是哪个组件出现报错

3、组件目录规范

不要把所有的业务组件，都丢到 src/ components里，  页面组件，都归类到【当前页面目录】的 components下

- src
	- components  存放公共组件， 基础组件，通用组件等
		- ... 
	- views
		- APage
			- components		存放和当前业务相关联的组件
				- dialog.vue
				- form.vue
				- map.vue
			- index.vue
			- detail.vue
		- BPage
			- components
			- index.vue
			- detail.vue

4、项目文件命名规范

文件夹名， 已经包含了对当前业务的描述， 例如，   about 页面,   不要过度命名， 遵循简约，见名知意

禁止案例

about

        -  aboutList.vue

        - aboutDetail.vue

推荐

about

       - index.vue

       - detail.vue

5、项目中不必要的情况，可尽量减少 mixin

一般 mixin 会引入权限等全局的，  单纯一个业务， 一般不会采用 mixin,

mixin使用需要注意优先级问题

使用mixin 的文件，在调用方法，数据， 还需要注意数据来源

// 定义
export const mixin = {
	data() {
		return {
			// 一份字典数据
			payList: [
				
			]
		}
	},
	methods: {
		findOneInList(id) {
			return this.payList.find(item => item.id === id)
		}
	}
}

推荐为

const payList =  [
		{}
]
	


export const findOneInList = (id) => {
	return payList.find(item => item.id === id)
}

在使用上， 更简洁， 数据来源更明确

6、简单业务， 竟可能少使用 vuex， 增加了项目的复杂度

一般业务 合理拆分和规划代码， 定义好组件之间约定的通讯方式， 即可

7、父组件禁止使用 ref 去 调用ref 去更改组件的内部数据状态

推荐：  采用 props 去调整组件状态

禁止   this.$refs['risk'].status = true

8、业务代码， 尽量少使用 jsx 方式， 采用 template 的方式

一切能用 jsx 实现的， template 都能实现

jsx 丢失了 vue语法糖特性， 增加代码维护成本， render是会执行2次

样式规范

1、 class 采用 中横线

合适： 'news-list'

不合适： ‘news_list’    'newsList', 'NewsList'

2、样式嵌套，不易过深， 增加 css查找耗时

不建议：

.page-container {
 .header {
  	.header-title {
  		.icon-container {
  			.icon-list {
  				.remove {
  					// 嵌套过深
  				}	
  			}
  			
  		}
  		
  	}
  }
}

gitlab 项目简介规范

gitlab 项目仓库， README 文件应该包含如下必要内容， 以帮助其他人能快速启动并熟悉项目

  • 项目名称

  • 相关链接

    • gitlab仓库地址
    • prd需求地址
    • jenkins 地址
    • 接口文档地址

  • 环境说明

  • scripts脚本说明 

  • 当前项目的注意事项

  • git提交日志规范

avatar
文章
阅读
粉丝