ECMAScript入门（七）--Module语法

你带着你的同事联调的时候
????

从古至今，Javascript都没有自带的模块体系，能作的，也就只是将不一样做用的代码写在不一样的JS文件中，而后经过<script>分别引入。这样作又一个很是致命的问题，那就是咱们要定位一个方法变得很是的困难。

一个灵活的模块体系，能让你的代码之间的依赖关系更加直观，一个好的模块式的写法让没个方法都能很快的找到声明位置所在。

在NODE中是有这种写法的，咱们称为CMD语法，就是经过require关键词，引入所要依赖的文件。

固然，随着前端在WEB开发中占据的比重愈来愈高，客户端JS的模块化也尤其重要。其实已经有比较成熟的前端框架来实现这个功能，好比RequireJs和Seajs。ES6的出现，让JS实现模块功能变得更�加简单。

//requirejs的语法
define(['moudleA'], function(){
　　function foo(){
　　　　doSomething();
　　}
　　return {
　　　　foo : foo
　　};
});

//seajs的用法
// 全部模块都经过 define 来定义
define(function(require, exports, module) {
  // 经过 require 引入依赖
  var $ = require('jquery');
  var Spinning = require('./spinning');
  // 经过 exports 对外提供接口
  exports.doSomething = ...
  // 或者经过 module.exports 提供整个接口
  module.exports = ...
});

ES6的Module语法

ES6的模块功能主要经过两个关键字来实现export和import。

从字面上不难看出，export是输出，即用来将模块内部的方法暴露出来，而import是输入，即引入其余模块的方法，便于在本模块中调用其余模块的方法。

export关键字

正常来说，咱们能够将每一个模块都写成一个独立的文件，因为Javascript做用域的问题，每一个模块内部的变量及方法都是私有的，即只能内部访问，外部没法访问。要想使模块内部的方法能够从外部访问，就必须使用export关键字。

//moduleA.js
var moduleA1 = "a";
var moduleA2 = "aa";
function moduleFunc(){
    console.log(moduleA2);
}
export {
    moduleA1,
    moduleA2 as moduleA,
    moduleFunc as module
};

如上面的代码所示，在模块中声明了变量和方法，咱们只须要将变量名或者方法名，置于export的做用下，就能够被其余模块使用。

as关键词能够用来重命名，上面的例子中moduleA就等于moduleA2。

这里须要注意的是，export定义的是对外的接口，接口必须在模块内部被声明或实现过，否则就会报错。

var a = 1;
export a;//不报错

export b;//报错

import关键字

使用export定义了模块的接口以后，其余模块就能够经过import命令来引入这个模块

//moduleB.js
import {moduleA1, moduleA} from './moduleA.js';

import {module as moduleFunc} from './moduleA.js';

moduleFunc();

如上面的代码所示，经过import关键字从moduleA.js中引入了moduleA1、moduleA2、moduleFunc()三个变量，这样在这个模块中就能使用A模块中的变量了。

须要注意的是，import关键字有提高效果，也就是不管写在哪一个位置，都和写在模块顶部效果同样。import加载模块的过程是在编译阶段执行的，代码运行以前就已经完成了加载过程。

若是咱们须要引入一个模块中的全部变量，能够用下面的方法

//moduleC.js
import * as module from './moduleA.js';

module.moduleA;//"a"
module.moduleFunc();//"aa"

另外，import加载的文件是不会重复加载的

//moduleD.js
import {moduleA1} from './moduleA.js';
import {moduleA2} from './moduleA.js';

//等同于
import {moduleA1, moduleA2} from './moduleA.js';

moduleA.js只会加载一次。

export default

export default是用来声明模块的默认接口的。

//hello.js
var name = "dahan";
function sayHello(){
    console.log("Hello");
}

export default sayHello;

//person.js
import hello from './hello.js';
hello();
//"Hello"

使用export default声明的接口，引入的时候不须要使用大括号，也不用指定特定的变量名。