作者介绍:刘露茜,同济大学研究生,美团点评点餐团队成员。
OpenDoc
我们将团队内部的部分文档经过编辑分享出来,主要出于以下考虑:
- 我们希望有志于加入团队的朋友能得到同等的信息,做好相应的准备
- 团队的工作经验与方法的分享和技术分享一样是有价值的
- 听取同行们的改进建议
目的
1)规范目录结构
2)清理无用代码
以业务为维度组织文件
几个主流框架在构建大型项目时常用的目录结构:
框架
|
目录结构
|
---|---|
Angular | |
React | |
Vue |
以业务为维度组织文件有以下好处:
组件资源聚合,更容易管理和维护,考虑到长期迭代和工作交接应该是必要的
引用组件时不需要关心资源依赖的问题
区分业务组件和通用组件有利于更好把握组件的粒度和方法的抽象程度
项目结构规范
文件夹
|
功能
|
最佳实践
|
举例
|
---|---|---|---|
entries | 入口文件 | 无子文件夹,只有每个页面的js入口文件 | |
lib | 自定义组件库 | 将每个页面都会引用的公共组件置于common子文件夹下,其他组件文件平行置于lib文件夹下 使用redux时,在lib下新建actions和reducers文件夹,分别存储相应文件 | |
less | 自定义样式库 | 新增文件按照功能进行分类:
| |
templates | 模板库 |
|
引用文件规范
类别 | 规范 | 举例 |
---|---|---|
引用文件 | 引用文件时按照以下分类引用,不同分类间空一行
| |
引用 js 和 less 文件时不加后缀,引用模板文件时加 js 后缀 | ||
命名 | 新页面的 html、less、js 文件命名一致,文件名均小写、并以短横线(-)连接 | menu-list.html menu-list.less menu-list.js |
处理废弃文件 | 当某个页面被其他页面替换或被删除后,应在对应文件顶部添加注释,说明该文件废弃原因、废弃时间、需要review人员和确认删除时间 |
清理代码
清理范围包括:
- 已废弃的文件
- 未使用的less、js中函数
- 已被引用但未被使用文件
文件种类
|
清理方法
|
---|---|
html | 找 前端&后端&产品 确认是否已弃用 |
css | chrome devTool → Audits → 选中Audit Present State → Run → Remove unused CSS rules chrome还提供了css tracker 和css coverage来检测css使用(实验特性) |
js |
注意未被调用的函数 |