javascript实现注册页面并校验（Javascript中的import和export的简单介绍）

本文中介绍的示例将使用Node.js和React.js。 React文件是使用create-react-app（https://github.com/facebookincubator/create-react-app）创建。开始在Node中使用'require'语句的ES5示例，然后使用ES6'import'语句显示相同的内容。

在Node中使用ES5语法意味着文件之间的代码共享是通过'require'和'module.exports'语句完成的。Javascript中的“Module”可以被认为是一个容纳相关代码的容器，然后可以将其导出到另一个文件中。

以下是React应用程序的前三行，首先会在页面上显示三个彩色块。

//App.js var React = require('react'); var Component = React.Component; require('./App.css'); var Color = require('./Shapes');

这是设置一些变量，需要一些文件和库。第一个是React，它使用'require'语句设置为等于'react'库。第二个是Component，它被设置为等于React库的Component模块。第三行只是使用'require'来包含.css文件，该文件不需要设置为变量。第三行只是使用'require'来包含.css文件，该文件不需要设置为变量。最后，Color变量设置为从'Shapes.js'文件中导出的值，我们将在稍后看到。

此文件的其余部分如下所示：

//App.js class App extends Component { render() { return ( <div className="App"> <div className="colors"> <Color name="red"/> <Color name="green"/> <Color name="blue"/> </div> </div> ); } } module.exports = App;

这是定义App组件，它调用三个Color组件，最后用module.exports导出该组件。

Color组件看起来非常相似

//Shapes.js var React = require('react'); var Component = React.Component; class Color extends Component { render() { const divStyle = { backgroundColor: this.props.name, color: 'white', fontSize: '20px', height: '100px', width: '100px' } return ( <div style={divStyle}>{this.props.name}</div> ) } } module.exports = Color;

同样，需要必要的React库，定义组件并导出它。唯一的补充是'divStyle'对象，它保存CSS值。结果看起来像这样。

您可以从文件中导出多个内容。如果我想在此页面上使用其他组件怎么办？我可以创建一个新文件，并要求在'App.js'或我可以将它添加到现有文件并导出它们。

这实际上取决于您的偏好和您的应用。理想情况下，组件应该可以在不同的应用程序中重用，因此您应该将它们组合起来，以便它们独立存在。然而，如果你的应用程序有两个组件总是在一起，那么将它们放在一个文件中并将它们一起导出可能更有意义。

如果我将另一个名为Animal的组件添加到'Shapes.js'文件中，它现在将如下所示。

//Shapes.js var React = require('react'); var Component = React.Component; class Color extends Component { render() { const divStyle = { backgroundColor: this.props.name, color: 'white', fontSize: '20px', height: '100px', width: '100px' } return ( <div style={divStyle}>{this.props.name}</div> ) } } class Animal extends Component { render() { const divStyle = { fontSize: '20px', height: '100px', width: '100px', border: '1px solid black', borderRadius: '50%' } return ( <div style={divStyle}>{this.props.name}</div> ) } } module.exports = Color;

但现在有一个问题。我只导出Color。我该如何导出它们？

首先，我将两个组件添加到module.exports。

//Shapes.js module.exports = { Color: Color, Animal: Animal }

所以现在这个文件正在导出一个模块对象，里面有两个组件。因为导出现在有点不同，导入也必须改变一点。

//App.js var {Color} = require('./Shapes'); var {Animal} = require('./Shapes');

这里我们为每个组件分配变量，但是我们将变量的名称括在“{}”中。您可以随意调用这些，但变量的名称需要与'Shapes.js'中的exports对象的键匹配。并且在调用React组件时必须使用该变量名

//Shapes.js module.exports = { Foo: Color, Bar: Animal } //App.js var {Foo} = require('./Shapes'); var {Bar} = require('./Shapes'); class App extends Component { render() { return ( <div className="App"> <div className="colors"> <Foo name="red"/> <Foo name="green"/> <Foo name="blue"/> </div> <div className="animals"> <Bar name="dog" /> <Bar name="cat" /> <Bar name="bird" /> </div> </div> ); } }

如果使用的是ES6，那么导入和导出的想法是相同的，但语法有点不同。现在使用'import'而不是'require'，如果只有一个东西要从文件中导出，你也可以使用'export default'语句。

//App.js import React, {Component} from 'react'; import './App.css'; import {Color, Animal} from './Shapes'; ... export default App; //Shapes.js import React, {Component} from 'react'; export class Color extends Component {... export class Animal extends Component {...

在'Shapes.js'中，我将单独导出每个类。如果我不需要导出它们或只有一个，我也可以在那里使用导出默认语句。