关于项目目录结构

Question

公司的项目比较杂乱，都是常规的css js html 各放在一个地方，最近看了react基于组件的就近依赖，想把公司的项目改成如下这种方式，不知道会不会有什么未知的问题，有人做过类似的吗？common    js        sss.js    css        xxx.css    images        xxx.pngpage    home        index.html        index.css        index.js        /images/sss.png    about        index.html        index.css        index.js        /images/ccc.png    login        index.html        index.css        index.js        /images/ddd.png        贴一个react的结构，简直不要太爽

Answer 1

react用过一次，感觉没有Vue组件化更彻底。Vue里面可以把html,css,js都放到一个.vue文件里，这样就只有图片资源是在外面了，如果用vue，你的目录可以简化成这样：
common

image/xxx.png

page

home
    home.vue
    images/xxx.png

....
结构大概就长这样：

vue文件大概长这样：

Answer 2

项目结构划分跟用什么框架毫无关系

我个人是推崇按功能划分html,css,image的，就是你所说的第一种：

common

    js

        sss.js

    css

        xxx.css

    images

        xxx.png

page

    home

        index.html

        index.css

        index.js

        /images/sss.png

    about

        index.html

        index.css

        index.js

        /images/ccc.png

    login

        index.html

        index.css

        index.js

        /images/ddd.png

跟你的区别是，我可能会把功能相似的页面放在同1个文件夹，因为当你项目大了，按你那种可能文件夹会太多。比如：

page

    order

        order.html

        order.css

        order.js

        order-confirm.html

        order-confirm.js

虽然vue可以把style也写在单个文件中，但是当你js逻辑复杂了或者样式多了，肯定还是得拿出去，1个file最多300行，不然阅读性要差很多。

最重要的是，目录划分是为了阅读、分治，没有什么完美的方案，根据需求和团队选择一个最合适的就好。