module

module

ES6之前javascript没有模块体系,无法将一个大型的项目拆分成互相依赖的小文件，再用简单的方式进行简单的拼接。

社区制定了模块化开发的规范，最主要的两种模块化解决的方案：Commonjs，AMD两种。

1. commonjs用于服务器端
2. AMD用于浏览器端\

ES6的模块完全可以取代commonjs和AMD两种规范。

模块功能主要有两个命令构成：export和import。

在user.js内：

export let firstName = 'san';

export let lastName = 'zhang';

export let year = 2000;

上述代码可以写成：

let firstName = 'san;

let lastName = 'zhang';

let year = 2000;

export {firstName,lastName,year}  //这种写法可以一眼看出抛出的模块


//在index.js里引入模块 import {firstName,lastName,year} 


//整体引用：import * as info from '文件路径'

//起别名

//在抛出模块起别名

export {firstName as f,lastName as l,year as y}

在index.js里引入模块 import {f,l,y} 

//在引入模块内起别名

export {firstName,lastName,year} 

import {firstName as f,lastName as l,year as y} 

export default 默认抛出，一个模块只能有一个默认抛出，所以在引用时，可以不用写大括号

export default function(str){
    return str.split('').reverse().join('')
}

import reverse from '文件路径'

页面即有默认抛出还有其它抛出，引用时，可以直接使用：

import reverse,* as info from '文件路径'

export 注：

export 1; //报错

let m = 1;
export m;//报错

报错的原因：没有提供对外的接口，都抛出的是1，没办法解构

export default注：

export default 1; //不会报错

let m = 1;
export default m;  //不会报错

export default命令的本质是将后面的值，赋给default变量，所以可以直接将一个值写在export
default之后。在引用时，系统允许你为它取任意名字。

ES6是静态加载的，requirejs和commonjs是在运行时加载。

1)//报错：因为用到了表达式
import {'f' + 'oo'} from 'my_module'

2)报错：因为用到了变量
let module = 'my_module';

import {foo} from module;

3)报错：因为用到了条件语句
if(x===1){
    import {foo} from 'module1'
}else{
    import {foo} from 'module2'
}

注：1>import命令具有提升的效果，会提升到整个模块的头部，首先执行。