前端工程化-变量命名及目录结构规范

变量命名规范

良好的命名规范不仅能提高代码的可读性，还能减少团队协作中的沟通成本。下面将介绍三种常见的命名方式：驼峰命名法、帕斯卡命名法和中划线命名法，并说明它们在不同场景下的应用。

1. 驼峰命名法（camelCase）

驼峰命名法以小写字母开头，后续每个单词的首字母大写。这种命名方式常用于以下场景：

变量和属性命名：如 userId、userName。
方法和函数命名：如 getUserInfo、handleClick。

示例：

let userId = 123;  
function getUserInfo() {  
    // 逻辑代码  
}

2. 帕斯卡命名法（PascalCase）

帕斯卡命名法以大写字母开头，后续每个单词的首字母也大写。这种命名方式适用于以下场景：

JavaScript 类：如 UserModel、DataService。
组件名：即组件导出时的命名，如 UserProfile、HeaderComponent。

示例：

class UserModel {  
    // 类定义  
}  
export default HeaderComponent;

3. 中划线命名法（kebab-case）

中划线命名法全部使用小写字母，单词之间用中划线连接。这种命名方式常用于以下场景：

文件和文件夹命名：如 user-profile.js、assets/images。
CSS 类名：如 .user-profile、.main-container。

示例：

.user-profile {  
    color: #333;  
}

目录结构规范

一个清晰、合理的目录结构不仅能提高开发效率，还能让项目更易于维护和扩展。下面是一个常见的前端目录结构规范，帮助你在项目中建立标准化的文件组织方式。

目录规范
├── public
│   └── favicon.png                  // Favicon
├── pull
│   └── cmd.bat                      // 从数据库拉取配置
│   └── cmd.sh                       // 从数据库拉取配置
├── src
│   ├── apis
│   │   ├── modules
│   │   │   ├── common.ts            // 登录、退出等通用api
│   │   │   ├── system.ts            // 系统管理部分api
│   │   │   └── xxx.ts               // 按业务划分其他api
│   │   └── index.ts
│   ├── assets                       // 全局的静态资源
│   │   ├── css
│   │   │   ├── reset.less           // 全局重置样式
│   │   │   ├── element.less         // element相关重置样式
│   │   │   ├── common.less          // 项目通用样式
│   │   │   ├── main.less            // 汇总tailwind和其他样式，在main.ts中被引入
│   │   │   └── variable.less        // 全局颜色变量
│   │   ├── img                      // 图片目录，建议按业务划分
│   │   ├── js                       // 依赖的第三方sdk之类的js资源
│   │   ├── svg                      // svg目录
│   ├── components                   // 基础UI组件。功能比较单一的组件放在此目录，与其他功能0耦合性
│   ├── config
│   │   ├── configure.ts             // 配置
│   │   ├── const.ts                 // 常量配置
│   │   ├── enum.ts                  // 前端枚举配置
│   │   └── reg.ts                   // 常用正则表达式
│   ├── datas                         // 数据初始化逻辑目录，比如字典数据等
│   ├── directives                   // 自定义指令
│   │   ├── modules
│   │   │   └── auth.ts              // 鉴权指令
│   │   └── index.ts                 // 自定义指令全局注册
│   ├── hooks                        // 全局的自定义hook
│   ├── langs                        // 多语言，禁止编辑，自动生成，从服务器拉取
│   │   ├── err                      // 错误类
│   │   ├── sys                      // 系统类
│   │   └── index.ts                 // 多语言 Lang.Err.MenuIsRequire，Lang.Sys.MenuIsRequire
│   ├── layouts                      // 框架布局相关
│   │   ├── base-foreend.ts          // 前台
│   │   └── base-backend.ts          // 后台
│   ├── models
│   │   ├── modules
│   │   ├── common.ts                // 用户信息、菜单等公共interface
│   ├── pages                        // 页面目录，与 stores 结构对应
│   │   ├── modules                  // 具体业务所归属的文件夹（可以用业务名称作为文件夹名字）
│   │   │   ├── components           // 业务所用到的组件
│   │   │   ├── layouts              // 业务模板
│   │   │   ├── views                // 业务的所有页面
│   │   │   │   ├── common           // 公共页
│   │   │   │   ├── article          // 业务页
│   │   │   │   ├── sample-page      // 业务页
│   │   │   │   │   ├── components   // 页面业务组件
│   │   │   │   │   ├── utils        // 页面工具
│   │   │   │   │   └── index.ts     // 其他文件
│   │   │   ├── utils                // 业务的工具集
│   │   │   ├── static               // 业务所用到的静态资源
│   │   │   ├── store                // 业务所用到的状态库（本结构基于Vue，这里是业务的Vuex）
│   │   │   └── index.js             // 业务的唯一出口（包含路由与状态库）
│   │   └── ...                      // 其他业务
│   ├── routes
│   │   ├── modules                  // 各模板路由配置，输出：`RouteRecordRaw[]`类型
│   │   └── index.ts                 // 路由入口文件，包含路由钩子，路由守卫等
│   ├── server                       // 请求服务器相关
│   │   ├── http                     // http请求，一般是axios封装
│   │   └── websocket                // websocket请求
│   ├── stores                       // 状态管理目录，与 pages 结构对应
│   │   ├── modules                  // 各模块全局状态
│   │   │   ├── index.tsx            // 状态文件
│   │   │   └── types.ts             // 定义状态类型
│   │   └── index.ts
│   ├── types
│   │   ├── modules
│   │   │   ├── user.ts            // 用户类型文件，用于api请求
│   │   │   ├── article.ts            // 文章类型文件
│   │   └── index.ts
│   ├── utils                        // 工具函数库
│   ├── app.ts                       // 页面入口，一级路由在此处渲染
│   ├── main.ts                      // 逻辑入口，各种全局引入在此处处理
│   └── env.d.ts                     // 全局TS变量声明
├── package.json
├── .env                             // 环境变量
├── .env.development
├── .env.production
├── .prettierrc.js                   // 代码格式化
├── tailwind.config.js               // tailwind配置
└── tsconfig.js                      // tsconfig