ECMAScript6.0新特性介绍第七篇

在这篇博客中我将介绍ES6的模块化。在ES6当中一个JS文件就是一个模块，如果想要实现模块与模块之间进行访问。就要用到ES6的两个模块化命令：export和import。export关键字用于用户自定义模块的对外接口，而import命令输入其他模块的功能。关于import和export的使用参考如下代码：

• 使用export导出单个变量。

//student.js
let name= 'zhangsan';
let age = '19';
let sex= 'male';
export {name, age, sex};

• 使用import命令获取其他模块导出的变量

import {name, age, sex} from './student';
console.log(name+':'+age+':'+sex);//输出zhangsan:19:male
//你也可以给导入的变量起别名
import { name as nickname} from './student';
console.log(nickname);//输出zhangsan

• 使用export导出函数

    // math.js 以下函数的作用是将传入的一组参数乘以二倍后返回。
   export function double(...args) {
    return args.map(x => x * 2);
}
    //以下函数的作用是将传入的参数进行求和。
    export function sum(...args) {
    let sum = args.reduce((currentSum, item, index) => currentSum + item);
    return sum;
}

• 使用import引入其他模块导出的函数

import { double, sum} from './math';
console.log(double(1,2,3,4,5,6,7,8,9,10));//输出:2,4,6,8,10,12,14,16,18,20
console.log(sum(1,2,3,4,5,6,7,8,9,10));//输出：55

• module命令：可以取代import语句，达到整体输入模块的作用。

module math from './math';
console.log(math.double(1,2,3,4,5,6,7,8,9,10));//输出:2,4,6,8,10,12,14,16,18,20
console.log(math.sum(1,2,3,4,5,6,7,8,9,10));//输出：55

• export default命令：为加载模块指定默认输出

 // hello.js
 export default function () {
      console.log('weclome to the imooc!');
    }
//其他模块加载hello.js时可以指定任意名称。
import  imooc from './hello';
imooc(); // 输出'weclome to the imooc!

关于ES6的模块化就介绍到这里。