如今前端项目愈来愈变得像大型工程了,并且愈来愈复杂了,须要处理好组员之间的协做,也须要作好业务分块、去耦合来下降维护成本,而且还要保持高效率开发。css
工程目录结构的优化是能达到这个目的的一种方式。通常而言,不是多页面工程仍是单页面应用,抑或两者都有,目录结构都是如下两种方式:html
这种方式是以文件类型、业务类型或其余类型进行分组。前端
多页面工程vue
|-- src/ 源代码目录 |-- html/ html 文件目录 |-- page1.html page1 页面的 html 文件 |-- module1/ 子目录 |-- page2.html page2 页面的 html 文件 |-- ... |-- ... |-- js/ js 文件目录 |-- common/ 公共文件目录 |-- page1/ page1 页面的 js 目录 |-- module1/ 子目录 |-- page2/ page2 页面的 js 目录 |-- ... |-- ... |-- css/ css 文件目录 |-- common/ 公共文件目录 |-- page1/ page1 页面的 css 目录 |-- module1/ 子目录 |-- page2/ page2 页面的 css 目录 |-- ... |-- ... |-- less/ less 文件目录(内部结构跟上面相似) |-- images/ 图片文件目录(内部结构跟上面相似) |-- data/ api-mock 文件目录(内部结构跟上面相似) |-- ...
单页面应用react
|-- src/ 源代码目录 |-- components/ 组件文件目录(如 react) |-- common/ 公共文件目录 |-- page1.js page1 页面的组件文件 |-- module1/ 子目录 |-- page2.js page2 页面的组件文件 |-- ... |-- ... |-- services/ service 文件目录 |-- service1.js page1 页面的 service |-- module1/ 子目录 |-- service2.js page2 页面的 service |-- ... |-- ... |-- models/ model 文件目录 |-- model1.js page1 页面的 model |-- module1/ 子目录 |-- model2.js page2 页面的 model |-- ... |-- ... |-- ... |-- images/ 图片文件目录(内部结构跟上面相似) |-- data/ api-mock 文件目录(内部结构跟上面相似) |-- ...
这种方式的优点是能使文件分类、功能分类很是清晰,而且可以在必定程度上约束组员的书写方式(目录结构),也清晰明了、简单易懂。但这种方式有很明显的缺点:git
因此,对前端项目而言,多数状况下我不会使用这种目录结构。github
这种方式是以页面模块、业务模块或其余类型进行分块。ajax
多页面工程json
|-- 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 文件目录 |-- ...
单页面应用api
|-- src/ 源代码目录 |-- page1/ page1 页面的工做空间 |-- index.js 入口文件 |-- service.js |-- model.js |-- data/ 本地 json 数据模拟 |-- images/ 图片文件目录 |-- components/ 组件目录(若是基于 react, vue 等组件化框架) |-- ... |-- module1/ 子目录 |-- page2/ page2 页面的工做空间(内部结构跟 page1 相似) |-- ... |-- images/ 公共图片目录 |-- data/ 公共 api-mock 文件目录 |-- components/ 公共组件目录 |-- ...
这种方式避免了“类型分组”的问题,但也有一些不足:
尽管有一些不足,可是能够配合构建工具消除,因此通常状况下我会选择这种目录结构。
不少状况下,这两种方式是能够配合使用的,好比多页面工程中有小型单页面应用。
|-- 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 等组件化框架) |-- ... |-- ...
更多博客,查看 https://github.com/senntyou/blogs
版权声明:自由转载-非商用-非衍生-保持署名(创意共享3.0许可证)