ES6模块介绍—module的语法import、export简单介绍及用法

ES6模块语法

模块功能主要由两个命令构成:export和import。export命令用于规定模块的对外接口,import命令用于输入其他模块提供的功能。

一个模块就是一个独立的文件。该文件内部的所有变量,外部无法获取。如果你希望外部能够读取模块内部的某个变量,就必须使用export关键字输出该变量。

export命令

1、输出变量
//a.js文件
export var name = '张帅';
export var age = 18;
export var sex = '男';
var name = '张帅';
var age = 18;
var sex = '男';
var obj = {fullName: '张三',age:20,sex:'男'
}
export {name, age, sex, obj};

推荐使用第二种写法,方便在代码结尾查看所输出变量;

2、输出函数
export function plusHandle (a,b){return a+b;
}
//b.js
function plusHandle(a,b){return a+b;
}
function minusHandle(a,b){return a-b;
}
export{ plusHandle, minusHandle };
3、输出变量重命名
//a.js
var name = '张帅';
function plusHandle(a,b){return a+b;
}
export {name as name2, name as fullName, plusHandleas plus};

as关键字可重命名输出变量的名字,name可以用不同的名字输出两次。

4、错误写法

export命令规定的是对外的接口,必须与模块内部的变量建立一一对应关系

export 1; //正确写法 export var m=1;var m =1; //正确写法var m=1; export {m} export {m as n};
export m;

目前,export 命令能够对外输出的就是三种接口:函数(Functions), 类(Classes),var、let、const 声明的变量(Variables)。

5、实时绑定

export语句输出的接口,与其对应的值是动态绑定关系,即通过该接口,可以取到模块内部实时的值。

export var foo = 'bar';
setTimeout(() => foo = 'baz', 500);

输出变量foo,值为bar,500 毫秒之后变成baz。取到的值也会实时更新为baz;
这一点与 CommonJS 规范完全不同。CommonJS 模块输出的是值的缓存,不存在动态更新;

6、export的位置

export命令可以出现在模块的任何位置,只要处于模块顶层就可以。如果处于块级作用域内,就会报错;import亦然;

//报错语法
function foo() {export default 'bar' // SyntaxError
}
foo()

import命令

使用export命令定义了模块的对外接口以后,其他 JS 文件就可以通过import命令加载这个模块。

import后面的from指定模块文件的位置,可以是相对路径,也可以是绝对路径

1、加载变量及方法
//main.js
//加载变量
import {name, age, sex} from './a.js';//加载方法
import {plusHandle, minusHandle} from './b.js';
2、重命名变量名
import {name as name2} from './a.js';
3、读取变量只读,不可更改

import命令输入的变量都是只读的,因为它的本质是输入接口。也就是说,不允许在加载模块的脚本里面,改写接口。

//报错
import {name} from './a.js'
name = '王军';// Syntax Error : 'name ' is read-only;
//引入变量为对象,则不会报错,这种写法很难查错,建议输入变量仅保持只读
import {obj} from './a.js';
obj.name = '李四';
4、提升效果

import命令具有提升效果,会提升到整个模块的头部,首先执行;

//正常写法
import {plusHandle} from './b.js';
plusHandle();//颠倒写法,先使用,后引入
//不会报错,import会被提升到整个模块头部,首先执行
plusHandle();
import {plusHandle} from './b.js';
5、错误写法
// 报错
import { 'f' + 'oo' } from 'my_module';// 报错
let module = 'my_module';
import { foo } from module;// 报错
if (x === 1) {import { foo } from 'module1';
} else {import { foo } from 'module2';
}

由于import是静态执行,所以不能使用表达式和变量,这些只有在运行时才能得到结果的语法结构。

6、模块的整体加载
//import {plusHandle, minusHandle} from './b.js';//整体加载
import * as b from './b.js';
b.plusHandle(3,5);
b.minusHandle(18,2);

export default命令

export输出时,import输入时需要知道输出的变量名或函数名,否则无法加载;
export default可实现快速加载模块,用户自定义输入名称;

1、匿名函数
// export-default.js
export default function() {console.log('foo');
}

import可为输出函数任意指定名字,需注意,此时import后面无需使用大括号

// import-default.js
import customName from './export-default';
customName(); // 'foo'
2、命名函数
// export-default.js
export default function foo() {console.log('foo');
}// 或者写成function foo() {console.log('foo');
}export default foo;
import foo from './export-default';
foo(); // 'foo'//写法二
import aa from './export-default';
aa(); // 'foo'

本质上,export default就是输出一个叫做default的变量或方法,然后系统允许你为它取任意名字;

// modules.js
function add(x, y) {return x * y;
}
export {add as default};
// 等同于
// export default add;// app.js
import { default as foo } from 'modules';
// 等同于
// import foo from 'modules';
3、错误写法

正是因为export default命令其实只是输出一个叫做default的变量,所以它后面不能跟变量声明语句。

// 正确
export var a = 1;// 正确
var a = 1;
export default a; //等价于 export {a as default}// 错误
export default var a = 1;

上面代码中,export default a的含义是将变量a的值赋给变量default。所以,最后一种写法会报错。

同样地,因为export default命令的本质是将后面的值,赋给default变量,所以可以直接将一个值写在export default之后。

// 正确
export default 42;// 报错
export 42;

常见用法

1、浏览器加载,HTML页面中

浏览器加载 ES6 模块,也使用script标签,但是要加入type="module"属性

//ceshi.js
export const a = 1;
export const b = 2;
export function addHandle(a,b){return a+b;
}
//index.html   引入ceshi.js
<script type="module">import {a,b,addHandle} from './js/ceshi.js'console.log('模块引入变量',a,b);console.log('模块引入函数',addHandle(2,5));
</script>
2、非浏览器中

公共页面常见写法

//a.js;  export default写法
let a=1;
let b=2;
let c = function(a,b){return a+b;
}
function d(a,b){return a-b;
}
export default {a,b,c,d
};//上面写法等价于下面b.js;  export写法
//b.js
export const obj = {a: 1,b: 2,c: function(a,b){return a+b;}d: function(a,b){return a-b;}
}
//公共页面引入
//如uni中在main.js中引入
import a from '@/common/js/a.js'
Vue.prototype.$a = a//赋值到vue里面//写法二引入
import {b} from '@/common/js/b.js';
Vue.prototype.$b= b;//赋值到vue里面
//使用方法
console.log(this.$a.a);
console.log(this.$b.c(5,8));

单个页面按需引入常见写法

//b.js
export const obj={name:'张三',age:18
};
export const a=1;
export const b=2;
export function c(a,b){return a+b;
}
export function d(a,b){return a-b;
}
//单页面中引入,按需引入
import { c, d } from '@/common/js/b.js';
c(1,5);
3、export和export default混合使用
//ceshi.js
export default{a:1,b:2,
}
export function getDate(num){num = num ? num : 0;const currentTime = new Date().getTime() - num * 24 * 60 * 60 * 1000;const date = new Date(currentTime);let year = date.getFullYear();let month = date.getMonth() + 1;let day = date.getDate();month = month > 9 ? month : '0' + month;day = day > 9 ? day : '0' + day;return `${year}-${month}-${day} 00:00:00`;
}
import mod from '@/common/js/api.js'; //mod可任意命名
import {getDate} from '@/common/js/api.js'; //getDate必须与export导出变量名一致
console.log('mod',mod);//mod {a: 1, b: 2}
console.log('getDate',getDate());//getDate 2023-11-06 00:00:00

注:export default一个文件只能出现一个

CommonJS对比

ES6 模块与 CommonJS 模块完全不同。它们有三个重大差异:

  • CommonJS 模块输出的是一个值的拷贝,ES6 模块输出的是值的引用。
  • CommonJS 模块是运行时加载,ES6 模块是编译时输出接口。
  • CommonJS 模块的require()是同步加载模块,ES6 模块的import命令是异步加载,有一个独立的模块依赖的解析阶段。
//CommonJS   a.js
var a=1;
var b = 2;
function sum(a,b){return a+b;
}
module.exports={a: a,b: b,sum: sum
}
//其他页面引入使用
var mod = require('@/common/js/a.js');
console.log(mod.a);//1
console.log(sum(2,5));//7

阮一峰文档参考

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

视频编辑软件Corel VideoStudio 会声会影2024中文剪辑使用教程

会声会影&#xff08;Corel VideoStudio&#xff09;2024为加拿大Corel公司发布的一款功能丰富的视频编辑软件。会声会影2023简单易用&#xff0c;具有史无前例的强大功能&#xff0c;拖放式标题、转场、覆叠和滤镜&#xff0c;色彩分级、动态分屏视频和新增强的遮罩创建器&…

虚拟机没有桥接模式--物理机WiFi不见了--注册表修复

我们知道虚拟机有三种模式&#xff1a; vmnet0 桥接模式&#xff1b;vmnet1 仅主机模式&#xff1b;vmnet8 NAT模式 我自己以前一直用的NAT模式&#xff0c;今天突然要用到桥接模式&#xff0c;发现无法切换... 我下面这个是后面弄好了的&#xff0c;最开始是没有显示桥接模式…

k8s提交spark应用消费kafka数据写入elasticsearch7

一、k8s集群环境 k8s 1.23版本&#xff0c;三个节点&#xff0c;容器运行时使用docker。 spark版本时3.3.3 k8s部署单节点的zookeeper、kafka、elasticsearch7 二、spark源码 https://download.csdn.net/download/TT1024167802/88509398 命令行提交方式 /opt/module/spark…

机器学习之决策树

决策树&#xff1a; 是一种有监督学习方法&#xff0c;从一系列有特征和标签的数据中总结出决策规则&#xff0c;并采用树状图的结构来呈现规则&#xff0c;用来解决分类和回归问题。 节点&#xff1a;根节点&#xff1a;没有进边&#xff0c;有出边。包含最初的&#xff0c;针…

C#把自启动程序添加到注册表中

1.Regedit自启动注册表路径 计算机\HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion\Run 2.获取运行程序路径 SetAutoStart(AppDomain.CurrentDomain.FriendlyName, AppDomain.CurrentDomain.BaseDirectory); 3.添加到注册表中&#xff0c;如果注册表已经存…

Gradle vs Maven

Gradle是一个基于Apache Ant和Apache Maven概念的项目自动化构建工具。它使用一种基于Groovy的特定领域语言(DSL)来声明项目设置&#xff0c;抛弃了基于XML的各种繁琐配置。面向Java应用为主。当前其支持的语言限于Java、Groovy、Kotlin和Scala&#xff0c;计划未来将支持更多的…

联想服务器-HTTP boot安装Linux系统

HTTP boot与传统PXE的主要差异 HTTP不再需要使用UDP协议的tftp服务&#xff08;连接不可靠、不支持大文件&#xff09;了&#xff0c;只需要dhcp 和http 两个服务即可&#xff0c;支持较稳定的大文件传输。 实验环境 ThinkSystem服务器SR650V2 SR660V2 通过HTTP boot安装Cen…

牛客周赛 Round 18

牛客竞赛_ACM/NOI/CSP/CCPC/ICPC算法编程高难度练习赛_牛客竞赛OJ (nowcoder.com) A-游游的整数翻转_牛客周赛 Round 18 (nowcoder.com) 题目描述 游游拿到了一个正整数&#xfffd;x&#xff0c;她希望把这个整数的前&#xfffd;k位进行翻转。你能帮帮她吗&#xff1f; …

【笔试题】位运算

记录一些常见的位运算题&#xff1a; 1、实现对一个8bit数据&#xff08;unsigned char类型&#xff09;的指定位&#xff08;例如第n位&#xff09;置0或者置1操作&#xff0c;并保持其他地位不变。 unsigned char reg;/* 对第n位置0 */ reg &~ (1 << n);/* 对第n位…

mysql根据条件导出表数据(`--where=“文本“`)

本文只讲导出&#xff0c;导入可以参考不同MySQL服务的表以及库的数据迁移&#xff08;/备份&#xff09;-CSDN博客 现在先查下migration_one.table_11里有什么&#xff1a; SELECT * FROM migration_one.table_11;id name ------ -------- 12321 hehe 1321 …

盐值处理:解析与应用(Salt Hashing、Salting)密码哈希(彩虹表)看了还是懵逼!

看了还是懵逼&#xff01;攻击者是在哪儿截获盐值哈希密码的&#xff1f; 文章目录 盐值处理&#xff1a;深度解析与应用1. 盐值处理简介1.1 定义与概述1.2 为什么需要盐值 2. 盐值处理工作原理2.1 创建盐值2.2 应用盐值2.3 存储盐值和哈希密码 3. 盐值处理的优点与缺点3.1 优点…

flutter实现上拉到底部加载更多数据

实现上拉加载数据&#xff0c;效果如下&#xff1a; flutter滚动列表加载数据 使用的库主要是infinite_scroll_pagination , 安装请查看官网 接口用的是https://reqres.in/提供的接口 请求接口用到的库是dio 下面主要是介绍如何使用infinite_scroll_pagination实现上拉加载…

世界土壤数据库(HWSD)土壤数据集

简介&#xff1a; HWSD&#xff08;Harmonized World Soil Database&#xff09;是联合国粮食及农业组织&#xff08;FAO&#xff09;和国际土壤参考与信息中心&#xff08;ISRIC&#xff09;共同开发的世界土壤数据集。该数据集是一份高分辨率&#xff08;1 km&#xff09;&a…

JUC-3-并发锁

一 JAVA 多线程锁介绍 1 悲观锁 定义&#xff1a;悲观锁指对数据被外界修改持保守态度&#xff0c;认为数据很容易就会被其他线程修改&#xff08;很悲观&#xff09;&#xff0c;所以在数据被处理前先对数据进行加锁&#xff0c;并在整个数据处理过程中&#xff0c;使数据处…

linux之信号量的删除

linux之信号量的删除 命令格式&#xff1a;ipcrm [options] [resources] 常用选项&#xff1a; -s&#xff0c;–semaphore-id 按id号删除信号量 -S&#xff0c;–semaphore-key 按键值删除信号量 -a&#xff0c;–all[] 全部删除 -v&#xff0c;–verbose 解释正在进行的操作…

LLM之Prompt(一):5个Prompt高效方法在文心一言3.5的测试对比

在Effective Prompt: 编写高质量Prompt的14个有效方法文中我们了解了14个编写Prompt的方法&#xff08;非常感谢原作者&#xff09;&#xff0c;那么这些Prompt在具体大模型中的效果如何呢&#xff1f;本文以百度文心一言3.5版本大模型在其中5个方法上做个测试对比。 第1条&am…

Android codec2 视频框架 之应用

文章目录 应用流程外部主动获取输入和输出buffer外部设置回调 内部流程 应用流程 外部主动获取输入和输出buffer 解码的调用流程&#xff0c;以android原生的一个bin来说明 android 原生代码位置&#xff1a; frameworks/av/cmds/stagefright/codec.cpp frameworks/av/cmds/st…

Golang区块链钱包

引言 随着区块链技术的发展&#xff0c;数字货币的应用逐渐普及。而区块链钱包作为数字货币的一种必备工具&#xff0c;也变得越来越重要。Golang作为一种简单、高效的编程语言&#xff0c;被广泛运用于区块链领域。本文将介绍Golang区块链钱包的基本概念、特点和使用方法&…

Django系列之Serializer的source参数使用、自定义序列化方法

数据准备 models.py from django.contrib.auth.models import AbstractUser from django.db import modelsclass Publish(models.Model):name models.CharField(max_length32)city models.CharField(max_length8)email models.CharField(max_length32)def __str__(self):r…

【系统集成项目管理工程师】——2.技术

信息与信息化 信息技术核心&#xff1a;信息的传输技术 信息技术三大支柱&#xff1a;传感技术、计算机技术、通信技术 时间敏感网络TSN能够帮助实现信息技术(IT)与运营技术(OT&#xff09;融合&#xff0c;统一的网络能够减少开发部署成本&#xff0c;降低控制器等产品网络配…