模块化 （ESM） --- day02

ESM： es6 module规范及其实现； -----> web统一的前端规范

　　ES6 模块的设计思想是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量。

      CommonJS 和 AMD 模块，都只能在运行时确定这些东西。

核心：

　　独立作用域的

　　export导出模块内数据     ---> export

　　import引入模块数据       ---> 静态：import  只能放在文件开头     引申：   import()函数动态引入 ，返回 Module 对象

使用：

　　<script  type = "module">

　　　　// 这段代码 当做一个模块使用

　　</script>

　　type = "module" 作用：

　　　　声明这是一个模块

　　　　具有独立的作用域

　　　　使用 严格模式  “use strict”

数据的导出： （es6 module 标准：web环境 和 nodejs环境 ）

　　export var a = 1;     <<===========>>  var a = 1; export { a };

　　export var obj = { a:1 }  <<===========>>  var obj = { a:1 }; export { obj }

　　export var funcName = function(){}   <<===========>> var funcName = function(){}' export { funcName };

　　----------------------------------------------------->  export { 表达式 }

　　导出多个：  export { a, b, c, d}

　　导出接口别名： export { a as s }      s 是 a 的别名

　　导出默认接口： export default    ----->   export default  var a = 1;

数据的引入： 

　　 import   先于模块内的其他模块执行( 会被js引擎静态分析)

　　import variable from “文件路径”

　　es6模块的实现是静态加载，import命令无法替代requrie的动态加载  -----> 提案中 引入了 import()  函数

　　静态加载：  import

　　　　　　　编译时加载

　　　　　　　只能在顶层结构中，否则报错 （编译错误，放在动态语句中报错，如 if语句）

　　　　　　　获取的是模块接口的引用

　　动态加载： import()   ( 解决动态加载的问题)

　　　　　　　运行时加载

　　　　　　　import() 返回一个 Promise 对象

　　　　　　　模块、非模块脚本都可以加载

　　　　　　　导入的是一个 Module 对象, 当做 then 回调的参数

　　　　btn.onclick = async function(){

　　　　　　let cssModule = await  import(“./m1.css”);  // 返回一个promise 对象

　　　　　　let css = cssModule.default;

　　　　}

无关的补充：

　　commonjs规范：一个文件是一个模块，module函数，每个文件都是module的实例；module.exports 数据的导出

　　nodejs 的 require方法 是运行时加载的 

　　import命令无法替代 require的动态加载功能   ---> import()来实现动态加载