javascript基础之模块

什么是ES6模块?

在ES6中，每一个文件就是一个模块，有本身的做用域。在一个文件里面定义的变量、函数、类，都是私有的，对其余文件不可见。在看到这里的时候感受很熟悉，这不就是匿名函数自执行，而后一个个匿名函数放在一个个文件中的么，一个模块就是一个放在文件中的匿名自执行函数。二者对比就像下面这样:

// add.js 
(function(window){
    function add(a, b) {
       return a + b;
    }
    
    window.add = add // 经过window对象把 add 函数向外开放
})(window)

而使用ES6的模块, 就像下面

// add.js
function add(a, b) {
  return a + b;
}
export default add; // 经过export 导出 add方法

固然了，ES6的模块确定是比匿名函数自执行更加高级的一种封装了。相比于匿名函数，ES6模块具备下面几种特色。

1. ES6默认使用严格模式, 而不须要使用 "use strict"

2. ES6模块是编译时加载，对代码进行静态分析

3. 对外抛出接口的时候，不会污染全局的对象

4. 可以有效的处理依赖， 并且只会在第一次加载模块时，代码运行一次。后面再次加载，不会重复 运行，会从缓存中读取

......暂时这些，之后待补充

至于为何时候ES6的模块产生的历史就不讨论，网络上不少。我的感受明白了它的历史就能更好的明白它的特性。

export 与 import

说到模块，就须要想到两点，一个是模块的对外接口，后面文章中使用导出来表示，另一个是引入其余模块的接口，后面文章中使用导入来表示。

export命令用于规定模块的 导出， import命令用于模块的 导入。

重头戏就来了，怎么更好更快的理解模块的导出与导入。

当模块引入其余模块的时候，最终是获取其模块导出的值(基本数据类型或者引用类型)。因而能够这样去理解，当咱们引入的模块(文件)已经肯定下来了，那么导入的值也就肯定下来。

// add.js
function add(a, b) {
   return a + b;
}
export default add

// main.js
import add from './add.js'
add(1,2) // 3

上面导入的是 add.js 这个模块，其实主要是把add.js 中的 add 函数进行引入。

当须要到导入多个值的时候，能够经过对象来返回多个所须要的值。

// util.js
function add(a, b) {
   return a + b;
}

function reduce(a, b) {
   return a - b;
}
// 经过对象来返回多个值
export default {add: add, reduce: reduce};

// main.js
import util from './util.js'
console.log(util) // {add: add, reduce: reduce}

到这里，我我的以为模块的导入和导出基本上就已经很好了。由于这样不论是导出仍是导入，对接的接口都是简单方便。

固然这只是我以为。仍是上面的例子

// util.js
function add(a, b) {
   return a + b;
}

function reduce(a, b) {
   return a - b;
}

export default {add: add, reduce: reduce, name: 'util'}

// main.js
import util from './util.js'

util.add(1, 2) // => 3

util.reduce(4, 3) // => 1

util.name // => 'util'

有人说，当导入的是值是对象的时候，须要屡次去使用对象获取属性。 就像上面须要屡次使用util去获取属性。ES6中不是有解构赋值么，用来处理对象屡次获取属性的问题，那么导入对象的时候，也能够这样去处理。

因而按照对象的解构赋值，对上面的 main.js 改变。

// main.js
import {add: addFn} from './util.js'
// 这里在`webpack`中编译就已经报错了, ES6模块不支持这种方式

// 使用另一种解构方式，`导出`模块的属性名与`导入`的变量名一致

// main.js
import { add } from './util.js'
console.log(add)  // undefined
// 这里在`webpack`编译中没有报出错误，可是还有警告: "export 'add' was not found  

// 因而对 util.js 的`导出`进行改变
//util.js
 function add(a, b) {
   return a + b;
}

function reduce(a, b) {
   return a - b;
}

export {add, reduce, name: 'util'}
// 当修改完util.js 就完成了util.js模块`导出` 与 main.js模块的`导入`对接

模块的导入与导出大体能够分为两种模式

1. default 模式

default 模式下，模块中导出的值可使用任何类型(不论是基本类型仍是引用类型)，均可以对外输出。而导入的此模块也是很简单，提供一个接收的变量就能够（推荐这种模式）
例子以下:

// util.js 
function add(a, b) {
  return a + b;
}
function reduce(a, b) {
  return a - b;
}

const obj = { add, reduce };

export default obj;

// main.js
import util from './util.js';
// util 是能够变换任意名称
console.log(util)// => {add: ƒ, reduce: ƒ}

2. { xxx } 模式

{ xxx } 是不须要在模块导出的时候使用default的。可是这种方式下，导出的值必定是object的。
而导入的模块时是须要使用 { xxx }来接收。并且接收的变量名称还必须与导出模块属性名的同样。
例子以下:

// util.js 
function add(a, b) {
  return a + b;
}
function reduce(a, b) {
  return a - b;
}

let obj = { add, reduce };
// export obj; //webpack 编译报错

export { add, reduce };

// 除了这样直接导出对象，还能够像下面这样

export let name = 'util';
// 与 export { name } 效果同样;

深刻了解的话，二者仍是能够一块儿合用

function add(a, b) {
  return a + b;
}
function reduce(a, b) {
  return a - b;
}

export let name = 'util';
export { add, reduce };
// 至关于把这些属性合并在一块儿

// main.js
import { add, reduce, name } from './util.js' 
console.log(add) // add(a, b) { return a + b; }
console.log(name) // util

as 重命名

as 重命名主要是用于 { xxx }模式。由于在导出的时候，属性名是被肯定下来，而在导入此模块的时候，变量名须要跟此属性名同样才能获取对应的值。而使用 as 不只可以帮助导出模块把属性名重命名，也可以帮导入模块把接收的变量名进行重命名。
例子以下:

// util.js
function add(a, b) {
    return a + b;
}

export { add as addFn};

// main.js
import { addFn as add } from './util.js'

console.log(add) // add(a, b) { return a + b; }

上面是我的关于ES6的模块我的理解和学习心得。

另外想要深刻了解的能够查看官方文档 http://www.ecma-international...