项目目录结构规范

资源分类

资源分成两大类:

  • 源代码资源:指开发者编写的源代码,包括js、html、css、template等。
  • 内容资源:指希望做为内容提供给访问者的资源,包括图片、字体、flash、pdf等。

目录命名原则

简洁。有习惯性缩写的单词必须采用容易理解的缩写。如:源代码目录使用src,不使用source。下面是更多例子:

  • img: 图片。 不允许使用image、images、imgs等。
  • js: javascript脚本。不允许使用script、scripts等。
  • css: 样式表。 不允许使用style、styles等。
  • swf: flash。不允许使用flash等。
  • src: 源文件目录。 不允许使用source等。
  • tpl:存放template资源文件。
  • font: 存放字体资源文件。
  • dep: 引入的第三方依赖包目录。 不允许使用lib、library、dependency等。

不允许使用复数形式。如:imgs、docs是不被允许的。

目录划分

一级目录

直接置于${root}下的目录称作一级目录。一级目录必须具有某种职能属性。包括:

src:用于存放开发时源文件,发布时必须被删除。

dep:用于存放项目引入依赖的第三方包。项目开发人员不允许更改dep目录下第三方包的任何内容。当项目需要修改引入的第三方代码时,第三方包应将源码直接置于${root}/src目录下。

tool:用于存放开发时或构建阶段使用的工具。该目录在发布时必须被删除。

doc:用于存放项目文档。

entry:用于存放项目的页面入口文件,通常是上线后可被直接访问的静态页面。较少时也可直接放在${root}目录下。

asset: 用于存放用于线上访问的静态资源。

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

src下必须只包含业务目录与common目录。业务公共资源必须命名为common。

示例:

${root}/
    src/
        common/
        biz1/
            subbiz1/
            subbiz2/
        biz2/

业务目录

业务目录划分原则:

  • JS资源不允许按资源类型划分目录,必须按业务逻辑划分目录。JS资源应直接置于业务目录下。即:业务目录下不允许出现js目录。
  • 除JS资源外的源文件资源,当资源数量较多时,为方便管理,允许按资源类型划分目录。即:业务目录下允许出现css、tpl目录。
  • 内容资源允许按资源类型划分目录。即:业务目录下允许出现img、swf、font目录。
  • 业务目录中,如果文件太多不好管理,需要划分子目录时,也必须继续遵守根据业务逻辑划分的原则,划分子业务。

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

biz1/
    img/
        add_button.png
    add.js
    add.tpl.html
    add.css

对于一个业务整体,建议将非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/
    index.html
    main.html
    ......

参考

项目目录结构规范

坚持原创技术分享,您的支持将鼓励我继续创作!