JavaScript module导出和导入的介绍(详解)
本篇文章给大家带来的内容是关于JavaScript module导出和导入的介绍(详解),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。
最近看了些Vue框架写的程序,发现自己的前端知识还停留在几年以前,发现现在Javascript程序里有各种各样的对module的导入和到处,导入乍一看跟python的语法挺像的无非就是把from和import这两个关键词的使用颠倒了一下顺序。仔细看下来还是和python挺不一样的import模块的前提是模块有导出,并且还分默认导出和命名导出,有些麻烦。所以今天这篇文章就把所有的export形式和相应的import使用汇总一下。
ES6在语言标准的层面上,实现了模块功能,成为浏览器和服务器通用的模块解决方案,完全可以取代 CommonJS 和 AMD 规范,基本特点如下:
每一个模块只加载一次, 每一个JS只执行一次, 如果下次再去加载同目录下同文件,直接从内存中读取;
每一个模块内声明的变量都是局部变量, 不会污染全局作用域;
模块内部的变量或者函数可以通过export导出;
一个模块可以导入别的模块
2.模块功能主要由两个命令构成:export和import。export命令用于规定模块的对外接口,import命令用于输入其他模块提供的功能;
3.一个模块就是一个独立的文件,该文件内部的所有变量,外部无法获取。如果你希望外部能够读取模块内部的某个变量,就必须使用export关键字输出该变量;
var year = '2018'; var month = 'Febuary'; export {year, month};
export 导出模块
export语法声明用于导出函数、对象、指定文件(或模块)的原始值。 有两种模块导出方式:命名式导出(名称导出)和默认导出(定义式导出),命名式导出每个模块可以有多个,而默认导出每个模块仅一个 。
命名式导出
模块可以通过export前缀关键词声明导出对象,导出对象可以是多个。这些导出对象用名称进行区分,称之为命名式导出
export { func }; // 导出一个已定义的函数func export const foo = Math.sqrt(100); // 导出一个常量
我们可以使用*和from关键字来实现的模块的继承:
export * from 'base_module';
模块导出时,可以指定模块的导出成员。导出成员可以认为是类中的公有成员,而非导出成员可以认为是类中的私有成员:
var name = 'Kevin的居酒屋'; var domain = 'http://coffee.toast.com'; export {name, domain}; // 相当于导出{name:name,domain:domain}
模块导出时,我们可以使用as关键字对导出成员进行重命名,上面的导出可以这样写:
export {name as siteName, domain}
注意一下语法错误:
export 1; var a = 100; export a;
export在导出接口的时候,必须与模块内部的变量具有一一对应的关系。直接导出1没有任何意义,也不可能在import的时候有一个变量与之对应export a
虽然看上去成立,但是a的值是一个数字,根本无法完成解构,因此必须写成export {a}
的形式。即使a被赋值为一个函数,也是不建议使用上面的形式导出的因为大部分风格都建议,模块中最好在末尾用一个export导出所有的接口,就像上面那些例子一样。
默认导出
默认导出也被称做定义式导出。命名式导出可以导出多个值,但在import引用时,也要使用相同的名称来引用相应的值。默认导出只有导出一个单一值,这个输出可以是一个函数、类或其它类型的值,这样在模块import导入时也会更 容易引用。
export default function() {}; // 导出一个函数 export default class(){}; // 导出一个类
默认导出可以理解为另一种形式的命名导出,默认导出可以认为是使用了default名称的命名导出。
下面两种导出方式是等价的:
const D = 123; export default D; export { D as default };
使用名称导出一个模块时:
// "my-module.js" 模块 function cube(x) { return x * x * x; } const foo = Math.PI + Math.SQRT2; export { cube, foo };
在另一个模块(js文件)中,我们可以像下面这样引用:
import { cube, foo } from 'my-module'; console.log(cube(3)); console.log(foo);
使用默认导出一个模块时:
// "my-module.js"模块 export default function (x) { return x * x * x; }
在另一个模块中,我们可以像下面这样引用,相对名称导出来说使用更为简单:
import cube from 'my-module'; console.log(cube(3)); // 27
import导入模块
import语法声明用于从已导出的模块、脚本中导入函数、对象、指定文件(或模块)的原始值。import模块导入与export模块导出功能相对应,也存在两种模块导入方式:命名式导入(名称导入)和默认导入(定义式导入)。
注意事项: import必须放在文件的最开始,且前面不允许有其他逻辑代码,这和其他所有编程语言的导入风格一致。
命名导入
我们可以通过指定名称将导入成员插入到当作用域中。可以导入单个成员或多个成员:
注意,花括号里面的变量与export后面的变量一一对应
import {myMember} from "my-module"; import {foo, bar} from "my-module";
通过*符号,我们可以导入模块中的全部属性和方法。当导入模块全部导出内容时,就是将导出模块(’my-module.js’)所有的导出绑定内容,插入到当前模块(’myModule’)的作用域中:
import * as myModule from "my-module";
默认导入
在模块导出时,可能会存在默认导出。同样的,在导入时可以使用import指令导入这些默认值。直接导入默认值:
import defaultName from "my-module"; import myDefault, {foo, bar} from "my-module"; // 指定成员导入和默认导入
default关键字
// my-module.js export default function() {} // 等效于: function func() {}; export {func as default};
在import的时候,可以这样用:
import a from './my-module'; // 等效于,或者说就是下面这种写法的简写 import {default as a} from './my-module';
这个语法糖的好处就是import的时候,可以省去{}。
简单的说,如果import的时候,你发现某个变量没有花括号括起来(没有*号),那么你在脑海中应该把它还原成有花括号的{default as ...}语法,所以import $,{each,map} from 'jquery';import后面第一个$是{default as $}的替代写法。
以上是JavaScript module导出和导入的介绍(详解)的详细内容。更多信息请关注PHP中文网其他相关文章!

热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

AI Hentai Generator
免费生成ai无尽的。

热门文章

热工具

记事本++7.3.1
好用且免费的代码编辑器

SublimeText3汉化版
中文版,非常好用

禅工作室 13.0.1
功能强大的PHP集成开发环境

Dreamweaver CS6
视觉化网页开发工具

SublimeText3 Mac版
神级代码编辑软件(SublimeText3)

热门话题

如何使用WebSocket和JavaScript实现在线语音识别系统引言:随着科技的不断发展,语音识别技术已经成为了人工智能领域的重要组成部分。而基于WebSocket和JavaScript实现的在线语音识别系统,具备了低延迟、实时性和跨平台的特点,成为了一种被广泛应用的解决方案。本文将介绍如何使用WebSocket和JavaScript来实现在线语音识别系

WebSocket与JavaScript:实现实时监控系统的关键技术引言:随着互联网技术的快速发展,实时监控系统在各个领域中得到了广泛的应用。而实现实时监控的关键技术之一就是WebSocket与JavaScript的结合使用。本文将介绍WebSocket与JavaScript在实时监控系统中的应用,并给出代码示例,详细解释其实现原理。一、WebSocket技

如何利用JavaScript和WebSocket实现实时在线点餐系统介绍:随着互联网的普及和技术的进步,越来越多的餐厅开始提供在线点餐服务。为了实现实时在线点餐系统,我们可以利用JavaScript和WebSocket技术。WebSocket是一种基于TCP协议的全双工通信协议,可以实现客户端与服务器的实时双向通信。在实时在线点餐系统中,当用户选择菜品并下单

如何使用WebSocket和JavaScript实现在线预约系统在当今数字化的时代,越来越多的业务和服务都需要提供在线预约功能。而实现一个高效、实时的在线预约系统是至关重要的。本文将介绍如何使用WebSocket和JavaScript来实现一个在线预约系统,并提供具体的代码示例。一、什么是WebSocketWebSocket是一种在单个TCP连接上进行全双工

JavaScript和WebSocket:打造高效的实时天气预报系统引言:如今,天气预报的准确性对于日常生活以及决策制定具有重要意义。随着技术的发展,我们可以通过实时获取天气数据来提供更准确可靠的天气预报。在本文中,我们将学习如何使用JavaScript和WebSocket技术,来构建一个高效的实时天气预报系统。本文将通过具体的代码示例来展示实现的过程。We

JavaScript教程:如何获取HTTP状态码,需要具体代码示例前言:在Web开发中,经常会涉及到与服务器进行数据交互的场景。在与服务器进行通信时,我们经常需要获取返回的HTTP状态码来判断操作是否成功,根据不同的状态码来进行相应的处理。本篇文章将教你如何使用JavaScript获取HTTP状态码,并提供一些实用的代码示例。使用XMLHttpRequest

用法:在JavaScript中,insertBefore()方法用于在DOM树中插入一个新的节点。这个方法需要两个参数:要插入的新节点和参考节点(即新节点将要被插入的位置的节点)。

JavaScript中的HTTP状态码获取方法简介:在进行前端开发中,我们常常需要处理与后端接口的交互,而HTTP状态码就是其中非常重要的一部分。了解和获取HTTP状态码有助于我们更好地处理接口返回的数据。本文将介绍使用JavaScript获取HTTP状态码的方法,并提供具体代码示例。一、什么是HTTP状态码HTTP状态码是指当浏览器向服务器发起请求时,服务
