当前位置: 首页 > news >正文

Javascript ES6中export与import指令使用说明

javascript ES6 支持模块化编程,模块是独立的文件js文件,该文件内部的所有的变量与函数都是局限在该模块内部,外部模块无法访问,如果需要在调用的模块之内使用这些符号,模块内部的变量与函数必须设置为输出。符号的输出是通过export关键字来制定的。

一、export

// tools.js//输出变量方式1
export var firstName = 'Michael';
export var lastName = 'Jackson';
export var year = 2021;//输出变量方式2 或者用如下方式输出
var firstName = 'Michael';
var lastName = 'Jackson';
var year = 2021;export {firstName, lastName, year};//除了输出变量,还可以输出函数或类(class)//输出函数
export function mul(x, y) {return x * y;
};//还可以批量输出,同样是要包含在大括号里,也可以用as重命名:
function func1() { ... }
function func2() { ... }
function func3() { ... }export {func1 as f1,func2 as f2,func3 as f3
};

export语句输出的接口,都是和其对应的值是动态绑定的关系,即通过该接口取到的都是模块内部实时的值。export模块可以位于模块中的任何位置,但是必须是在模块顶层,如果在其他作用域内,会报错。

function foo() {export default 'bar' // SyntaxError
}
foo()

二、import

export定义了模块的对外接口后,其它JS文件如果要访问这些接口,必须通过import来加载这个模块并导入符号。

// tools.js
import {firstName, lastName, year} from './tools';function setName(element) {element.textContent = firstName + ' ' + lastName;
}

import命令接受一对大括号,里面指定要从其他模块导入的变量名,必须与被导入模块(tools.js)对外接口的名称相同

如果想重新给导入的变量一个名字,可以用as关键字。

import { lastName as surname } from './tools';

import后的from 可以指定需要导入模块的路径名,可以是绝对路径,也可以是相对路径, .js路径可以省略,如果只有模块名,不带有路径,需要有配置文件指定。

注意,import命令具有提升效果,会提升到整个模块的头部,首先执行。(是在编译阶段执行的)

因为import是静态执行的,不能使用表达式和变量,即在运行时才能拿到结果的语法结构(e.g. if...else...)

三、module的整体加载

除了指定加载某个输出值,还可以用(*)指定一个对象,所有的变量都会加载在这个对象上。

// circle.js。输出两个函数export function area(radius) {return Math.PI * radius * radius;
}export function circumference(radius) {return 2 * Math.PI * radius;
}// main.js 加载在个模块import { area, circumference } from './circle';console.log('圆面积:' + area(4));
console.log('圆周长:' + circumference(14));//上面写法是逐一指定要加载的方法,整体加载的写法如下。
import * as circle from './circle';console.log('圆面积:' + circle.area(4));
console.log('圆周长:' + circle.circumference(14));

 注意,模块整体加载所在的那个对象(上例是circle),应该是可以静态分析的,所以不允许运行时改变。

import * as circle from './circle';// 下面两行都是不允许的
circle.foo = 'hello';
circle.area = function () {};

四、export default

之前的例子中,使用import导入时,都需要知道模块中所要加载的变量名或函数名,用户可能不想阅读源码,只想直接使用接口,就可以用export default命令,为模块指定输出。

// export-default.js
export default function () {console.log('foo');
}

其他模块加载该模块时,import命令可以为该匿名函数指定任意名字。

// import-default.js
import customName from './export-default';
customName(); // 'foo'

export default也可以用于非匿名函数前。

下面比较一下默认输出和正常输出。

// 第一组
export default function crc32() { // 输出// ...
}
//不需要大括号就能导入
import crc32 from 'crc32'; // 输入// 第二组
export function crc32() { // 输出// ...
};
//需要大括号导入符号
import {crc32} from 'crc32'; // 输入

可以看出,使用export default时,import语句不用使用大括号。

五、import()函数

importexport命令只能在模块的顶层,不能在代码块之中。否则会语法报错。这样的设计,可以提高编译器效率,但是没有办法实现运行时加载。因为require是运行时加载,所以import命令没有办法代替require的动态加载功能。所以引入了import()函数,完成动态加载。

import(specifier)

specifier用来指定所要加载的模块的位置。import能接受什么参数,import()可以接受同样的参数。

import()返回一个Promise对象。

const main = document.querySelector('main');import(`./section-modules/${someVariable}.js`).then(module => {module.loadPageInto(main);}).catch(err => {main.textContent = err.message;});

1、import()作用之一:按需加载:

button.addEventListener('click', event => {//import模块在事件监听函数中,只有用户点击了按钮,才会加载这个模块。import('./dialogBox.js').then(dialogBox => {dialogBox.open();}).catch(error => {/* Error handling */})
});

2、import()作用之二:条件加载:

//import()可以放在if...else语句中,实现条件加载。
if (condition) {import('moduleA').then(...);
} else {import('moduleB').then(...);
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.exyb.cn/news/show-35152.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈,一经查实,立即删除!

用 Python 进行游戏开发

1. pgzero python在各个领域都有着丰富的第三方库,pygame是python在游戏领域的应用库,可以用来开发各种不同的游戏。但是对于初学者来说,还是存在一定的门槛。 而今天要和大家分享的pgzero(pygame zero)是在pygame基础上做了进一步的封装,使得设计一款游戏十分的方便,…...

C语言之重定向和文件(更新中)

一、C程序中要包含stdio.h头文件才可以直接使用putchar()、getchar()函数、printf()函数,scanf()函数,它们都是C语言标准I/O包的成员。 二、ANSI C 和后续的C标准都规定输入是缓冲的。缓冲区的大小取决于系统,常见大小512字节和4096字节。 缓…...

开发手札:git日常抽风记录

今天一大早代码提交不上github,各种方法解决不了,虽然最终不知道是否根治解决了,但是起码目前没问题,所以记录一下。 今天来公司三台开发机(两台window、一台macos)全部ssh connect timeout errorcode 22或…...

链表 + 数组模拟链表

链表的指针实现 1.指针 #include<iostream> using namespace std; int main(){int a 5;int *p; // int 型的指针double *q; //double 型的指针p &a;// cout << p 指向 acout << *p << endl; //间接输出 areturn 0; }2.申请动态内存&#xff08…...

第一次动手构建 Linux 内核(未完待续)

目录背景机器参数参考链接操作流程步骤1&#xff1a;下载 Linux 内核源码步骤 2&#xff1a;解压源码步骤 3&#xff1a;下载所需软件包步骤 4&#xff1a;内核配置步骤 5&#xff1a;开始构建&#xff01;未完待续背景 这两天读《UNIX传奇&#xff1a;历史与回忆》这本书&…...

Spring学习:工厂方法创建 Bean

目录通过调用静态工厂方法创建 Bean通过调用实例工厂方法创建 Bean通过调用静态工厂方法创建 Bean 调用静态工厂方法创建 Bean是将对象创建的过程封装到静态方法中。当客户端需要对象时, 只需要简单地调用静态方法, 而不同关心创建对象的细节。 要声明通过静态方法创建的 Bean:…...

运行时数据区-虚拟机栈

文章目录谈谈你对虚拟机栈的理解栈帧什么是栈帧&#xff08;Stack Frame)当前栈帧栈帧的内部结构局部变量表Slot操作数栈Operand Stack动态链接方法返回地址一些附加信息虚方法和非虚方法方法的调用&#xff1a;虚方法表面试题方法中定义的局部变量是否线程安全&#xff1f;运行…...

常见运维问题(打印机、重装系统、IE)

连接打印机与驱动安装 制作U盘系统盘 新系统没有网卡时离线驱动安装 IE浏览器安全级别设置 IP地址的查询 处理操作来源于网络资源&#xff08;尊重原创&#xff09;&#xff1a;原创博客链接...

活动目录备份和灾难恢复之自动备份与授权还原

前言 由于服务器系统状态总在变化&#xff0c;因该增加对系统状态备份的频率&#xff0c;来减少备份对服务器工作环境的影响&#xff0c;所以最好是每天晚上对服务器系统状态进行备份&#xff0c;但是单独使用wbadmin命令无法创建系统状态的自动备份计划&#xff0c;此时可以使…...

TCP“三次挥断”的原因TCP延迟确认机制

在学习wireshark抓包的时候&#xff0c;一般都从最简单的三次握手和四次挥断看起&#xff0c;因为这两步对于每一个完整健康的TCP交互流来说都是必不可少的&#xff0c;通过抓包我们可以更清楚的了解其工作机制。 一、四次挥断和“三次挥断” 1、第一种情况 比如在电脑cmd发…...

2021年Java开发爆款推荐!docker部署tomcat

一.java基础面试知识点 java中和equals和hashCode的区别 int、char、long各占多少字节数 int与integer的区别 探探对java多态的理解 String、StringBuffer、StringBuilder区别 什么是内部类&#xff1f;内部类的作用 抽象类和接口区别 抽象类的意义 抽象类与接口的应用…...

阿里P8大牛亲自讲解!java静态变量和实例变量

Redis主从复制 概念 Redis的主从复制概念和MySQL的主从复制大概类似。一台主机master&#xff0c;一台从机slaver。master主机数据更新后根据配置和策略&#xff0c;自动同步到slaver从机&#xff0c;Master以写为主&#xff0c;Slave以读为主。 主要用途 读写分离&#xff1…...

Angular中NgOnInit和Constructor方法之间的主要区别

参考链接&#xff1a;https://chudovo.com/main-differences-between-ngoninit-and-constructor-methods-in-angular/...

redis中的RDB和AOF

redis提供两种方式进行持久化&#xff0c;一种是RDB持久化&#xff08;原理是将Reids在内存中的数据库记录定时dump到磁盘上的RDB持久化&#xff09;&#xff0c;另外一种是AOF持久化&#xff08;原理是将Reids的操作日志以追加的方式写入文件&#xff09;。那么这两种持久化方…...

弘辽科技:成为拼多多商家要什么要求?收费吗?

现在也有不少人想要入驻拼多多&#xff0c;但是想要成为拼多多的商家也需要满足对应的要求&#xff0c;同时也想要了解成为拼多多商家是否需要收费&#xff0c;我马上就来给各位卖家们介绍。 拼多多商家入驻平台分四种店铺&#xff0c;这里小编介绍一下旗舰店、专营店入驻基本条…...

超11万字整理完k8s的核心组件pod全部功能详解,理论代码超详细,建议跟着做一遍实验【含 label 标签使用】【1】

文章目录说明【必看】第二篇文章标题和链接第二篇文章标题和链接第三篇文章标题和链接创建及删除pod创建一个pod-1的文件夹和命名空间镜像准备【node节点执行】创建pod【虚拟机】方式1&#xff1a;命令行的方式【不建议】默认创建加imagePullPolicy参数创建说明方式2&#xff1…...

品牌应该如何把握抖音电商的红利:深度拆解花西子如何通过抖音电商一年销售1亿+

最近抖音电商正在逐渐起势&#xff0c;前一阵子老赵去参加了抖音的电商大会和千川大会&#xff0c;从这两个会的火爆程度我们就可以看出&#xff0c;越来越多的品牌正在涌向抖音电商平台&#xff0c;并且越来越重视这个平台。抖音电商将是品牌们的新战场&#xff0c;这个平台让…...

你不知道的JS思考题

思考题 1、对比空值和对象的类型 思路&#xff1a; typeof null "object" typeof {} "object"答案 var a null ; (!a && tpeof a object); 补充&#xff1a; 内置类型typeof null "object" 祖传bug undefined "undefined&…...

Layui快速入门(2021.06.15)

第一步&#xff1a;下载layui文件 第二步&#xff1a;新建项目&#xff0c;导入下载的文件夹 第三步&#xff1a;参考文档开发 1.layui入门html <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>la…...

Mysql异常之Communications link failure

前天线上出现数据数据抖动&#xff0c;收到大量异常告警&#xff0c;都要疯了&#xff0c;数据库出现大量异常&#xff0c;肯定第一件事就是看下数据库监控数据&#xff0c;发现有一个从分片执行时间有一个50多秒的操作&#xff0c;这里肯定有问题了&#xff0c;第一时间找了db…...

超11万字整理完k8s的核心组件pod全部功能详解,理论代码超详细,建议跟着做一遍实验【含 label 标签使用】【1】

文章目录说明【必看】第二篇文章标题和链接第二篇文章标题和链接第三篇文章标题和链接创建及删除pod创建一个pod-1的文件夹和命名空间镜像准备【node节点执行】创建pod【虚拟机】方式1&#xff1a;命令行的方式【不建议】默认创建加imagePullPolicy参数创建说明方式2&#xff1…...

国基北盛—云计算私有云iaas(2.4)平台搭建

1.基本环境配置详情&#xff1a; 2.虚拟机配置&#xff1a; Controller&#xff1a; 内存 6G 处理器4个 硬盘&#xff08;sda&#xff09;100G 网卡1&#xff08;仅主机192.168.100.10&#xff09; 网卡2&#xff08;NAT 192.168.200.10&#xff09; Compute&#xff1a; 内…...

zynq操作系统 : Linux下LHB155304测试用例

前言 第一种情况的改进和第三种情况&#xff0c;都可以在应用层来做   比如我们可以设置快速读写模式fastmode&#xff0c;在应用层调用这个函数open时&#xff0c;配置寄存器屏蔽掉其他子地址的中断&#xff0c;直接源头上减少信号量&#xff0c;提升操作系统处理效率&#…...

flink 小技巧记录

一、背景 flink做etl、大宽表、统计过程中有些小细节可以尝试优化&#xff0c;这里简单记录下&#xff1a; 二、场景 2.1 允许延迟的数据同步。比如线上订单库binlog同步到查询库&#xff0c;或者简单处理进入分析库&#xff0c;让分析师直接查询明细. 如果吞吐要求大一点&…...

Zookeeper源码查看: 七. 客户端启动源码

客户端启动源码 查看启动脚本 查看 zkCli.sh, 在 zkCli.sh 启动 Zookeeper 时, 会调用 ZooKeeperMain.java 创建 ZookeeperAdmin 查看启动类 ZookeeperMain 查看 ZookeeperMain 构造方法 查看 connectToZK() 方法 初始化监听器 查看 ZookeeperAdmin 类 解析连接地址…...

关于环境变量定义prompt实现$替换成用户+当前路径提示

set prompt "// ${HOST}:$cwd % " alias cd cd \!* ;set prompt "// ${HOST}:$cwd % "...

jspdf本地运行环境正常,打包后下载的pdf不全

最近开发过程中遇到个问题&#xff0c;用jspdf配合html2canvas把页面元素下载为pdf文件&#xff0c;在本地运行环境好好的&#xff0c;但是打包之后下载的pdf就是不全的&#xff0c;搜了好久也没找出什么对症的解决方案。 现象就是这样&#xff1a; 正常的文件&#xff1a; 有…...

LCD驱动芯片工厂,稳定提供高抗干扰超低功耗芯片2C23适用于水电气表以及工控仪表类驱动IC

容&#xff1a; VK2C23是一个点阵式存储映射的LCD驱动器&#xff0c;可支持最大224点&#xff08;56SEGx4COM&#xff09;或者最大416点&#xff08;52SEGx8COM&#xff09;的LCD屏。单片机可通过I2C接口配置显示参数和读写显示数据&#xff0c;也可通过指令进入省电模式。其高…...

5个实用提速深度学习模型的方法

您是否通过深度学习模型获得了良好的准确性&#xff0c;却发现推理时间不足以部署到生产环境中&#xff1f;您是否对如何优化模型的推理速度迷失了方向&#xff1f;那么这篇文章是给你的。众所周知&#xff0c;数据科学项目有一个奇特的特性&#xff0c;即项目者需要不断转换关…...

易-----

易 本人00后&#xff0c;近期在学子平、八字命理、易经玄学方面&#xff0c;如也是玄学爱好者&#xff0c;可以加联系方式一起讨论、学习&#xff0c;年龄相仿更好。 微信&#xff1a;1783176946 事实上还有两种《易经》&#xff0c;一种叫《连山易》&#xff0c;一种叫《归藏…...

dbc2000 注册机|dbc2000 注册码注册机下载

点击下载来源&#xff1a;dbc2000 注册机 dbc2000 注册机是同名源程序软件的注册机软件&#xff0c;该源程序软件是一款应用于数据库搭建以及数据写入的数据库架设工具&#xff0c;它拥有强大的数据写入功能&#xff0c;在作为应用程序使用时&#xff0c;它不仅可以充当数据属性…...

秋招面经第八弹:网易二面-数据开发工程师

秋招第八弹&#xff1a;网易二面-数据开发工程师 写在最前&#xff1a;秋招以来一直在冲&#xff0c;因为事情比较多&#xff0c;对于笔试面试一直没有复盘&#xff0c;现在靠仅存的记忆把面试的一些问题记录下来&#xff0c;尽可能记录出能回忆到的问题&#xff0c;但可能记的…...

安卓课程格子APP

https://download.csdn.net/download/weixin_57836618/73810452 功能演示&#xff1a; 查看所有课程 点击主页面空白处即可添加课程 添加课程之后查看课程 查看双周课程 查看单周课程 6.查看课程详情...

强化学习——格子世界

强化学习——格子世界 项目源码地址&#xff1a;https://gitee.com/infiniteStars/machine-learning-experiment 1. 实验内容 2. 实验代码 import numpy as np import matplotlib.pyplot as plt from matplotlib.table import Table from xml.dom.minidom import Document #手…...

华为机试 - 跳格子游戏

目录 题目描述 输入描述 输出描述 用例 题目解析 算法源码 题目描述 地上共有N个格子&#xff0c;你需要跳完地上所有的格子&#xff0c;但是格子间是有强依赖关系的&#xff0c;跳完前一个格子后&#xff0c;后续的格子才会被开启&#xff0c;格子间的依赖关系由多组st…...

php 爬课程表信息,Ruby爬取教务系统生成课程表

我为什么要虐自己最近觉得课程格子广告越来越多&#xff0c;乱七八糟的东西越来越多&#xff0c;完全失去了一开始的存在价值&#xff0c;并且没有电脑端app&#xff0c;想查看课程必须拿出手机&#xff0c;而我使用电脑频率要比手机高&#xff0c;所以才有了折腾的动力。于是我…...

android 课程表 ui,UICollectionViewLayout实现课程表布局

因为项目中有课程表的相关模块&#xff0c;第一时间想到用UICollectionView。然而后期的需求越来越复杂&#xff0c;每个格子需要展示的内容越来越多&#xff0c;所以不得不寻找合适的解决方案。最后发现自定义UICollectionViewLayout可以实现我的需求。先放效果图&#xff1a;…...

Android自定义View课程表,Android 自定义View课程表表格

自己闲下来时间写的一个课表控件使用的自定义LinearLayout 里面View都是用代码实现的 最终效果如下图 写的可能有问题希望多多指点创建一个自定义LinearLayout 控件用来装载课程的信息和课程的周数 和节数大概的布局三这样的根据上面的看来觉得总体布局我分了两个 上面的星期是…...

java课程设计设计_java课程设计

1. 团队课程设计博客链接https://www.cnblogs.com/choco1ate/p/12172223.html2.本组课题及本人任务本组课题&#xff1a;泡泡堂(炸弹人)游戏本人任务&#xff1a;Box类(游戏地图中的每个方格)Bomb类(游戏过程中的)游戏玩家输赢信息的文件储存3.需求分析Box类&#xff1a;该类为…...

《课程格子》的一个笔试题目

题目如下&#xff0c;感觉很适合喜欢琢磨的程序员&#xff0c;也是考验你编码风格的时候。 Lets make a tower defense game&#xff08;塔防游戏):1. You have 1 tower, with H health and D dps(damage per second).2. There are n attackers, each with h_i health and d_i …...

Android仿照超级课程表 or 课程格子 一键提取课表功能(方正系统)

参考文章http://blog.csdn.net/sbsujjbcy ,本文仿照‘ 安卓弟 提供的android 项目实战——打造超级课程表一键提取课表功能文章&#xff0c;对他的代码进行了修改和补充&#xff0c;为什么要修改呢&#xff1f;原因是安卓弟的那个源码版本过于老旧&#xff0c;很多方法已经过…...

D3.js绘制树形图

1、什么是D3&#xff1a; data-driven-document,翻译为数据驱动的文档&#xff0c;是一种由数据来决定绘图流程的程序设计模型。简单说&#xff0c;D3是一个JavaScript的函数库&#xff0c;用来做数据可视化(将数据的各种属性和变量以图形图表的形式呈现出来)。 2、D3的优点&am…...

Java树形图

根据树形点击回填子节点信息查询&#xff1a; 根据点击左边树形图的子节点来回填三个信息&#xff0c;分别是区域编号、区域名称、营销经理 这三个黑色的文本框是无法选中的&#xff0c;需要通过点击树形图的子节点来进行回填数据 选中一个子节点信息“现业工商户部”后&#…...

[R语言] 基于R语言实现树形图的绘制

树状图&#xff08;或树形图&#xff09;是一种网络结构。它由一个根节点组成&#xff0c;根节点产生由边或分支连接的多个节点。层次结构的最后一个节点称为叶。本文主要基于R语言实现树形图的绘制。关于python实现树形图的绘制见&#xff1a;基于matplotlib实现树形图的绘制 …...

最小树形图+朱刘算法

大题上完整的朱、刘算法是由四个大步骤组成的&#xff1a; 1、求最短弧集合E 2、判断集合E中有没有有向环&#xff0c;如果有转步骤3&#xff0c;否则转4 3、收缩点&#xff0c;把有向环收缩成一个点&#xff0c;并且对图重新构建&#xff0c;包括边权值的改变和点的处理&am…...

Java实现树形图

实现树形图最主要的就是用到键值对&#xff0c;而java中可以实现键值对的可以用map集合来实现键值对&#xff0c;但是map并不是集合&#xff0c;它只是集合的分类但不是集合。 树形图实现效果 数据库设计 通过键值对来查询数据 封装好类 public class area { private int Ar…...

最小树形图-朱刘算法详解 +例题解析

文章目录最小树形图定义和最小生成树的区别朱刘算法思想步骤流程展示算法实现例题POJ3164_Command_NetworkHDU2121_Ice_cream’s_world_IICF240E_Road_Repairs最小树形图 定义 对于有向图G(V,E)G (V,E)G(V,E)&#xff0c;其中具有如下性质 GGG中不包含有向环。存在一个根结点…...

构建一个简单的树形图

构建一个简单的树形图 开发工具与关键技术&#xff1a;VisualStudio C# 作者&#xff1a;落白 撰写时间&#xff1a;2019/06/27在很多的项目里都需要使用到树形图&#xff0c;而下面要介绍的一个最为简单的树形图&#xff0c;主要的使用步骤可以分为三步。 首先需要拖入必要的…...

树形图

《树形图》 开发工具&#xff1a;VS 2015, SQL Server 相关插件&#xff1a;树形插件 一、数据库 数据库中的父子id要区分好 二、界面 三、代码&#xff1a; 1.控制层代码 public JsonResult LouDongInforTree()// (树形代码){List<Dictionary<string, object>&g…...

[ImportNew]Java中的Timer类和TimerTask类

http://www.importnew.com/9978.html java.util.Timer是一个实用工具类&#xff0c;该类用来调度一个线程&#xff0c;使它可以在将来某一时刻执行。 Java的Timer类可以调度一个任务运行一次&#xff0c;或定期运行。 java.util.TimerTask是一个抽象类&#xff0c;它实现了Runn…...