前端项目文件构造与组件定名

2024年1月12日 175次阅读 来源: 奈布哥哥

启事

在开辟项目的过程当中，人人多多少少会对本身项目的目次构造发生迷惑，怎样合理地分别模块以及怎样合理的定名，这些假如在项目前期的时刻没有好好范例好的话，那末背面新进来的人便会依据本身的逻辑又从新在分别本身的目次，如许日复一日项目体积不但会增添而且目次构造会愈来愈杂沓，因而异常有必要聚焦项目的文件目次，本文也是出于如许的一个起点来写的，先来看看几个优异项目的目次。

crate-react-app

├── 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是异常的简约，只包含了src以及public2个目次。

@vue/cli

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

vue的cli也是千篇一律。

nuxt

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

相关于SPA运用，MPA运用特别是同构运用来讲，目次构造也是很清楚的。

那末怎样构造文件才合理呢？

答案就是组件化，统统以组件为中心来竖立响应的文件目次，这里有几种分别组件的体式格局：

1、大众组件与营业组件：

平常比较经常使用的分别体式格局就是有大众用到的组件便往上提拔一级，碰到部份页面用到的组件的话有能够放到跟页面同级也有能够直接放到最上面的一级，比方：

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

这类长处的话比较天真，然则部分的大众部份你很难去界定。

2、BEM组件分别

这类的话组件分别的比较清楚。

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

将组件强势得分为3类，这类构造上虽然异常清楚，然则在项目开辟的过程当中你不能不频仍地将组件在Block跟Elemens之间移来移去，降低了开辟体验。

3、容器组件与展现型组件

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

这里就要看你怎样定义什么是容器组件跟展现型组件了，关于一样平常的开辟来讲，这2者是没有强迫的边境的，两者之间能够随便切换，也并不是说展现组件肯定非得是纯组件，也不肯定是说容器组件肯定非得有状况跟生命周期，而关于本人来讲，一个很好的原则就是展现组件是为了解耦，容器组件是为了内聚。

4、款式组件与逻辑组件

假如项目中有用到css-in-js之类的东西，如styled-component，想必会想到款式放在那里这个题目，因而便会涌现以下状况：

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

这就会多出来一种逻辑出来。

那末有无一致的一种体式格局来范例好组件的文件目次呢？

答案是有的，这类是基于以上几种分别体式格局来的，一般开辟一个组件的时刻有能够被认定为款式组件或许容器组件，那末我们这时候就不把它们离开，而是一切的组件都放在components目次下面，再依据模块举行分别，一切的页面都是经由过程模块组件举行组合，最外层的页面组件则是应该是最简约以及少代码量的。以下：

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

比方在用户模块这个目次下，有头像、信息卡以及上岸框的情形，我们限制image、js、scss分别在每一个组件目次下，如许做的话，单个组件假如要迁徙的话就能够异常轻易的移动了，这里再申明下LoginBox下面的AreaList，假如再LoginBox要增加功用的话，那末直接就在这个组件增加，也异常轻易地扩大了。

末了至于文件怎样定名

这个要看项目组怎样划定，但有个通用原则是假如是类的话必需是首字母大写，我上面的例子，因为组件也能够看成是一个类，因而大写是比较清楚的，至于组件的定名，有个比较盛行的体式格局叫path-base-naming,就是基于文件途径来定名，比方在home/index.js 内里定名AreaList的话就能够如许：

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

但假如在LoginBox目次下定名就不再须要这么长了.

import AreaList from './AreaList';

总结

末了基于这类分模块的体式格局，开辟者能够自在的将容器组件或许展现组件散布在各个自力的组件文件夹当中，能够说范例和天真性都得到了保证。

参考

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

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