前端项目中目录结构优化的方法总结


本文摘自PHP中文网,作者不言,侵删。

本篇文章给大家带来的内容是关于前端项目中目录结构优化的方法总结,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

目录结构优化

现在前端项目越来越变得像大型工程了,而且越来越复杂了,需要处理好组员之间的协作,也需要做好业务分块、去耦合来降低维护成本,并且还要保持高效率开发。

工程目录结构的优化是能达到这个目的的一种方式。一般而言,不是多页面工程还是单页面应用,抑或二者都有,目录结构都是以下两种方式:

  1. 类型分组(按文件类型、业务类型等进行分组)

  2. 模块分块(按页面模块、业务模块等进行分块)

1. 类型分组

这种方式是以文件类型、业务类型或其他类型进行分组。

多页面工程

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

|-- 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 文件目录(内部结构跟上面类似)

    |-- ...

单页面应用

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

|-- 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 文件目录(内部结构跟上面类似)

|-- ...

这种方式的优势是能使文件分类、功能分类非常清晰,并且能够在一定程度上约束组员的书写方式(目录结构),也清晰明了、简单易懂。但这种方式有很明显的缺点:

  1. 不能很简单快捷的知道某个页面或某个功能块有哪些文件;

  2. 创建、更新、删除页面会变得很低效,因为需要到不同文件类别目录去找文件;

  3. 开发效率不高,并且很容易疲劳,因为编辑一个页面的时候需要在编辑器的文件导航中展开各个文件,导航就会非常长。

所以,对前端项目而言,多数情况下我不会使用这种目录结构。

2. 模块分块

这种方式是以页面模块、业务模块或其他类型进行分块。

阅读剩余部分

相关阅读 >>

javascript与webassembly比较 及其使用场景

vue如何实现数字滚动增加效果?代码示例

node.js 15正式版发布,将替代node.js 14成为当前的的稳定发行版

js要怎么学

深入浅析javascript中的快速排序

html代码什么意思?

服务器上webpack打包的过期hash文件如何进行清理

你需要知道的关于javascript计时器的所有内容

一招搞定css不规则边框

浅谈网页中提升svg文件可访问性的几种方法

更多相关阅读请进入《前端》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...