模块化详细总结
ECMAScript2015以后,原生js推出了模块化概念,称为ECMAScript Module
,简称ESM
。
现在主流浏览器都有很好的支持
模块化的作用
把复杂的问题分解成相对独立的模块,这样的设计可以
降低程序复杂性
,提高代码的重用
,有利于团队协作开发与后期的维护和扩展
模块化的核心
模块独立的作用域
如何导出模块内部数据
如何导入外部模块数据
独立模块作用域
一个文件就是模块,拥有独立的作用域,且导出的模块默认是处于 严格模式
下,之前的文章有总结,小手点一点去看看严格模式与非严格模式的区别
1、ESM
之前写的博客中关于模块的导入与导出
之前学Nodejs总结的ES6中的模块化
模块的导入和导出与函数的定义和调用类似,在不同的地方有不同的定义与调用规则
导出:使用 export
语句导出模块内部数据
导入:两种模式导入外部模块数据
- 静态导入
静态导入方式不支持延迟加载, import导入语句,放在模块化代码的最顶层
- 动态导入
- 关键字import可以像调用函数一样来动态的导入模块。以这种方式调用,将返回一个promise对象。
- 它不需要依赖 type="module"的script标签。
通过 import()方法导入返回的数据会被包装在一个对象中,即使是default也是这样
//b.js
// 导出b.js文件中的内容
export default "我是b文件中的内容";
//a.js
// 静态导入
// 导入b.js文件中的数据到a.js文件中
import b from './b.js';
console.log(b);
// 动态导入
let b2 = import ("./b.js");
console.log(b2);