一张页面引起的项目架构思考（rax+Typescript+hooks）

点击上方“全栈前端精选“，回复“1”进交流群

加入我们一起学习，天天进步

前言

“

好的书本分章节、好的代码分模块，那么好的架构该如何定义呢？

咳咳，不要意思，题目起大了~~ 小生之辈，岂敢以架构而论。

不过话说来，很多人都认为前端无非就是 HTML+CSS+JS,一个目录一类文件，有何架构可言。但是我想说。。。。你说的都对！

但是，笔者一直在探索不同的页面架构组织形式，鄙人愚见，好的架构，能够方便拓展和开发以及后期的项目维护。

在笔者刚开始接触前端的时候，就一直在思考怎么样的架构比较舒服易于扩展，且能装 B。React-Full-Dianping-Demo里面就有写到对于react+react-redux+soga的一些列代码组织的思考：react技术栈项目结构探究 (详见 github/Nealyang)

一直还在学习，本文也只是拿来探讨下本次我开发一个页面时，我个人的一些代码组织方式。抛个砖~

望各位大佬不啬赐教。

项目架构

src
├─ action-log
│    ├─ constants.ts
│    └─ index.ts
├─ app.js
├─ app.json
├─ common
│    ├─ animation-utils.ts
│    ├─ business-utils.ts
│    ├─ constants.ts
│    ├─ detail-utils.ts
│    ├─ mtop-utils.ts
│    ├─ net-utils.ts
│    ├─ price-utils.ts
│    ├─ storage-utils.ts
│    ├─ string-utils.ts
│    ├─ time-utils.ts
│    ├─ type.ts
│    ├─ url-utils.ts
│    └─ utils.ts
├─ components
│    ├─ loading-page
│    │    ├─ index.css
│    │    └─ index.tsx
│    └─ pm-bottom
│           ├─ index.css
│           └─ index.tsx
├─ document
│    └─ index.jsx
├─ event
│    └─ EVENTS.ts
├─ modules
│    ├─ bottom-action
│    │    ├─ index.css
│    │    └─ index.tsx
│    └─ page-container
│           ├─ base
│           ├─ decorator
│           ├─ index.tsx
│           └─ libs
└─ pages
       ├─ buyer-identity
       │    ├─ components
       │    ├─ constants
       │    ├─ customized-hooks
       │    ├─ index.tsx
       │    ├─ types