理解ES6的模块(Understanding ES6 Modules)

标签：es6

理解ES6的Modules

原文出处: Understanding ES6 Modules.

基础(Basic)

    在ES6中,每个模块的都是定义在它自己的文件中.在模块中定义的变量或者是函数在外部都是不可见的,

除非你显示的使用export来导出它们. 这意味着你可以在你的模块中编写代码, 然后只导出那些需要被其他部分可以访问的部分几个.

ES6模块是使用原生的定义方式进行定义的. 如果想从一个模块中导出某个变量, 只需要使用关键词export.

相似的, 如果想要使用来自另外一个模块中的变量, 可以使用关键词import.

简单模块Demo(Working with a Simple Module)

让我们来创建一个拥有两个功能函数的模块.

1. generateRandom() : 生成一个随机的数字

2. sum(): 将两个数字进行相加.

接下来, 创建文件utility.js :

utility.js

functiongenerateRandom() {
    returnMath.random();
}
 
function sum(a, b) {
    return a + b;
}
 
export { generateRandom, sum }

关键词export 导出了这两个函数, 你可以看到, 这两个导出的函数是使用花括号进行包围, 并且他们使用逗号进行隔开.

你也可以使用下面的方式对导出的内容进行重命名.

import { generateRandom, sum } from'utility';
 
console.log(generateRandom());//logs a random number
console.log(sum(1, 2));//3

import 'utility' as utils;
 
console.log(utils.generateRandom());//logs a random number
console.log(utils.sum(1, 2));//3

var utils = {
  generateRandom:function() {
    return Math.random();   
  },
  sum:function(a, b) {
    return a + b;
  }
};
 
export default utils;

import utils from'utility';
 
console.log(utils.generateRandom());//logs a random number
console.log(utils.sum(1, 2));//3
export default utils; //exports the imported value

理解ES6的模块(Understanding ES6 Modules)

标签：es6

原文地址：http://blog.csdn.net/lcstrive/article/details/43130077