简述Javascript中的require、import、exp

简单的程序只需要几行代码，一个文件，这样的代码很容易管理。但当项目总是非常复杂的，于是我们需要一种共享代码的机制。 require``import``exports这些语法，就可以将一个文件中的代码倒出，使得在另一个文件中可以轻易使用。

ES5语法

在ES5中，使用require和module.exports来共享代码，而module就是承载代码的容器

下面的React代码，用来在页面上显示三个颜色块

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

第一句React用来引用'react'库，用的是require的语法
第二句Component引用react库中的Component组件
第三句导入css文件，不需要赋值给变量
第四句给Color变量赋了从Shape.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.js定义了App组件，这里用module.exports 导出

//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;

结果如下:

导出多个组件

下面的Shape.js不仅导出了Color组件，还导出了Animal组件

//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: Color,
  Animal: Animal
}

这里导出的组件，需要一个Key来标志

导入的时候也可以用相应的Key来给变量赋值

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

class App extends Component {
  render() {
    return (
      <div className="App">
        <div className="colors">
          < Color name="red"/>
          < Color name="green"/>
          < Color name="blue"/>
        </div>
        <div className="animals">
          < Animal name="dog" />
          < Animal name="cat" />
          < Animal name="bird" />
        </div>
      </div>
    );
  }
}

结果如下:

ES6语法

ES6的语法有些改变，但是思想是一致的

ES6中用import替代了require，而且当只有一个变量或函数需要导出的话，可以使用export default

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 {...