文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

ES6模块怎么使用

2023-06-03 16:25

关注

本篇内容主要讲解“ES6模块怎么使用”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“ES6模块怎么使用”吧!

ES6 引入了模块化,其设计思想是在编译时就能确定模块的依赖关系,以及输入和输出的变量。ES6 的模块化分为导出(export) @与导入(import)两个模块。

概述

在 ES6 前, 实现模块化使用的是 RequireJS 或者 seaJS(分别是基于 AMD 规范的模块化库, 和基于 CMD 规范的模块化库)。

ES6 引入了模块化,其设计思想是在编译时就能确定模块的依赖关系,以及输入和输出的变量。

ES6 的模块化分为导出(export) @与导入(import)两个模块。

特点

ES6 的模块自动开启严格模式,不管你有没有在模块头部加上 use strict;。

模块中可以导入和导出各种类型的变量,如函数,对象,字符串,数字,布尔值,类等。

每个模块都有自己的上下文,每一个模块内声明的变量都是局部变量,不会污染全局作用域。

每一个模块只加载一次(是单例的), 若再去加载同目录下同文件,直接从内存中读取。

export 与 import

基本用法

模块导入导出各种类型的变量,如字符串,数值,函数,类。

  1. 导出的函数声明与类声明必须要有名称(export default 命令另外考虑)。

  2. 不仅能导出声明还能导出引用(例如函数)。

  3. export 命令可以出现在模块的任何位置,但必需处于模块顶层。

  4. import 命令会提升到整个模块的头部,首先执行。

let myName = "Tom";let myAge = 20;let myfn = function(){    return "My name is" + myName + "! I'm '" + myAge + "years old."}let myClass =  class myClass {    static a = "yeah!";}export { myName, myAge, myfn, myClass } import { myName, myAge, myfn, myClass } from "./test.js";console.log(myfn());// My name is Tom! I'm 20 years old.console.log(myAge);// 20console.log(myName);// Tomconsole.log(myClass.a );// yeah!

建议使用大括号指定所要输出的一组变量写在文档尾部,明确导出的接口。

函数与类都需要有对应的名称,导出文档尾部也避免了无对应名称。

as 的用法

export 命令导出的接口名称,须和模块内部的变量有一一对应关系。

导入的变量名,须和导出的接口名称相同,即顺序可以不一致。

let myName = "Tom";export { myName as exportName } import { exportName } from "./test.js";console.log(exportName);// Tom使用 as 重新定义导出的接口名称,隐藏模块内部的变量let myName = "Tom";export { myName }let myName = "Jerry";export { myName }import { myName as name1 } from "./test1.js";import { myName as name2 } from "./test2.js";console.log(name1);// Tomconsole.log(name2);// Jerry

不同模块导出接口名称命名重复, 使用 as 重新定义变量名。

import 命令的特点

只读属性:不允许在加载模块的脚本里面,改写接口的引用指向,即可以改写 import 变量类型为对象的属性值,不能改写 import 变量类型为基本类型的值。

import {a} from "./xxx.js"a = {}; // error import {a} from "./xxx.js"a.foo = "hello"; // a = { foo : 'hello' }

单例模式:多次重复执行同一句 import 语句,那么只会执行一次,而不会执行多次。import 同一模块,声明不同接口引用,会声明对应变量,但只执行一次 import 。

import { a } "./xxx.js";import { a } "./xxx.js";// 相当于 import { a } "./xxx.js"; import { a } from "./xxx.js";import { b } from "./xxx.js";// 相当于 import { a, b } from "./xxx.js";

静态执行特性:import 是静态执行,所以不能使用表达式和变量。

import { "f" + "oo" } from "methods";// errorlet module = "methods";import { foo } from module;// errorif (true) {  import { foo } from "method1";} else {  import { foo } from "method2";}// error

export default 命令

  1. 在一个文件或模块中,export、import 可以有多个,export default 仅有一个。

  2. export default 中的 default 是对应的导出接口变量。

  3. 通过 export 方式导出,在导入时要加{ },export default 则不需要。

  4. export default 向外暴露的成员,可以使用任意变量来接收。

var a = "My name is Tom!";export default a; // 仅有一个export default var c = "error"; // error,default 已经是对应的导出变量,不能跟着变量声明语句 import b from "./xxx.js"; // 不需要加{}, 使用任意变量接收

复合使用

注:import() 是提案,这边暂时不延伸讲解。

export 与 import 可以在同一模块使用,使用特点:

  1. 可以将导出接口改名,包括 default。

  2. 复合使用 export 与 import ,也可以导出全部,当前模块导出的接口会覆盖继承导出的。

export { foo, bar } from "methods"; // 约等于下面两段语句,不过上面导入导出方式该模块没有导入 foo 与 barimport { foo, bar } from "methods";export { foo, bar }; // 普通改名export { foo as bar } from "methods";// 将 foo 转导成 defaultexport { foo as default } from "methods";// 将 default 转导成 fooexport { default as foo } from "methods"; 

到此,相信大家对“ES6模块怎么使用”有了更深的了解,不妨来实际操作一番吧!这里是编程网网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯