ES6的模块化

注意：
若是是单独用 export 来导出的。
必须使用 import {xxx} from 'xxx'; 的方式来导入。

1.export

模块的功能主要由 export 和 import 组成。 每个模块都有本身单独的做用域，模块之间的相互调用关系是经过 export 来规定模块对外暴露的接口，经过 import 来引用其余模块提供的接口。同时还为模块创造了命名空间，防止函数的命名冲突。

ES6容许在一个模块中使用 export 来导出多个变量或函数。

导出变量：

//test.js
export var name = 'Rainbow';
export let username = 'Jack';
复制代码

ES6不只支持变量的导出，也支持常量的导出。

export const GET_PRODUCT_LIST = 'GET_PRODUCT_LIST';    // 获取商品列表
复制代码

ES6将一个文件视为一个模块，上面的模块经过 export 向外输出了一个变量。一个模块也能够同时往外面输出多个变量。

//test.js
let username = 'Rainbow';
let age = '24';
export {username, age};
复制代码

导出函数：

//common.js
export function myClick(options){
    return options;
}
复制代码

导入(import)

定义好模块的输出之后，就能够在另一个模块经过 import 引用。

import { myClick } from 'common';   //common.js
import { username, age } from 'test';   //test.js
复制代码

一条 import 语句能够同时导入默认函数和其余变量。

import defaultMethod, { otherFunction } from 'xxx.js'; 
复制代码

2.示例

咱们先来建立一个 test.js 文件，来对这一个变量进行输出：

export let myName = "laowang";
复制代码

而后能够建立一个 index.js 文件，以 import的形式将这个变量进行引入：

import { myName } from './test.js';
console.log(myName);    //laowang
复制代码

若是要输出多个变量能够将这些变量包装成对象进行模块化输出：

let myName = "laowang";
let myAge = 90;
let myfn = function () {
    return "我是" + myName + "!今年" + myAge + "岁了";
}
export {
    myName,
    myAge,
    myfn
}
/*********************接收的代码调整为*******************/
import { myfn,myAge,myName } from "./test.js";
console.log(myfn());        //我是laowang!今年90岁了
console.log(myAge);         //90
console.log(myName);        //laowang
复制代码

若是你不想暴露模块当中的变量名字，能够经过as来进行操做：

let myName = "laowang";
let myAge = 90;
let myfn = function (){
    return "我是"+myName+"! 今年"+myAge+"岁了"
}
export {
    myName as name,
    myAge as age,
    myfn as fn
}
/********************** 接收的代码调整为 **********************/
import { fn, age, name } from "./test.js";
console.log(fn());    //我是laowang! 今年90岁了
console.log(age);     //90
console.log(name);    //laowang
复制代码

也能够直接导入整个模块，将上面的接收代码修改成：

import * as info from "./test.js";  //经过*来批量接收， as来指定接收的名字
console.log(info.fn());             //我是laowang! 今年90岁了
console.log(info.age);              //90
console.log(info.name);             //laowang
复制代码

默认导出(default export)

一个模块只能有一个默认导出，对于默认导出，导入的名称能够和导出的名称不一致。

/******************* 导出 ******************/
export default function() {
    return "默认导出一个方法";
}
/************************ 引入 ********************/
import myFn from "./test.js";    //注意这里默认导出不须要用 {}。
console.log(myFn());             //默认导出一个方法
复制代码

能够将全部须要导出的变量放入一个对象中，而后经过default export进行导出。

/******************* 导出 ******************/
export default {
    myFn() {
        return "默认导出一个方法"
    },
    myName: "laowang"
}
/******************** 引入 *****************/
import myObj from "./test.js";
console.log(myObj.myFn(), myObj.myName);  //默认导出一个方法 laowang
复制代码

一样也支持混合导出

/******************* 导出 ******************/
export default function() {
    return "默认导出一个方法";
}
export var myName = "laowang";
/******************* 引入 ******************/
import myFn, { myName } from "./test.js";
console.log(myFn(), myName);     //默认导出一个方法 laowang
复制代码

重命名export 和 import 若是导入的多个文件中，变量名字相同，即会产生命名冲突的问题，为了解决该问题，ES6为提供了重命名的方法，当你在导入名称时能够这样作：

/******************* test1.js *****************/
export let myName = "我来自test1.js"; 
/******************* test2.js *****************/
export let myName = "我来自test2.js";
/******************* index.js *****************/
import { myName as name1 } from "./test1.js";
import { myName as name2 } from "./test2.js";
console.log(name1);        //我来自test1.js
console.log(name2);        //我来自test2.js
复制代码

参考： es6中的模块化