JS-模块化

ES6从官方标准带来了模块化开发规范。下面主要介绍ES6模块化开发当中最重要的export和import概念。

1.export

在ES6中，一个文件就是一个模块，一个模块内部的所有变量，对于外部来说都是无法获取的，除非使用关键字export对外暴露接口，暴露的各接口通过名字进行区分。如以下实例代码，lib.js模块通过sqrt 、square、diag向外界暴露三个接口。

//--------lib.js-------

/*
暴露三个接口给外界
*/
export const sqrt=Math.sqrt;
export function square(x){
  return x * x ;
}
export function diag(x,y){
  reuturn sqrt(square(x)+square(y))
}

export也可以采用下面的方式暴露接口：
此种方法暴露接口，解构清晰，模块暴露了哪些接口一目了然。

//--------lib.js-------

/*
暴露三个接口给外界
*/
 const sqrt=Math.sqrt;
 function square(x){
  return x * x ;
}
 function diag(x,y){
  reuturn sqrt(square(x)+square(y))
}
export {sqrt、square、diag}

在通常情况下，export暴露的接口就是其本来的名字，不过可以采用as语法进行别名export，这种导出方式可以将一个接口通过n各名字对外暴露。代码如下:

//--------lib.js-------
consg sqrt=Math.sqrt;
export {sqrt as sq1,sqrt as sq2}

2.import

使用export命令对外暴露接口以后，其他JavaScript文件就可以通过import命令加载这个模块（文件）。
在main.js模块中就可以通过import引入上一节中lib.js暴露的接口，代码示例如下：

//--------main.js-------
/*
通过import语法从lib.js模块中导入所需要的接口，注意大阔中的接口名必须在lib.js模块中 通过export关键词导出
*/
import {square,diag} from './lib';
console.log(square(11))
console.log(diag(3,1))