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'