OpenDoc - 项目代码整理指南

3,472 阅读3分钟
作者介绍:刘露茜,同济大学研究生,美团点评点餐团队成员。

OpenDoc

我们将团队内部的部分文档经过编辑分享出来,主要出于以下考虑:

  • 我们希望有志于加入团队的朋友能得到同等的信息,做好相应的准备
  • 团队的工作经验与方法的分享和技术分享一样是有价值的
  • 听取同行们的改进建议

目的

1)规范目录结构

2)清理无用代码

以业务为维度组织文件

几个主流框架在构建大型项目时常用的目录结构:

框架
目录结构
Angular


React


Vue


以业务为维度组织文件有以下好处:

  1. 组件资源聚合,更容易管理和维护,考虑到长期迭代和工作交接应该是必要的

  2. 引用组件时不需要关心资源依赖的问题

  3. 区分业务组件和通用组件有利于更好把握组件的粒度和方法的抽象程度

项目结构规范

文件夹
功能
最佳实践
举例
entries入口文件无子文件夹,只有每个页面的js入口文件
lib自定义组件库

将每个页面都会引用的公共组件置于common子文件夹下,其他组件文件平行置于lib文件夹下

使用redux时,在lib下新建actions和reducers文件夹,分别存储相应文件


less自定义样式库

新增文件按照功能进行分类:

  • 被页面直接引用-直接置于less文件夹下
  • 自定义组件样式-置于less/components文件夹下
  • 基础组件样式 - 置于less/ui-base文件夹下
  • 全局预定义样式-置于less/lib文件夹下


templates模板库
  • 仅被一个文件引用的模板置于子文件夹下,该文件夹以引用文件名称命名
  • 被多个文件引用的模板直接置于templates文件夹下


引用文件规范

类别规范举例
引用文件

引用文件时按照以下分类引用,不同分类间空一行

  • 包管理器库文件
  • 自定义组件(lib/)
  • 模板文件(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 trackercss coverage来检测css使用(实验特性)

js
  • 使用unusedjs github.com/gmetais/unu… (不支持https)
  • 通过模块/组件之间的调用关系来判断
  • eslint能找出未使用过的表达式、变量、参数,但不适用于使用 new 操作符的函数或构造函数调用

注意未被调用的函数