Module模块化

　ES6 支持模块化设计，可以使用导入导出的功能。在ES6之前使用的是  <script src="./module.js"></script>  ，将外部文件引入进来，但是这种方法是存在问题的，如果代码量非常庞大，引入文件很多的情况下，多个文件的变量或是函数都会成为全局对象的属性,后引入的会覆盖之前的，所以推荐使用Module模块化。

 

　Module模块有两个关键字：

•   export  用于设置模块的对外接口

•   import  用于导入其他模块提供的功能

 

浏览器环境　

　　　

导出

　　一个模块就是一个独立的文件，模块内部的所有声明都是私有的，即在外部是无法获取使用。如果想要在模块外部能够读取模块内部的某个东西，就必须使用关键字 export 导出。导出的对象可以是变量，函数、类等皆可。

　　　　 export 导出的内容  

 

导出一个变量

export let name="li";

也可以导出函数、类...

// 函数
export function sum(x,y){
    return x+y;
}
// 类
export class c{
    constructor(num){
        this.num=num;
    }
    run(){
        return "num:"+this.num;
    }
}

 

可同时导出多个（统一导出），只用写一个export 关键字,将所有要导出的内容放入 {} 中,

let name="li";
// 函数
function sum(x,y){
    return x+y;
}
// 类
class c{
    constructor(num){
        this.num=num;
    }
    run(){
        return "num:"+this.num;
    }
}

export {name,sum,c};

 

 

导入

　　使用 export 定义模块对外的接口后，其它的页面就可以通过 import 加载这个模块，使用该模块中声明的所有。

　　　 import { 变量名 } from "模块页"; 　   注：导入的变量名与被导出模块的变量名必须一致

import { name, sum, c } from "./module.js";
console.log(name);  //li
console.log(sum(1, 2));  //3
console.log(new c(100).run());  //num:100

支持 * ，将被导出模块中所有对象加载进来

import * as module from "./module.js";
console.log(module.name);  //li
console.log(module.sum(1, 2));  //3
console.log(new module.c(100).run());  //num:100

 

 

export default 

　在导出的时候还可以使用 export default 方式，使用export导出，import 时必须使用花括号 {} 包裹，而使用 export default 方式，则不需 {} 。

//导出
export default name;

//导入
import name from "./module.js";
console.log(name); //li

 

 as 重命名

　一般情况下，导出/导入的变量就是原 js文件中的变量名，但是特殊场合需要的话，也可以对变量名进行重命名，只需使用 as 关键字

//以导入为例
import {name as user} from "./module.js";
console.log(name);
console.log(user);

　　设置 as 重命名后，直接使用更改后的变量名，源名则失效。