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

17.ES6 模块export import

概述

在 ES6 前, 实现模块化使用的是 RequireJS 或者 seaJS(分别是基于 AMD 规范的模块化库, 和基于 CMD 规范的模块化库)。
ES6 引入了模块化,其设计思想是在编译时就能确定模块的依赖关系,以及输入和输出的变量。
ES6 的模块化分为导出(export) @与导入(import)两个模块。

特点

ES6 的模块自动开启严格模式,不管你有没有在模块头部加上 use strict;。
模块中可以导入和导出各种类型的变量,如函数,对象,字符串,数字,布尔值,类等。
每个模块都有自己的上下文,每一个模块内声明的变量都是局部变量,不会污染全局作用域。
每一个模块只加载一次(是单例的), 若再去加载同目录下同文件,直接从内存中读取。

基本用法

模块导入导出各种类型的变量,如字符串,数值,函数,类。
导出的函数声明与类声明必须要有名称(export default 命令另外考虑)。
不仅能导出声明还能导出引用(例如函数)。
export 命令可以出现在模块的任何位置,但必需处于模块顶层。
import 命令会提升到整个模块的头部,首先执行。
新建module.js,并定义一些基本属性

let name = "Jack";
let age = 11;
let func = function(){return `姓名:${name},年龄:${age}`
}
let myClass =  class myClass {static a = "呵呵";
}
export {name, age, func, myClass}//导出模块

新建html,并导入,注意 type是module;

<script type="module">import {name, age, func, myClass} from "./module.js";console.log(name);console.log(age);console.log(func());console.log(myClass.a );
</script>

在这里插入图片描述
as 的用法
默认的话,导出的和导入的名称是一样;一般的话也这么干,不过假如要改成名称,搞个别名,我们用as来搞;

//如果想为输入的变量重新取一个名字,import命令要使用as关键字,将输入的变量重命名。
import {name as myName, age as myAge, func as MyFunc, myClass as mC} from "./module.js";
console.log(myName);
console.log(myAge);
console.log(MyFunc());
console.log(mC.a );

export default 命令

在一个文件或模块中,export、import 可以有多个,export default 仅有一个。
export default 中的 default 是对应的导出接口变量。
通过 export 方式导出,在导入时要加{ },export default 则不需要。
export default 向外暴露的成员,可以使用任意变量来接收。
最简单的,到处一个变量:因为导出是单个,花括号省略;

//module.js
let name = "Jack";
export default name

html:导入的地方,花括号也省略;

import name from "./module.js";
console.log(name);

在这里插入图片描述
一般开发,比如vue,导出的是一个组件对象;
新建一个student.js

export default {name:'Jack',age:20,getInfo(){return `姓名:${this.name},年龄:${this.age}`}
}

html:

<script type="module">import student from "./student.js";console.log(student);console.log(student.getInfo())
</script>

在这里插入图片描述
完整代码:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Title</title>
</head>
<body>
<script type="module">// import {name, age, func, myClass} from "./module.js";// console.log(name);// console.log(age);// console.log(func());// console.log(myClass.a );//如果想为输入的变量重新取一个名字,import命令要使用as关键字,将输入的变量重命名。// import {name as myName, age as myAge, func as MyFunc, myClass as mC} from "./module.js";// console.log(myName);// console.log(myAge);// console.log(MyFunc());// console.log(mC.a );// import name from "./module.js";// console.log(name);import student from "./student.js";console.log(student);console.log(student.getInfo())
</script>
</body>
</html>

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

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

微信小程序趋势及前景,大厂直通车!

最近看到群里看到一个女生&#xff0c;讲述了她从开始选择Android&#xff0c;经过非常努力的学习和挣扎&#xff0c;然而最后面对当前的环境却不得不放弃。看完以后真的非常替她感觉惋惜&#xff0c;如果早几年入行可能结果会比现在好很多&#xff0c;但可惜&#xff0c;这就是…...

LAMP源码编译安装(Apache,Mysql,PHP,论坛安装详解)

目录前言一.LAMP概述1.LAMP架构2.LAMP组件的主要作用二.Apache httpd服务编译安装1.关闭防火墙&#xff0c;将安装Apache所需软件包传到/opt目录下2.安装环境依赖包3.配置软件模块4.编译及安装5.优化配置文件路径&#xff0c;并把httpd服务的可执行程序文件放入路径环境变量的目…...

[Jetson][转载]jetson上安装pytorch+torchvision教程

1. Jetpack默认已安装opencv、cuda、cudnn&#xff0c;故只需再安装pytorch即可&#xff0c;留意jetson是arm架构&#xff0c;需要下载对应的安装文件加以安装  2. pytorch的安装   查询Jetpack的版本 sudo -H pip3 install jetson-stats jetson_release   pytorch的whl文…...

sort在不同浏览器下执行效果

sort在不同浏览器下执行效果 let arr [{name: zhangsan, age: 40},{name: lisi, age: 20},{name: laowang, age: 50},{name: xiaoli, age: 60},{name: xiaojin, age: 30}, ] arr.sort((a, b) > b.age > a.age);上面这段代码在谷歌浏览器中&#xff0c;是不会进行排序的…...

设计模式导读助记

各个设计模式的详细介绍都已经完成&#xff0c;但是不经常用总会忘&#xff0c;所以我想用 一句话 总结设计模式&#xff0c;思考模式的真正意图&#xff0c;再用 一点提示 来思考代码如何实现 写在前面 我整理的设计模式这一个系列&#xff0c;主要是结合了以下几本书 : 《设…...

RT-Thrad|STM32F103+ESP8266 S01+RT-Thread联网之环境搭建(1/3)

文章目录前言硬件准备百问网STM32F103ESP8266 01SESP8266 介绍ESP8266 01S技术规格参数软件准备下载安装 Keil μVision5Pack Installer安装 ST-Link 驱动获取RT-Thread源码下载安装 RT-Thread env 工具文章列表 RT-Thrad|STM32F103ESP8266 S01RT-Thread联网之环境搭建(1/3)RT…...

Flask初体验

Flask初体验 flask框架是一个微型框架&#xff0c;但是微型框架不代表功能比其他框架少&#xff0c;并且flask的约束也比较少&#xff0c;使用更加方便。Flask安装 pip install flask 废话不多说直接上代码 from flask import Flaskapp Flask(__name__)app.route("/&qu…...

天眼查怎么删除信息_天眼查删除信息的方法介绍

天眼查信息怎么删除 天眼查风险信息怎么清除 天眼查问答信息怎么删除 天眼查法律诉讼信息可以删吗 天涯查上的信息删除怎么操作&#xff0c;天眼查成立于2014年&#xff0c;至今发展迅速&#xff0c;已经帮助了无数的企业和消费者&#xff0c;那么很多企业的天眼查信息有时候需…...

5.Random

用于生产一个随机数 步骤&#xff1a; 1.导包 import java.util.Random; 2.创建对象 Random random new Random();3.获取随机数 int number random.nextInt(10); //随机数的取值范围是[0,10),即大于等于&#xff0c;小于10 上面不能获取到10&#xff0c;若要获取到10&…...

Xxl-Job调度器原理解析

项目解析源码地址&#xff1a;https://gitee.com/lidishan/xxl-job-code-analysisxxl-job版本&#xff1a;2.3.0Xxl-Job分为执行器、调度器。而我们平时的客户端就属于一个执行器&#xff0c;执行器启动的时候会自动注册到调度器上&#xff0c;然后调度器进行远程调度。调度器初…...

51单片机利用锁存器控制数码管显示年月日时分秒

数码管模块中的两片74hc573&#xff0c;一片锁存段码&#xff0c;一片锁存位码&#xff0c;这样才能驱动8位数码管。74hc573是锁存器&#xff0c;用于数码管显示时通常是采用段选、片选共用同一组并口的驱动方式。 驱动数码管需要两个信号&#xff0c;一个是段选信号&#xff…...

webrtc之SVC实现(十)

一、概念 SVC&#xff08;可适性视频编码或可分级视频编码&#xff09;是传统H.264/MPEG-4 AVC编码的延伸&#xff0c;可提升更大的编码弹性&#xff0c;并具有时间可适性&#xff08;Temporal Scalability&#xff09;、空间可适性&#xff08;Spatial Scalability&#xff09…...

LeetCode 数值的整数次方

实现 pow(x, n) &#xff0c;即计算 x 的 n 次幂函数&#xff08;即&#xff0c;xn&#xff09;。不得使用库函数&#xff0c;同时不需要考虑大数问题。 示例 1&#xff1a; 输入&#xff1a;x 2.00000, n 10 输出&#xff1a;1024.00000 示例 2&#xff1a; 输入&#xf…...

python 继承和多态

在已有类的基础上创建新类&#xff0c;这其中的一种做法就是让一个类从另一个类那里将属性和方法直接继承下来&#xff0c;从而减少重复代码的编写。提供继承信息的我们称之为父类&#xff0c;也叫超类或基类&#xff1b;得到继承信息的我们称之为子类&#xff0c;也叫派生类或…...

JAVA 基础学习之 继承与方法覆写

1 继承引入​​​​​​​ 三个类都有重复的代码&#xff0c;可以把这共同的代码抽出去&#xff0c;抽出去放到另外一个类里面&#xff1b;下面的3个类和上面的类需要发生一点关系&#xff08;继承&#xff09;&#xff0c;上面的类叫做 父类&#xff08;超类&#xff0c;基类&…...

个性化个人主页html5模板

介绍&#xff1a; 个性化个人主页html5模板 网盘下载地址&#xff1a; http://kekewl.net/tARDuX5n02U0 图片&#xff1a;...

java IO教程《三》

缓冲区流讲解(Buffered) 什么是缓冲区&#xff1f; 缓冲流&#xff0c;也叫高效流&#xff0c;是对4个基本的File流的增强&#xff0c;所以也是4个流&#xff0c;按照数据类型分类&#xff1a; 字节缓冲流&#xff1a;BufferedInputStream&#xff0c;BufferedOutputStream字…...

elementUI-Tree 树形控件的使用

elementUI-Tree 树形控件的使用 实现效果&#xff1a; 控件的官方使用说明 控件要求返回的数据结构 {"success": true,"code": 20000,"message": "成功","data": {"items": [{"id": "1394579386…...

实训第一天以及第二天所学记录

实训第一天以及第二天所学记录 浏览器内核 IE&#xff1a;Trident Firefox&#xff1a;Gecko Chrome&#xff1a;Webkit / Blink Safari&#xff1a;Webkit Opera&#xff1a;Presto / Blink 在VScode中使用注释的快捷键 按住键盘的Ctrl/ 元素 &#xff08;标签 标记&…...

跨域请求

/* * Description: 配置文件 */ module.exports { publicPath: "./", devServer: { open: true, proxy: "http://106.15.179.105/api" //跨域路径 }, }; // proxy是代理的意思 // 代理跨域就是在欺骗浏览器 让浏览器认为你访问的还是 同…...

浏览器原理(组成、引擎、渲染机制)

文章目录一、PC端常用浏览器/概念1.2软件项目开发二个不同体系二、浏览器2.1 内核和js引擎2.2 浏览器的组成部分2.3 浏览器如何渲染UI&#xff1f;2.4 浏览器如何解析CSS选择器&#xff1f;2.5 DOM树如何创建&#xff1f;一、PC端常用浏览器/概念 PC端浏览器 &#xff1a;谷歌…...

phpShort v3.2 – PHP短网址平台源码

介绍&#xff1a; phpShort是高级的URL缩短器平台&#xff0c;它使您可以轻松地缩短链接&#xff0c;根据受众群体的位置或平台来定位受众&#xff0c;并为缩短的链接提供分析见解。 提起这个源码&#xff0c;本站还是发布了该作者的一些其他源码&#xff0c;比如phpAnalytics…...

SpringBoot

1、SpringBoot&#xff1a;Hello,World&#xff01; SpringBoot简介 1.1、回顾什么是Spring Spring是一个开源框架&#xff0c;2003 年兴起的一个轻量级的Java 开发框架&#xff0c;作者&#xff1a;Rod Johnson 。 Spring是为了解决企业级应用开发的复杂性而创建的&#xf…...

Spring Cloud Stream 3.1.x版本,弃用@StreamListener而采用函数式编程实现RocketMQ的接入

一、背景描述 自Spring Cloud 2020版本开始&#xff0c;Spring Cloud Stream的版本升级至3.1.0以上版本&#xff0c;目前最新版本为3.1.3。 自此版本开始StreamListener上面就增加Deprecated注解&#xff0c;不赞成使用&#xff0c;有可能接下来的版本会删除掉。下面就介绍下以…...

Java8 HashMap关键源码阅读,以及Java7头插法与Java8尾插法理解。

一&#xff0c;HashMap的底层数据结构 Java8 中HashMap的底层数据结构是数组&#xff0b;链表&#xff0c;当数组长度达到64或者链表长度达到8时&#xff0c;将会把链表转化为红黑树。 1.HashMap的存取原理 put方法 public V put(K key, V value) {return putVal(hash(key), …...

WAN设备:远程路由器/交换机/服务器

WAN环境中可以使用很多不同的网络设备&#xff0c;下面&#xff0c;我们将重点介绍一些常用的WAN设备。 一、WAN交换机。 WAN交换机是用于运营商网络的多端口联网设备。WAN交换机工作于OSI参考模型的数据链路层&#xff0c;能对数据流进行操作&#xff0c;如帧中继、X.25和SM…...

sort在不同浏览器下执行效果

sort在不同浏览器下执行效果 let arr [{name: zhangsan, age: 40},{name: lisi, age: 20},{name: laowang, age: 50},{name: xiaoli, age: 60},{name: xiaojin, age: 30}, ] arr.sort((a, b) > b.age > a.age);上面这段代码在谷歌浏览器中&#xff0c;是不会进行排序的…...

802.11协议精读(一)

入职后用半个月的时间略读过一次《802.11无线网络》&#xff0c;现在打算精读一次&#xff0c;所以&#xff0c;做好笔记。 此前读过的一些章节依然会迅速过掉。 这次依然打算只关注连接、验证的细节&#xff0c;对安全相关不做精读。 希望有特殊的感悟。 Chapter 1-3 文章目录…...

vis.js绘制网络拓扑图,并且鼠标移上去会有显示效果

<!DOCTYPE html> <!-- saved from url(0044)http://kenedict.com/networks/worldcup14/vis/ , thanks Andre!--> <html lang"en"><head><meta http-equiv"content-type" content"text/html; charsetUTF8" /><...

linux任何用户ssh正确密码登陆均报错Permission denied, please try again.处理方法

文章目录说明报错日志内容查看secure日志查看【知道就行】messages日志查看【这里面有记录】处理方法key文件删除修改配置文件中的UsePAM上面步骤过程测试自己可以ssh自己了工具也可以正常连接了别的服务器ssh自己【必看】说明 我的一台虚拟机IP是&#xff1a;192.168.59.133出…...

惯性思维多可怕

一直以来用小米的Mix2手机&#xff0c;也经常用它听音乐。 最近买了荣耀30S&#xff0c;昨晚发现那个铁三角耳机插到华为手机上&#xff0c;竟然没有声音&#xff0c;反复操作都不行。 然后就问客服&#xff0c;查售后地址。下午&#xff0c;来上海三周了第一次开车出门。 6公里…...

转变思考方向,由结果推导原因,找出惯性思维所忽略的地方

标题是本文想阐述的观点&#xff0c;所以有点长。 首先我们来看一个问题&#xff1a; 从前有个农夫&#xff0c;死时留下几头牛&#xff0c;在他的遗书中写道&#xff1a;妻子得全部牛的半数再加上半头&#xff1b;长子得剩下的牛的半数再加半头&#xff0c;正好是妻子的一半…...

做技术的一个惯性思维

技术人员在跟市场人员交流时容易犯的一个毛病就是当场总喜欢从技术实现的角度看待问题。 市场人员可不懂技术&#xff0c;他们往往都是从业务的角度与技术人员沟通&#xff0c;那么技术人员可以也从业务的角度跟市场人员沟通&#xff0c;这样就在一个平面上了&#xff0c;否则…...

技术人请跳出惯性思维

经过10年的技术之路&#xff0c;思维也渐渐的成熟起来&#xff0c;从业以来在技术水平慢慢提升的同时&#xff0c;思维也较之以前有比较大的提升。从一个什么都不懂的小白&#xff0c;成长为可以做一些事情、做一些工作的员工。 文章开头我们先把一个概念说明&#xff0c;无论在…...

不要被惯性思维骗了,AngularJS真的那么完美?

先不说AngularJS优略&#xff0c;至少大部分前端工作者还是对AngularJS有着狂热的推崇的。因为它使开发变得简单。那么问题来了&#xff0c;为什么很多知名网站都没有用到Angular呢&#xff1f; 下面我从几点说起&#xff1a; 1、最糟糕的SEO友好性 这一点无疑是非常致命的&a…...

突破SEO惯性思维

突破SEO惯性思维&#xff1a;主关键词并不是非得放首页针对一个网站实施SEO&#xff0c;其中一个重要的工作就是确定关键词及关键词的分布&#xff0c;通常&#xff0c;我们会将主关键词放置于主页之上&#xff0c;其他次关键词分布于各个分页之中。这本身是无可厚非的&#xf…...

使用enumerate()函数时,惯性思维带来的错误

防止enumerate&#xff08;&#xff09;循环后出错enumerate和for循环当遍历列表时有删除操作时dataframe的索引enumerate和for循环 enumerate和for循环很像&#xff0c;for循环是遍历一个列表里所有的元素&#xff0c;enumerate&#xff08;&#xff09;对于一个可迭代的&…...

思维的惯性

我们经常说要破除思维定势。避免思维惯性。这个想法是非常对的。但事实上是非常难做到的&#xff0c;由于大脑研究发现。人在使用眼睛看东西时。并非把全部的信息都进行处理&#xff0c;仅仅有大约10%的信息是新的&#xff0c;其它的信息都是补全的。人一方面须要这样的信息“抽…...

所有的自卑,可能都源于这个惯性思维

“为什么我再优秀&#xff0c;却还是不自信&#xff1f;” 优不优秀&#xff0c;和自不自卑是两回事 生活中有一定比例的人存在这样的困惑&#xff0c;从各方面看&#xff0c;我似乎已经做的不错了&#xff0c;似乎很优秀了&#xff0c;为什么我还是不那么自信&#xff0c;甚至…...

hdu1010—我的惯性思维

把墙的标记‘X’惯性的写成了‘#’&#xff0c;所以一直调不出来&#xff1b;之后看到是‘X’后&#xff0c;我发现我就是一逗比! 这题剪枝有点多&#xff1a; 一&#xff1a;最少要走的步数>时间&#xff1b; 二&#xff1a;奇偶剪枝——只可能为偶数&#xff1b; 三&a…...

惯性思维的风险点

结果打印false&#xff0c;s和s2是2个不同的对象引用&#xff0c;内存地址不一样&#xff0c;是比较是否为同一内存地址引用因为long用习惯了&#xff0c;所以很多时候写代码不经意间就是用了Long&#xff0c;但是比较是否相等的时候还是习惯性的时候用 这样写大家都能明白是fa…...

Cocoa惯性思维调试一例

大熊猫猪侯佩原创或翻译作品.欢迎转载,转载请注明出处. 如果觉得写的不好请多提意见,如果觉得不错请多多支持点赞.谢谢! hopy ;) 人总有惯性思维,在编程调试里也不例外.你总以为错误是显然的那一个,可是结果却不是. 在stroyboard中建立2个UIView控制器,如果按下第一个控制其中…...

要学会打破惯性思维

今天遇到一道题&#xff0c;编写递归算法&#xff0c;从大到小输出给定二叉排序树中所有关键字不小于x的数据元素。因为之前知道检测一棵二叉树是否为排序二叉树的方法是对它进行中序遍历&#xff0c;而课本默认为先遍历左子树&#xff0c;再遍历根结点&#xff0c;而后遍历右子…...

程序员35岁,是不是惯性思维的结果

马上要35岁了&#xff0c;也马上要重新找工作了。这个时候会发现35岁是个坎。以前听到这样的说辞觉得也没太在意&#xff0c;大概是年纪未到事不关己&#xff0c;就自然忽略了。 现在自己来到这个坎面前&#xff0c;稍微深入的想了一下&#xff0c;觉得35岁的程序员没有错啊&a…...

人的惯性思维

这次AlphaGo以4&#xff1a;1战胜李世石&#xff0c;结果不算意外&#xff0c;几年前&#xff0c;我也觉得围棋被机器干掉距离还很远&#xff0c;理由其实很简单&#xff0c;就是围棋的计算量非常大。持有这种观念的人大有人在&#xff0c;包括赫赫有名的围棋大师聂卫平。持这种…...

惯性思维

今天同事说新税法和老税法不同:汽车等运输工具由五年改成了四年,电脑及软件由五年改成了三年&#xff0c;原来从今年就实行了&#xff0c;新增的固定资产可以适用。貌似我有所耳闻&#xff0c;不过没和实际联系起来&#xff0c;还是在按原来的折&#xff0c;这才恍然大悟。还好…...

跳槽惯性思维正在被打破

作者&#xff1a;赵星随着时间的变化和市场的发展&#xff0c;以及新事物的不断涌现&#xff0c;以往那些关于跳槽的惯性思维正在被不断打破。从"避免转行"到"跨界吃香"现在&#xff0c;跨界成为一个颇为时髦的词语。市场的多元化&#xff64;细分化&#…...

惯性思维的坑

一、问题&#xff1a; 最近做一个项目&#xff0c;其中有一个小功能&#xff0c;页面传递一个文件名&#xff0c;后台查找该文件供前台下载 很简单的一个功能&#xff0c;都不知道写了多少遍&#xff0c;写好测试&#xff0c;无论文件是否存在&#xff0c;总是报错&#xff0c;…...

三角形(惯性思维)

Problem Description给定三条边&#xff0c;请你判断一下能不能组成一个三角形。Input输入数据第一行包含一个数M&#xff0c;接下有M行&#xff0c;每行一个实例&#xff0c;包含三个正数A,B,C。其中A,B,C <1000;Output对于每个测试实例&#xff0c;如果三条边长A,B,C能组成…...

惯性思维有时会影响我们的判断

惯性思维有时会影响我们的判断 当人长时间重复一些动作时就会形成习惯. 比如下班回家, 从下班车到进入家门,基本就是惯性了,不用思考怎么走,不用思考往哪个方向走,不用思考下一步是什么.一切都已经安排好了. 因为不用思考,所以节约了成本. 但是有时惯性又会影响我们的判断 比如…...