JavaScript ES6 Module模块详解

编辑: admin 分类: javascript 发布时间: 2021-11-17 来源:互联网
目录
  • 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';

          总结

          本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注hwidc的更多内容！

          更多阅读