zoukankan      html  css  js  c++  java
  • 模块化 (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()来实现动态加载

      

  • 相关阅读:
    mysql 远程登陆不上
    hdu 5339 Untitled【搜索】
    SqlServer 书目
    passwordauthentication yes
    oracle 11g RAC ocfs2
    Oracle 11g RAC database on ASM, ACFS or OCFS2
    CentOS ips bonding
    Oracle 11g RAC features
    openStack 王者归来之 trivial matters
    openstack windows 2008 img
  • 原文地址:https://www.cnblogs.com/baota/p/12381405.html
Copyright © 2011-2022 走看看