JavaScript ES6 Module模块详解

2022-04-15 0 1,152
目录
  • 0.什么是Module
  • 1.Module 的加载
    • 1.1 方式一
    • 1.2 方式二
  • 2.导出和导入
    • 2.1 一个模块的导出可以被其它模块导入,并访问。
    • 2.2 没有导出,也可以将其导入
    • 2.3 被导入的代码都会执行一遍,也仅会执行一遍
  • 3.export default 和对应的 import
    • 4.export 和对应的 import
      • 5.Module 的注意事项
        • 总结

          0.什么是Module

          历史上,JavaScript 一直没有模块(module)体系,无法将一个大程序拆分成互相依赖的小文件,再用简单的方法拼装起来。其他语言都有这项功能,比如 Ruby 的require、Python 的import,甚至就连 CSS 都有@import,但是 JavaScript 任何这方面的支持都没有,这对开发大型的、复杂的项目形成了巨大障碍。

          在 ES6 之前,社区制定了一些模块加载方案,最主要的有 CommonJS 和 AMD 两种。ES6 模块的设计思想是尽量的静态化,使得编译时就能确定模块的依赖关系,以及输入和输出的变量。ES6 模块不是对象,而是通过export命令显式指定输出的代码,再通过import命令输入。

          模块系统主要解决的问题:

          • 模块化的问题
          • 消除全局变量
          • 管理加载顺序

          1.Module 的加载

          使用 < script >标签加载模块时需要添加 type=“module”。

          1.1 方式一

          <script type="module">
              import module from "./module.js";
          </script>
          

          1.2 方式二

          <script src="./module.js" type="module"></script>
          

          2.导出和导入

          2.1 一个模块的导出可以被其它模块导入,并访问。

          例1:使用About.js调用Base.js内的Base对象,并在首页打印。

          index.html

          <script type="module">
              import About from "./js/About.js";
              console.log(About);
          </script>
          

          Base.js

          const Base = {
              nick: 'admin',
              age: 19
          }
          export default Base;
          

          About.js

          import Base from '../js/Base.js';
          const src = `nick:${Base.nick},age:${Base.age}.`;
          export default src;
          

          输出结果:

          nick:admin,age:19.

          2.2 没有导出,也可以将其导入

          例2:About.js不导出,在首页将其导入。

          index.html

          <script type="module">
              import "./js/About.js";
          </script>
          

          About.js

          const src = 'Hello World!';
          console.log(src);
          

          输出结果:

          Hello World!

          2.3 被导入的代码都会执行一遍,也仅会执行一遍

          例3:导入3次About.js,观察导出结果。

          index.html

          <script type="module">
              import "./js/About.js";
              import "./js/About.js";
              import "./js/About.js";
          </script>
          

          About.js

          const src = 'Hello World!';
          console.log(src);
          

          输出结果:

          Hello World!
          

          3.export default 和对应的 import

          export default 用于导出一个默认值,一个模块只能有一个。

          使用 export default 进行导出时,import 的名字可以随意起。

          例4:使用 export default 进行导出,import 的名字随意起。

          index.html

          <script type="module">
              import bbb from "./js/About.js";
              console.log(bbb);
          </script>
          

          About.js

          const src = 'Hello World!';
          export default src;
          

          输出结果:

          Hello World!

          4.export 和对应的 import

          使用 export 进行导出时,import 的名字不能随意起。

          例5:使用 export 进行导出。

          index.html

          <script type="module">
              import { age, nick } from "./js/About.js";
              console.log(nick, age);
          </script>
          

          About.js

          const age = 18;
          export {age};
          // export age; ×
          // export const age = 18; √
          export const nick = 'admin';
          

          输出结果:

          admin 18

          5.Module 的注意事项

          1.模块中,顶层的 this 指向 undefined;

          2import 具有提升效果,会提升到整个模块的头部,率先执行;

          3.import 执行的时候,代码还没执行;

          4.import 和 export 只能在模块的顶层,不能在代码块中执行;

          5.import() 可以按条件导入;

          6.复合写法导出的,无法在当前模块中使用

          复合写法,导入后导出:

          export About from './js/About.js';
          

          总结

          本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注NICE源码的更多内容!

          免责声明:
          1、本网站所有发布的源码、软件和资料均为收集各大资源网站整理而来;仅限用于学习和研究目的,您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。 不得使用于非法商业用途,不得违反国家法律。否则后果自负!

          2、本站信息来自网络,版权争议与本站无关。一切关于该资源商业行为与www.niceym.com无关。
          如果您喜欢该程序,请支持正版源码、软件,购买注册,得到更好的正版服务。
          如有侵犯你版权的,请邮件与我们联系处理(邮箱:skknet@qq.com),本站将立即改正。

          NICE源码网 JavaScript JavaScript ES6 Module模块详解 https://www.niceym.com/18393.html