我的前端规范系列-前端专属的目录结构[解决项目中的钉子户]

Nosee 发布于2019-08-02 16:11 / 2838人阅读

摘要：但是前端目录结构笔者认为应该对于页面和组件继续细分。举个列子当项目较大时目录里存在将会非常之多。所以，后端这种按职能划分的目录结构虽好，但用于前端也不是最合适的方案。

为什么需要前端专属的项目结构

这里说到目录结构，想必不少程序员会想到按职能分目录吧！以下所提的目录结构为单页面目录结构

以下面这种为例[按职能划分]

├──src
│   ├──view                    //页面
│   ├──utils                   //JS工具库
│   ├──api                     //api接口
│   ├──style                   //style
│   ├──config                  //配置
│   ├──model                   //model层其实是redux或vux文件
│   ├──component               //组件
│   ├── App.vue                // 入口页面
│   ├── main.js                // 入口 加载组件 初始化等
│   ├── assets                 // 主题 字体等静态资源
├── index.html                 // html模板
└── package.json

其实该目录结构完全没问题,按职能划分结构非常清晰,api放api,静态资源放assets里等等。但是前端目录结构,笔者认为应该对于页面和组件继续细分。

举个列子当项目较大时,api目录里存在api将会非常之多。大致效果如下图:

该图为笔者某个项目的api结构图,虽然笔者按照某个约定api文件名==view里对应的页面组名.但是真正维护起来有时会遇到这么两种常见情况.
1.删除页面：你将删除pages/carts[购物车页面]里的某个页面,但是问题来了你不确定api/carts[购物车api]哪些api才是不用的,其实没用到的有些IDE会提示。
2.复制移动组件或页面: 比如你想复制组件,由于划分颗粒度不够细,你又一次面临该组件对应什么api和什么静态资源,这么移动复制时只能靠猜了= =

其实出现上面问题,就是该种按职能划分的方法不太适合前端。如果你仔细想想前端页面的删除逻辑,你就会知道我们一般会去做删除或废弃的单位就是页面或组件,所以笔者前端目录应该对于页面和组件继续细分

这里在扯远点,不知各位看官老爷是否记得MVC框架，这个衍生于后端思维的前端框架。为什么会被MVVM框架逐渐取代? 原因就是MVC这种框架不适合前端这种频繁需要数据和页面组件联动的场景,因为前端不仅仅是管好数据并渲染这么简单,而是要应付各种数据变化对应的页面组件变化,而MVVM框架恰能解决该痛点。所以，后端这种按职能划分的目录结构虽好，但用于前端也不是最合适的方案。

目标

在按职能划分目录的基础上,再细分到按页面和组件划分目录，做到删除组件时不会牵连到其他组件和页面！不会出现页面删除后，资源还常驻于项目中成为钉子户.

解决方案 示例结构

├──src
│   ├──view                    //页面
│       ├──carts               //购物车页面 
│           ├──component       //该页面专用组件
│           ├──model.js        //该页面的数据层[redux和vuex文件的细分]    
│           ├──index.js        //该页面的布局文件    
│           ├──service.js      //该页面用到的api  
│           ├──index.scss      //该页面用到的scss  
│   ├──utils                   //JS工具库
│   ├──api                     //共用api接口【永不删除】
│   ├──style                   //共用style【永不删除】
│   ├──config                  //配置
│   ├──model                   //共用model层其实是redux或vux文件【永不删除】
│   ├──component               //共用组件
│       ├──map                 //地图组件
│           ├──model.js        //该组件的数据层[redux和vuex文件的细分]    
│           ├──index.js        //该组件的布局文件    
│           ├──service.js      //该组件用到的api  
│           ├──index.scss      //该组件用到的scss  
│   ├── App.vue                // 入口页面
│   ├── main.js                // 入口 加载组件 初始化等
│   ├── assets                 // 主题 字体等静态资源【永不删除】
├── index.html                 // html模板
└── package.json

这里分为三个级别共用级别,页面级别,组件级别

共用级别

这个好理解,就是项目经常会共用到的资源，基本上一旦定下,为了项目稳定就永不删除了。

页面级别

│   ├──view                    //页面
│       ├──carts               //购物车页面 
│           ├──component       //该页面专用组件
│           ├──model.js        //该页面的数据层[redux和vuex文件的细分]    
│           ├──index.js        //该页面的布局文件    
│           ├──service.js      //该页面用到的api  
│           ├──index.scss      //该页面用到的scss

可见围绕该页面各种职能的文件又再建一遍,且都为该页面专用,连组件也是页面专用级别的。

组件级别

│   ├──component               //共用组件
│       ├──map                 //地图组件
│           ├──assets          //该组件专用图片或icon  
│           ├──model.js        //该组件的数据层[redux和vuex文件的细分]    
│           ├──index.js        //该组件的布局文件    
│           ├──service.js      //该组件用到的api  
│           ├──index.scss      //该组件用到的scss

可见围绕该组件各种职能的文件又再建一遍,且都为该组件专用。

总结

在按职能划分目录的基础上,再细分到按页面和组件划分目录。如此这般,组件想删即删想改即改，副作用更可控!!再也不怕留下钉子户资源啦！

专线服务超融合服务器前端规范前端规范文档前端项目前端项目视频

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/54837.html

我的前端规范系列-前端专属的目录结构[解决项目中的钉子户]

摘要：但是前端目录结构笔者认为应该对于页面和组件继续细分。举个列子当项目较大时目录里存在将会非常之多。所以，后端这种按职能划分的目录结构虽好，但用于前端也不是最合适的方案。为什么需要前端专属的项目结构这里说到目录结构，想必不少程序员会想到按职能分目录吧！以下所提的目录结构为单页面目录结构以下面这种为例[按职能划分] ├──src │ ├──view ...

hlcc 2019-08-23 16:47 评论0 收藏0
我的前端规范系列-前端专属的目录结构[解决项目中的钉子户]

摘要：但是前端目录结构笔者认为应该对于页面和组件继续细分。举个列子当项目较大时目录里存在将会非常之多。所以，后端这种按职能划分的目录结构虽好，但用于前端也不是最合适的方案。为什么需要前端专属的项目结构这里说到目录结构，想必不少程序员会想到按职能分目录吧！以下所提的目录结构为单页面目录结构以下面这种为例[按职能划分] ├──src │ ├──view ...

mylxsw 2019-08-05 16:39 评论0 收藏0
我的前端规范系列-前端专属的目录结构[解决项目中的钉子户]

摘要：但是前端目录结构笔者认为应该对于页面和组件继续细分。举个列子当项目较大时目录里存在将会非常之多。所以，后端这种按职能划分的目录结构虽好，但用于前端也不是最合适的方案。为什么需要前端专属的项目结构这里说到目录结构，想必不少程序员会想到按职能分目录吧！以下所提的目录结构为单页面目录结构以下面这种为例[按职能划分] ├──src │ ├──view ...

liuchengxu 2019-08-29 18:31 评论0 收藏0
双十二大前端工程师读书清单

摘要：本文最早为双十一而作，原标题双大前端工程师读书清单，以付费的形式发布在上。发布完本次预告后，捕捉到了一个友善的吐槽读书清单也要收费。这本书便从的异步编程讲起，帮助我们设计快速响应的网络应用，而非简单的页面。本文最早为双十一而作，原标题双 11 大前端工程师读书清单，以付费的形式发布在 GitChat 上。发布之后在读者圈群聊中和读者进行了深入的交流，现免费分享到这里，不足之处欢迎指教...

happen 2019-08-02 16:00 评论0 收藏0
双十二大前端工程师读书清单

摘要：本文最早为双十一而作，原标题双大前端工程师读书清单，以付费的形式发布在上。发布完本次预告后，捕捉到了一个友善的吐槽读书清单也要收费。这本书便从的异步编程讲起，帮助我们设计快速响应的网络应用，而非简单的页面。本文最早为双十一而作，原标题双 11 大前端工程师读书清单，以付费的形式发布在 GitChat 上。发布之后在读者圈群聊中和读者进行了深入的交流，现免费分享到这里，不足之处欢迎指教...

余学文 2019-08-22 11:14 评论0 收藏0