摘要：組件劃分這種的話組件劃分的比較清晰。將組件強(qiáng)勢(shì)得分為類，這種結(jié)構(gòu)上雖然非常清晰，但是在項(xiàng)目開(kāi)發(fā)的過(guò)程中你不得不頻繁地將組件在跟之間移來(lái)移去，降低了開(kāi)發(fā)體驗(yàn)。

在開(kāi)發(fā)項(xiàng)目的過(guò)程中，大家多多少少會(huì)對(duì)自己項(xiàng)目的目錄結(jié)構(gòu)產(chǎn)生疑惑，如何合理地劃分模塊以及如何合理的命名，這些如果在項(xiàng)目前期的時(shí)候沒(méi)有好好規(guī)范好的話，那么后面新進(jìn)來(lái)的人便會(huì)按照自己的邏輯又重新在劃分自己的目錄，這樣日復(fù)一日項(xiàng)目體積不但會(huì)增加而且目錄結(jié)構(gòu)會(huì)越來(lái)越混亂，因此非常有必要聚焦項(xiàng)目的文件目錄，本文也是出于這樣的一個(gè)出發(fā)點(diǎn)來(lái)寫(xiě)的，先來(lái)看看幾個(gè)優(yōu)秀項(xiàng)目的目錄。

├── package.json
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── Lazy.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    └── serviceWorker.js

create-react-app是非常的簡(jiǎn)潔，只包含了src以及public2個(gè)目錄。

├── package.json
├── public
│   ├── favicon.ico
│   └── index.html
└── src
    ├── App.vue
    ├── assets
    │   └── logo.png
    ├── components
    │   └── HelloWorld.vue
    └── main.js

vue的cli也是如出一轍。

├── assets
├── components
│   └── Logo.vue
├── layouts
│   └── default.vue
├── middleware
├── nuxt.config.js
├── package-lock.json
├── package.json
├── pages
│   └── index.vue
├── plugins
├── server
│   └── index.js
├── static
│   └── favicon.ico
└── store

相對(duì)于SPA應(yīng)用，MPA應(yīng)用特別是同構(gòu)應(yīng)用來(lái)說(shuō)，目錄結(jié)構(gòu)也是很清晰的。

答案便是組件化，一切以組件為核心來(lái)建立相應(yīng)的文件目錄，這里有幾種劃分組件的方式：

一般比較常用的劃分方式便是有公共用到的組件便往上提升一級(jí)，遇到部分頁(yè)面用到的組件的話有可能放到跟頁(yè)面同級(jí)也有可能直接放到最上面的一級(jí)，例如：

├── common
│   ├── Footer
│   ├── Header
│   └── Slider
└── pages
    ├── _common
    │   └── banner
    ├── index
    └── info

這種優(yōu)點(diǎn)的話比較靈活，但是局部的公共部分你很難去界定。

這種的話組件劃分的比較清晰。

├── Blocks
│   ├── Avatar
│   │   ├── index.js
│   ├── Button
│   │   ├── index.js
│   ├── Header
│   │   ├── index.js
│   │   └── style.scss
├── Elements
│   ├── DownloadBtn.js
│   ├── Logo.js
└── Icons
    ├── Audience.js

將組件強(qiáng)勢(shì)得分為3類，這種結(jié)構(gòu)上雖然非常清晰，但是在項(xiàng)目開(kāi)發(fā)的過(guò)程中你不得不頻繁地將組件在Block跟Elemens之間移來(lái)移去，降低了開(kāi)發(fā)體驗(yàn)。

├── components
│   ├── Banner
│   ├── Footer
│   └── Header
├── containers
│   ├── ArticleDetail
│   └── CommentList
└── screens
    └── home

這里就要看你怎么定義什么是容器組件跟展示型組件了，對(duì)于日常的開(kāi)發(fā)來(lái)說(shuō)，這2者是沒(méi)有強(qiáng)制的邊界的，兩者之間可以隨意切換，也并不是說(shuō)展示組件一定非得是純組件，也不一定是說(shuō)容器組件一定非得有狀態(tài)跟生命周期，而對(duì)于本人來(lái)說(shuō)，一個(gè)很好的準(zhǔn)則就是展示組件是為了解耦，容器組件是為了內(nèi)聚。

如果項(xiàng)目中有用到css-in-js之類的工具，如styled-component，想必會(huì)想到樣式放在哪里這個(gè)問(wèn)題，于是便會(huì)出現(xiàn)如下情況：

./
└── Avatar
    ├── index.js
    └── styles
        └── styleWrapper.js

這就會(huì)多出來(lái)一種邏輯出來(lái)。

答案是有的，這種是基于以上幾種劃分方式來(lái)的，通常開(kāi)發(fā)一個(gè)組件的時(shí)候有可能被認(rèn)定為樣式組件或者容器組件，那么我們這時(shí)就不把它們分開(kāi)，而是所有的組件都放在components目錄下面，再根據(jù)模塊進(jìn)行劃分，所有的頁(yè)面都是通過(guò)模塊組件進(jìn)行組合，最外層的頁(yè)面組件則是應(yīng)該是最簡(jiǎn)潔以及少代碼量的。如下：

├── components
│   └── User
│       ├── Avatar
│       │   ├── images
│       │   ├── index.js
│       │   └── style.scss
│       ├── InfoCard
│       │   ├── images
│       │   ├── indexjs
│       │   └── style.scss
│       └── LoginBox
│           ├── reaList
│           │   ├── images
│           │   ├── index.js
│           │   └── style.scss
│           ├── index.js
│           └── style.scss
└── screens
    └── home
        └── index.js

例如在用戶模塊這個(gè)目錄下，有頭像、信息卡以及登陸框的情景，我們限定image、js、scss分別在每個(gè)組件目錄下，這樣做的話，單個(gè)組件如果要遷移的話就可以非常方便的移動(dòng)了，這里再說(shuō)明下LoginBox下面的AreaList，如果再LoginBox要添加功能的話，那么直接就在這個(gè)組件添加，也非常方便地?cái)U(kuò)展了。

這個(gè)要看項(xiàng)目組如何規(guī)定，但有個(gè)通用原則是如果是類的話必須是首字母大寫(xiě)，我上面的例子，由于組件也可以看成是一個(gè)類，因此大寫(xiě)是比較清晰的，至于組件的命名，有個(gè)比較流行的方式叫path-base-naming,就是基于文件路徑來(lái)命名，例如在home/index.js 里面命名AreaList的話就可以這樣：

import LoginBoxAreaList from "../../components/LoginBox/AreaList";

但如果在LoginBox目錄下命名就不再需要這么長(zhǎng)了.

import AreaList from "./AreaList";

最后基于這種分模塊的方式，開(kāi)發(fā)者可以自由的將容器組件或者展示組件分布在各個(gè)獨(dú)立的組件文件夾之中，可以說(shuō)規(guī)范和靈活性都得到了保障。

https://medium.com/@dan_abram...
https://hackernoon.com/struct...