前端项目中目录结构优化的方法总结(2)-木庄网络博客

多页面工程

|-- src/ 源代码目录
 
    |-- page1/ page1 页面的工作空间
        |-- index.html html 入口文件
        |-- index.js js 入口文件
        |-- index.(css|less|scss) 样式入口文件
        |-- html/ html 片段目录
        |-- js/ js 文件目录
        |-- (css|less|scss)/ 样式文件目录
        |-- data/ 本地 json 数据模拟
        |-- images/ 图片文件目录
        |-- components/ 组件目录（如果基于 react, vue 等组件化框架）
        |-- ...
         
    |-- module1/ 子目录
        |-- page2/ page2 页面的工作空间（内部结构跟 page1 类似）
         
    |-- ...
     
|-- html/ 公共 html 片段
|-- less/ 公共 less 目录
|-- components/ 公共组件目录
|-- images/ 公共图片目录
|-- data/ 公共 api-mock 文件目录
|-- ...

单页面应用

|-- src/ 源代码目录
    |-- page1/ page1 页面的工作空间
        |-- index.js 入口文件
        |-- service.js
        |-- model.js
        |-- data/ 本地 json 数据模拟
        |-- images/ 图片文件目录
        |-- components/ 组件目录（如果基于 react, vue 等组件化框架）
        |-- ...
         
    |-- module1/ 子目录
        |-- page2/ page2 页面的工作空间（内部结构跟 page1 类似）
         
    |-- ...
     
|-- images/ 公共图片目录
|-- data/ 公共 api-mock 文件目录
|-- components/ 公共组件目录   
|-- ...

这种方式避免了“类型分组”的问题，但也有一些不足：

对组员的约束很小，每个工作空间下的目录结构可以完全不一样；
工作空间下的目录结构不是很容易定义好，对开发人员水平要求要高一些。

尽管有一些不足，但是可以配合构建工具消除，所以一般情况下我会选择这种目录结构。

3. 配合使用

很多情况下，这两种方式是可以配合使用的，比如多页面工程中有小型单页面应用。

|-- src/ 源代码目录
 
    |-- page1/ page1 页面的工作空间
        |-- index.html html 入口文件
        |-- index.js js 入口文件
        |-- index.(css|less|scss) 样式入口文件
        |-- html/ html 片段目录
        |-- js/ js 文件目录
            |-- ajax/ 对 ajax 封装的目录
            |-- util/ 工具类函数的目录
            |-- pages/ spa 应用页面目录
            |-- data/ 静态数据目录
            |-- tpl/ 模板目录
            |-- (event|view)/ 事件监听文件目录
            |-- ...
        |-- data/ 本地 json 数据模拟
        |-- (css|less|scss)/ 样式文件目录
        |-- images/ 图片文件目录
        |-- components/ 组件目录（如果基于 react, vue 等组件化框架）
        |-- ...
         
    |-- ...