起源
模块(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加入的方法并不是对象,所以无法引用它本身
未完待续
