致虚极 守静笃
代码组织
2020-09-08发布 83

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

ES6模块

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

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

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

ES6importexport语句对应导入与导出,值得注意的是,以上代码中可以看到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'