为何须要前端专属的项目构造

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

以下面这类为例[按职能分别]

├──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  

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

总结

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