起源

模块(module)可以让一个程序在设计上拆分成各自的小部分,然后通过简单方式组装起来

ES5实现

在ES6之前,模块加载方案主要有CommonJS(服务器)和AMD(浏览器)两种,缺陷是只能在运行时才能确定模块的依赖关系及输入输出的变量

/*CommoJS*/
let { stat, exists, readFile } = require('fs')

该方法的实质是生成一个对象获取fs上所有方法并按需获取,这种加载也称为"运行时加载"

// 等同于
let _fs = require('fs');
let stat = _fs.stat;
let exists = _fs.exists;
let readfile = _fs.readfile;

export

正常来说,一个js文件就是一个模块,该模块的变量函数等时无法被外部读取的,而如果打算输出变量函数等的话,便可以使用ES6提供的export

export var ABYSS = 'Alice'; //对外输出变量
export function multiply(x, y) { //对外输出函数
  return x * y;
};

/*React.js*/
import React from 'react'
export default React.createClass({
    render(){
        return (
            <div className="">
                Some Write
            </div>
            )
    }
})

import

到了ES6以后就可以使用export输出指定代码,再通过import加载

/*ES6 import*/
import { stat, exists, readFile } from 'fs'

/*React.js*/
import React from 'react'

import仅加载需要的方法,效率要更高,称为"编译时加载"或"静态加载",不过需要知道的是通过import加入的方法并不是对象,所以无法引用它本身

未完待续