前端的一些命名的总结

这是一篇以这些年在开发过程中逐渐总结形成的前端命名规则

个人觉得，代码的命名应该是 简单的、统一的
简单：命名应该简单、明了
统一：命名应该是通用的

一、对js

1、对相关联的变量，使用对象来将它们包含在一起

1. 目的是不让变量过于分散，便于管理变量，使得相关的变量一目了然
2. 对象名称也相当于一个小型的命名空间，可以不用担心命名冲突

	//比如页码
	const pageInfo = reactive({
      page: 1,
      size: 10,
      total: 0
    })

2、对方法的命名，根据事件的类型来命名

1. 对一般的处理事件，使用handle开头，命名成 handlexxx
2. 对emit的监听事件，使用on开头，命名成 onxxx
3. 尽量在方法的命名时，将事件的作用描述清楚，命名长一点也没关系

	//处理事件
    function handleDeleteData(payload: string) {
    }
    //监听事件
    function onNodeItemClick(payload: string) {
    }

3、对常量命名，使用大驼峰命名方式

1. 用来与其他普通变量进行区分
2. 表示该变量不能被赋值

import {useRouter} from 'vue-router'
const Router = useRouter()

4、对特定变量，根据其作用使用特定的命名

1. 对绑定的ref变量，使用Ref开头，命名成 RefXxx
2. 对引入的api接口，使用Api开头，命名成 ApiXxx
3. 这样看见开头名称就可以大概的明白这个变量的作用

//用于dom绑定的ref变量命名
const RefCompModal: any = ref()

//对api接口的命名
//引入
import ApiDataGrade from '@/service/api/api-data-grade'
//调用
const res = await ApiDataGrade.getDataList()

5、对自定义的组件

1. 以大驼峰方式命名，表示常量，也符合vue组件的命名
2. 对全局通用组件，以 comp 开头（component的缩写），命名成 CompXxx，放在components文件夹下
3. 对普通自定义组件，以大驼峰方式命名，名称尽量描述组件的作用，放在与对应的功能页面文件夹下

/** 通用组件 **/
//定义组件
export default defineComponent({
  name: 'CompTable',
})
//引入组件
import CompTable from '@/components/comp-table/comp-table.vue'

/** 自定义组件 **/
//定义组件
export default defineComponent({
  name: 'ModalContent',
})
//引入
import ModalContent from './modal-content.vue';

------------------------------------------------------------------------------

二、对html与css

1. 对html的class或id命名，建议最少使用两个单词组合而成，尽量描述清楚对应dom的作用
2. 以小写 + ‘ - ’的方式命名
3. 自定义组件：以大驼峰方式引入，在html中使用时，改成小写加‘-’
4. 使用class来对dom元素样式的控制，而不是通过style
5. 尽量对每个标签添加class，方便样式控制
6. 对引用的图片资源，使用相对路径引入

<!-- 普通html的class、id命名 -->
<div class="modal-container" id="dom-id"></div>

<!-- 自定义的html的命名 -->
<comp-table></comp-table>
<!-- 引入组件 -->
import CompTable from '@/components/comp-table/comp-table.vue'

<!-- 对每个标签绑定class -->
<ul class="module-body list-container">
   <li class="list-item" v-for="(item, index) in dataArr" :key="index">
      <div class="item-icon"></div>
      <div class="item-data text-overflow">{{item.data}}</div>
      <div class="item-name text-overflow">{{item.name}}</div>
   </li>
</ul>

<!-- 对引用的图片资源，使用相对路径 -->
.icon-1 {
   background-image: url('~@/assets/img/icon-1.png');
}

------------------------------------------------------------------------------

三、其他的一些规范

1、尽量使用变量来控制页面内容的展示，而不是将内容写死在html上
2、尽量不要在html中进行逻辑运算，可以先在js中运算好，在html展示运算后的结果即可
3、页面应该由各功能模块组件拼合而成，不应该将代码堆积在一个文件
4、单个.vue文件的代码量尽量不超过500行，如果超过，则可以继续拆分出子组件

------------------------------------------------------------------------------

四、项目文件层级结构

1. 文件名称使用小写 + ‘ - ’组成，最少使用两个单词，尽量描述文件的功能
2. vue页面文件，按功能模块，分独立文件夹存放，便于管理

|-- 项目文件
    |-- .env.development	//运行环境配置：开发
    |-- .env.production		//运行环境配置：生产
    |-- .env.test			//运行环境配置：测试
    |-- package.json		
    |-- tsconfig.json
    |-- vue.config.js		//vue的webpack配置
    |-- public
    |   |-- favicon.ico
    |   |-- index.html
    |-- src
        |-- App.vue
        |-- main.ts
        |-- permission.ts	//路由守卫文件
        |-- shims-vue.d.ts	
        |-- assets			//静态文件存放
        |   |-- img			//图片
        |   |-- styles		//样式
        |       |-- btn.scss
        |       |-- index.scss
        |       |-- variables.scss
        |-- components		//全局自定义组件
        |   |-- comp-table
        |   |   |-- comp-table.vue
        |-- layout			//布局控制
        |   |-- index.vue
        |-- router			//路由
        |   |-- index.ts	//模块路由整合
        |   |-- modules		//各模块路由
        |       |-- data-assets
        |       |   |-- api-manage.js
        |       |   |-- asset-catalogue.js
        |       |   |-- corporate-portrait.js
        |       |   |-- data-overview.js
        |-- service			//服务
        |   |-- auth-url.ts
        |   |-- api			//api接口文件
        |   |   |-- api-system.ts
        |   |-- http		//请求
        |       |-- domain.ts	//域名配置
        |       |-- http.ts		//axios的封装
        |-- store			//vuex
        |   |-- getters.js
        |   |-- index.ts
        |   |-- modules
        |       |-- app.js
        |-- utils			//自定义工具库
        |   |-- index.js
        |   |-- tools.ts
        |-- views			//页面文件
            |-- error-page
            |   |-- 401.vue
            |   |-- 404.vue