前端模块化结构如何拆分

模块化结构

将复杂的程序拆分成不同的文件夹或者文件
不同的模块即独立又可以相互关联

如何拆分

具体的拆分规则针对不同的项目也不一样,这里列出一点建议,更主要的还是有自己的一个规范,

物以类聚
将具有相同特性的可以拆分到一起,比如在一个vue电商网站项目中对文件夹的拆分

pages 源文件入口
    |-list 列表模块(可能包括普通列表页,闪购列表) 都可以认为是列表页属于一类
        |-list 普通列表页
            |- components 组件
            |- router 路由
            |- store vuex
            |- index.js 打包js
        |-其它页面

按功能拆分

 在上边的结构划分中,普通列表页有组件,路由,vuex,还有打包入口,这些都可以看成模块,每个模块各自负责不同的功能,
        components 负责存放普通列表页单独拥有的组件
        router 负责路由
        store 状态
        index.js 等同于普通列表页容器组件
 最终这些不同功能的模块组合成了一个完整的页面结构

这里只说了两种简单的拆分思想给大家做个入门,真正项目拆分过程其实也是这样,搞清楚自己的项目,
文件结构如何拆分真正还是取决于自己,当然可以参考业界规范,一般情况下拆了就比不拆强,所以大家可以多尝试

    原文作者:wolfzwz
    原文地址: https://segmentfault.com/a/1190000017543208
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞