前端ES6(6)——模块化

1.什么是模块化

模块化就是把代码进行拆分，方便重复利用。类似 java 中的导包：要使用一个包，必须先导包。而 JS 中没有包的概念，换来的是模块。
模块功能主要由两个命令构成：export和import。

• export命令用于规定模块的对外接口。
• import命令用于导入其他模块提供的功能。

2.export

//export 导出  import导入时名字只能是util
const util = {
     sum(a, b) {
         return a + b;
     }
}

//export 导出  import导入时名字只能是util
export {util}

//`export`不仅可以导出对象，一切JS变量都可以导出。比如：基本类型变量、函数、数组、对象。

2.1.导出简写

//export 导出  import导入时名字只能是util
export const util = {
 sum(a, b) {
        return a + b;
    }
 }

//`export`不仅可以导出对象，一切JS变量都可以导出。比如：基本类型变量、函数、数组、对象。

2.2.导出自定义名字

省略名称
上面的导出代码中，都明确指定了导出的变量名，这样其它人在导入使用时就必须准确写出变量名，否则就会出错。
因此 js 提供了default关键字，可以对导出的变量名进行省略

//export 导出  import导入时可自定义名字
export default {
    sum(a, b) {
        return a + b;
    }
}

2.3.导出变量和方法

var name = "jack"
var age = 21
function add(a,b){
    return a + b;
}

export {name,age,add}

3.import

使用export命令定义了模块的对外接口以后，其他 JS 文件就可以通过import命令加载这个模块

import util from "./hello.js"
import {name,add} from "./user.js"

util .sum(1,2);
console.log(name);
add(1,3);

导入自定义名字

import abc from "./hello.js"
import {name,add} from "./user.js"

abc.sum(1,2);
console.log(name);
add(1,3);