行业资讯

es6模块化如何使用

发布时间：2023-02-17 14:13:57 作者：iii
来源：亿速云 阅读：129

本篇内容介绍了“es6模块化如何使用”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

天下苦 CommonJs 久矣

export 和 import

export的基本使用

export const nickname = "moment";
export const address = "广州";
export const age = 18;
const nickname = "moment";
const address = "广州";
const age = 18;

export { nickname, address, age };
export function foo(x, y) {
  return x + y;
}

export const obj = {
  nickname: "moment",
  address: "广州",
  age: 18,
};

// 也可以写成这样的方式
function foo(x, y) {
  return x + y;
}

const obj = {
  nickname: "moment",
  address: "广州",
  age: 18,
};

export { foo, obj };
const address = "广州";
const age = 18;

export { nickname as name, address as where, age as old };
export default "foo";

export default { name: 'moment' }

export default function foo(x,y) {
  return x+y
}

export { bar, foo as default };

export 的错误使用

if(true){
export {...};
}
// 1只是一个值,不是一个接口export 1// moment只是一个值为1的变量const moment = 1export moment// function和class的输出，也必须遵守这样的写法function foo(x, y) {    return x+y
}export foo复制代码

import的基本使用

import {foo,age,nickname} from '模块标识符'

es6模块化如何使用

// foo.js
export default function foo(x, y) {
  return x + y;
}

export const bar = 777;

export const baz = "moment";

// main.js
import { default as foo, bar, baz } from "./foo.js";

import foo, { bar, baz } from "./foo.js";

import foo, * as FOO from "./foo.js";

动态 import

import("./foo.js").then((module) => {  const { default: foo, bar, baz } = module;  console.log(foo); // [Function: foo]
  console.log(bar); // 777
  console.log(baz); // moment});复制代码

使用顶层 await

import("./foo.js").then((module) => {
  const { default: foo, bar, baz } = module;
  console.log(foo); // [Function: foo]
  console.log(bar); // 777
  console.log(baz); // moment
});
const p = new Promise((resolve, reject) => {  resolve(777);
});const result = await p;console.log(result); 
// 777正常输出

import 的错误使用

// 错误
import { 'b' + 'ar' } from './foo.js';

// 错误
let module = './foo.js';
import { bar } from module;

// 错误
if (x === 1) {
  import { bar } from './foo.js';
} else {
  import { foo } from './foo.js';
}

在浏览器中使用 Es Module

<script type="module" src="./main.mjs"></script><script type="module"></script>
  <script type="module">      
  console.log("模块情况下的");
    </script>    
    <script src="./main.js" type="module" defer></script>
    <script>
      console.log("正常 script标签");    
      </script>

es6模块化如何使用

    <script src="./foo.js"></script>    <script src="./foo.js"></script>

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

es6模块化如何使用

模块的默认延迟

es6模块化如何使用

Es Module 和 Commonjs 的区别

  1. CommonJS 模块输出的是一个值的拷贝，Es Module 输出的是值的引用;

  2. CommonJS 模块是运行时加载，Es Module 是编译时输出接口。

  3. CommonJS 模块的 require() 是同步加载模块，ES6 模块的import命令是异步加载，有一个独立的模块依赖的解析阶段。

Es Module 工作原理的相关概念

Module Record

  1. Realm: 创建当前模块的作用域;

  2. Environment:模块的顶层绑定的环境记录,该字段在模块被链接时设置;

  3. Namespace:模块命名空间对象是模块命名空间外来对象，它提供对模块导出绑定的基于运行时属性的访问。模块命名空间对象没有构造函数;

  4. HostDefined:字段保留,以按 host environments 使用，需要将附加信息与模块关联。

Module Environment Record

不可变绑定就是当前的模块引入其他的模块,引入的变量不能修改,这就是模块独特的不可变绑定。

Es Module 的解析流程

  1. 阶段一:构建(Construction),根据地址查找 js 文件,通过网络下载,并且解析模块文件为 Module Record;

  2. 阶段二:实例化(Instantiation),对模块进行实例化,并且分配内存空间,解析模块的导入和导出语句,把模块指向对应的内存地址;

  3. 阶段三:运行(Evaluation),运行代码,计算值,并且将值填充到内存地址中;

Construction 构建阶段

es6模块化如何使用

es6模块化如何使用

ImportEntry Records

  1. ModuleRequest: 一个模块标识符(ModuleSpecifier);

  2. ImportName: 由 ModuleRequest 模块标识符的模块导出所需绑定的名称。值 namespace-object 表示导入请求是针对目标模块的命名空间对象的;

  3. LocalName: 用于从导入模块中从当前模块中访问导入值的变量;

导入声明 (Import Statement From)模块标识符 (ModuleRequest)导入名 (ImportName)本地名 (LocalName)
import React from "react";"react""default""React"
import * as Moment from "react";"react"namespace-obj"Moment"
import {useEffect} from "react";"react""useEffect""useEffect"
import {useEffect as effect } from "react";"react""useEffect""effect"

ExportEntry Records

  1. ExportName: 此模块用于导出时绑定的名称。

es6模块化如何使用

MOdule Map 是由一个 URL 记录和一个字符串组成的key/value的映射对象。URL记录是获取模块的请求URL，字符串指示模块的类型(例如。“javascript”)。模块映射的值要么是模块脚本，null(用于表示失败的获取)，要么是占位符值“fetching(获取中)”。

es6模块化如何使用

linking 链接阶段

es6模块化如何使用

es6模块化如何使用

Evaluation 求值阶段

Es module 是如何解决循环引用的

深度优先搜索算法（英语：Depth-First-Search，DFS）是一种用于遍历或搜索树或图的算法。这个算法会尽可能深地搜索树的分支。当节点v的所在边都己被探寻过，搜索将回溯到发现节点v的那条边的起始节点。这一过程一直进行到已发现从源节点可达的所有节点为止。如果还存在未被发现的节点，则选择其中一个作为源节点并重复以上过程，整个进程反复进行直到所有节点都被访问为止。

es6模块化如何使用

// main.js
import { bar } from "./bar.js";
export const main = "main";
console.log("main");

// foo.js
import { main } from "./main.js";
export const foo = "foo";
console.log("foo");

// bar.js
import { foo } from "./foo.js";
export const bar = "bar";
console.log("bar");

es6模块化如何使用

“es6模块化如何使用”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站，小编将为大家输出更多高质量的实用文章！

推荐阅读：
  1. 67ES6_异常_模块化
  2. es6中模块化的示例分析

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。

es6

上一篇：jquery中的美元符号怎么表示

下一篇：linux ftp端口号有哪些

相关阅读

您好，登录后才能下订单哦！

密码登录
登录注册
获取短信验证码
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》
产品服务
地区划分
帮助支持
关于我们
行业资讯-文章归档 问答-问答归档
广州亿速云计算有限公司

7*24小时在线电话：400-100-2938

7*24小时在线QQ：800811969

Copyright © Yisu Cloud Ltd. All Rights Reserved. 2018 版权所有
粤ICP备17096448号-1 粤公网安备 44010402001142号