模块化的规范及规范兼容问题

模块化详细总结

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