前端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);

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！