脚本宝典收集整理的这篇文章主要介绍了ES6中的模块化,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
历史上,JavaScript一直没有自己模块体系(module),无法将一个大程序拆分成互相依赖的小文件,再用简单的方法拼装起来。 其他语言如java、python等都具备这项功能,唯独Javascript没有,在ES6之前,要想在前端做模块化开发,必须依赖第三方框架来实现,如:requireJS与seaJS。
ES6 的模块自动开启严格模式,不管你有没有在模块头部加上 use strict; 模块中可以导入和导出各种类型的变量,如函数,对象,字符串,数字,布尔值,类等。 每个模块都有自己的上下文,每一个模块内声明的变量都是局部变量,不会污染全局作用域。 每一个模块只加载一次(是单例的), 若再去加载同目录下同文件,直接从内存中读取。
在ES6中每一个模块即是一个文件,在文件中定义的变量,函数,对象在外部是无法获取的。如果你希望外部可以读取模块当中的内容,就必须使用export来对其进行暴露(输出)。 第一种:分别暴露
export let msg = "Hello Module";
export const showMsg = function () {
console.log("你好");
}
第二种:统一暴露(不想暴露模块变量名称可以通过as定义别名)
let message = "Hello Module";
const sayHello = function () {
console.log("Hi !");
}
export { message as msg, sayHello };
第三种:默认暴露(一个模块只能有一个默认导出,导入的名称可以和导出的名称不一致)
let name="张三";
export default {
name
}
除此之外,还可以混合导出
let name = "张三";
export default {
name
}
export const myFun = function () {
console.log("myFun");
}
第一种:通用导入方式
<script type="module">
// 引入 m1.js 模块内容
import * as m1 from "./m1.js";
// 引入 m2.js 模块内容
import * as m2 from "./m2.js";
// 引入 m3.js 模块内容
import * as m3 from "./m3.js";
</script>
第二种:解构赋值形式(有名称重复的话可以是用as定义别名)
<script type="module">
import { msg, showMsg } from './m1.js';
import { msg as hello, sayHello } from './m2.js';
import { default as m3 } from './m3.js';
</script>
第三种:简便形式 (只针对默认暴露)
<script type="module">
import m3 from './m3.js';
</script>
同样支持混合导入
<script type="module">
import m4, { myFun } from './m4.js';
</script>
以上是脚本宝典为你收集整理的ES6中的模块化全部内容,希望文章能够帮你解决ES6中的模块化所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。