Django+React全栈开发：代码组织

好久没有更新博客了，现在终于有时间写了，以后尽量周更

ES6模块

习惯使用Django框架后，对于模块化编程的好处想必大家都深有体会，尤其是当你曾经将大量的逻辑写在同一个文件甚至同一个函数中，到了某个时间点需要去修改这个程序中某个功能的时候。

在JavaScript中，我们也可以利用模块分割代码，优化我们的应用结构。以之前的代码为例：

import {
  Switch,
  Link,
  Route
} from "react-router-dom"
import About from "./About"
import ArticleDetail from "./ArticleDetail"

ES6有import与export语句对应导入与导出，值得注意的是，以上代码中可以看到import语句有两种不同的写法，让我们先来看看如何导出：

// a.js
const mode = 'default'
const age = 54

export {mode, age}

// 也可以在定义变量时直接导出
export foo = () => {
    console.log("hello")
}

// 以上导出方式对应的导入
import { mode, age } from './b.js'

// 可以使用通配符*与as将a中导出的全部内容导入为一个对象
import * as Foo from './b.js'

// 使用as避免命名冲突或避免过长的名称
import { mode as aMode } from './b.js'

以上导出方式对应了我们之前代码中需要花括号的导入方式，还有一种default语句：

const User = {
    username: 'elliot',
    email: 'hack00mind@gmail.com'
}

// 注意一个文件中只能有一个export default
export default User

// 但是可以与export一起用
export const year = 2020

// 导入default的名称可以省略花括号
import User, { year } from './foo.js'

代码组织

在React中，我们将页面拆分成多个不同的组件，我们已经大致将不同的功能、不同页面的组件放到了不同文件中，这些代码都在src目录下，但在工作中，随着业务的增长，我们要考虑将组件拆分到更多不同的模块中去。

src
├── About.js
├── App.css
├── App.js
├── App.test.js
├── ArticleDetail.css
├── ArticleDetail.js
├── ArticleList.css
├── ArticleList.js
├── index.css
├── index.js
├── logo.svg
├── serviceWorker.js
└── setupTests.js

现在我们的文件已经略显凌乱了，虽然我们已经将一些不同的组件拆分到了不同的文件中，但是不同名称的不同文件混在了一起，看上去还是不舒服。

我们可以将同一个组件相关的代码文件，样式文件，测试文件放到同一个文件夹中：

├── About
│   └── index.js
├── App
│   ├── index.css
│   ├── test.js
│   └── index.js
├── ArticleDetail
│   ├── index.css
│   └── index.js
├── ArticleList
│   ├── index.css
│   └── index.js
├── index.css
├── index.js
├── logo.svg
├── serviceWorker.js
└── setupTests.js

现在我们的文件在结构上要更加清晰些，或者还可以如下所示：

├── components
│   ├── About
│   │   └── index.js
│   ├── App
│   │   ├── index.css
│   │   ├── test.js
│   │   └── index.js
│   ├── ArticleDetail
│   │   ├── index.css
│   │   └── index.js
│   └── ArticleList
│       ├── index.css
│       └── index.js
├── constants
│   └── index.js
├── index.css
├── index.js
├── logo.svg
├── serviceWorker.js
└── setupTests.js

注意到原本的组件文件名都被改成了index.js，这是node项目中入口文件的默认文件名，当然你可以改成自己想要的其它名称。当使用这个默认名称时，在导入时可以省略index.js：

import React from 'react'
import {
  Switch,
  Link,
  Route
} from "react-router-dom"

// 注意文件位置变动，引入时相对路径要修改
import './App.css'
import ArticleList from "../ArticleList"
import About from "../About"
import ArticleDetail from "../ArticleDetail"

考虑下列场景：

/*
文件结构如下
./Buttons
├── CancelButton.js
├── index.js
└── SubmitButton.js
*/

// Buttons/index.js
import CancelButton from './CancelButton'
import SubmitButton from './SubmitButton'

export {
	CancelButton,
    SubmitButton,
}

// 在其他文件中可以如此引入
import { CancelButton, SubmitButton } from '../Buttons'