欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

es6中的模块化

程序员文章站 2022-03-08 22:20:28
...

1、模块化

说明:模块化是指将一个很大的程序文件,拆分为许多个小的文件,然后将多个小文件组合起来
(1)模块化的好处:

① 阻止命名冲突; ② 代码复用; ③ 高维护性

(2)ES6 模块化语法:

① export 命令:用于规定模块的对外接口
② import 命令:用于输入其他模块提供的功能

(3)export 暴露方式,3种:

1、第一种暴露方式:分别暴露

	// 1. 分别暴露, m1.js, m1.js
	export let school = 'gc';

	export function teach() {
    	console.log("m1--我们可以教给你很多东西!");
	};

2、第二种暴露方式:统一暴露, m2.js

	// 2. 统一暴露, m2.js
	let school = 'gc';

	function findJob() {
    	console.log("m2---我们可以帮助你找工作!!");
	};

	export {school, findJob};

3、第三种暴露方式:默认暴露, m3.js

	// 3. 默认暴露, m3.js
	export default {
    	school: 'ATLUCA',
    	change: function(){
        	console.log("m3---我们可以改变你!!");
    	}
	}

(4)import 导入方式,3种

1、第一种导入方式:通用的导入方式

	// 1. 通用的导入方式
	// 引入 m1.js 模块内容
	import * as _m1 from "js/m1.js";
	_m1.teach();
	// 引入 m2.js 模块内容
	import * as _m2 from "js/m2.js";
	_m2.findJob();
	console.log(_m2.school);
	// 引入 m3.js
	import * as _m3 from "js/m3.js";
	console.log(_m3);
	_m3.default.change();

2、第二种导入方式:解构赋值形式

	// 2. 解构赋值形式
	// 引入 m1.js 模块内容
	import {school, teach} from "js/m1.js";
	console.log(school);
	// 引入 m2.js 模块内容
	// (1)如果导入的多个文件中,变量名字相同,即会产生命名冲突的问题,
	// (2)为了解决该问题, ES6为提供了重命名的方法。
	// (3)此处的school与m1.js的命名相同,所以此处的school改为gc
	import {school as gc, findJob} from "js/m2.js";
	console.log(findJob);
	// 引入 m3.js 模块内容
	import {default as _m3} from "js/m3.js";
	console.log(_m3);

3、第三种导入方式:简便形式, 只针对于默认暴露

	// 3. 简便形式, 只针对于默认暴露
	import _m3 from "js/m3.js";
	console.log(_m3);
相关标签: ES es6