前端项目目录结构规范

前端项目目录结构规范

目录命名原则

1.简洁。有习惯性缩写的单词必须采用容易理解的缩写。例如：

1.img：图片。

2.js：javascript脚本。

3.css：样式表。

4.swf：flash。

5.src：源文件目录。

6.dep：引入的第三方依赖包目录。

2.不可以使用复数形式。如：imgs、docs。

目录划分

根目录结构划分

在根目录下，目录结构必须按照职能进行划分。

常用的目录：

$(root)/

src/

test/

doc/

dep/

…

业务项目目录结构划分

项目代号

业务项目可以为项目起一个代号名称，代号名称必须为一个单词，不宜过长。项目代号有利于区分不同的项目，为项目的重用留下后路。

在项目开发是，通常会使用如下加载配置项，将项目代号指向src。

根据业务逻辑划分src目录结构

业务项目的src目录内，绝大多数情况应当根据业务逻辑划分目录结构。划分出的子目录，成为业务目录。

Src下必须只包含业务目录与common目录。业务公共资源必须命名为common。Common目录作为业务公共资源的目录，也视如业务目录。

$(root)/

src/

common/

biz1/

subbiz1/

subbiz2/

biz2/

较小规模的业务目录（如投放端），src目录允许视如业务目录，直接按照业务目录划分原则划分目录结构。

$(root)/

src/

foo.js

业务目录划分原则

1.JS资源不允许按资源类型目录划分目录，必须按业务逻辑划分目录。JS

资源应直接置于业务目录下。即：业务目录下不允许出现js目录。

2.除JS资源外的源文件资源，当资源数量较多时，为方便管理，允许按资

源划分目录。即：业务目录下允许出现css、tpl目录。

3.内容资源允许按资源类型划分目录。即：业务目录下允许出现img、swf、

font目录。

4.业务目录中，如果文件太多不好管理，需要划分子目录时，也必须继续

遵守根据业务逻辑划分的原则，划分子业务。

通常，对于一个业务目录，鼓励将业务相关的源文件资源都直接置于业务目录下。

biz/

img/

add_button.png

add.js

add.tpl.html

add.css

业务目录下源文件资源数量较多时，我们第一直觉应该是：是否业务划分不够细？是否应该划分子业务，建立子业务目录？

biz2/

subbiz1/

list.js

list.tpl.html

list.css

subbiz2/

遇到确实是一个业务整体，无法划分子业务时，允许将非JS资源按资源类型划分目录进行管理。

biz1/

css/

add.css

edit.css

remove.css

img/

add_button.png

tpl/

add.html

edit.html

remove.html

add.js

edit.js

remove.js

源文件资源和内容资源请参考资源分类章节，常用资源目录请参考资源目录章节，常用业务目录请参考业务目录章节。

业务项目目录划分示例

${root}/

src/

common/

img/

sprites.png

logo.png

conf.js

layout.css

biz1/

img/

add_button.png

add.js

add.tpl.html

add.less

biz2/

subbiz1/

list.js

list.tpl.html

list.css

subbiz2/

dep/

er/

src/

test/

esui/

src/

test/

test/

doc/