广告

扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >ES6基础语法之模块化介绍
  • 323

0
分享到

ES6基础语法之模块化介绍

2024-04-02 19:04:59 323人浏览 薄情痞子
摘要

es6 引入了模块化， ES6 的模块化分为导出（export） @与导入（import）两个模块。 ES6模块化特点： （1）ES6 的模块自动开启严格模式，不管你有没有在模块头部

es6 引入了模块化， ES6 的模块化分为导出（export） @与导入（import）两个模块。

ES6模块化特点：

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

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

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

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

一、export与import基本使用

export 命令用于导出， import 命令 用于导入：

module1.js

// export let name = "孙悟空";
// export let sex = "男";
//或
let name = "孙悟空";
let sex = "男";
export {name,sex};

test1.js

// import { name,sex } from "../export/module1.js";
// console.log(name); //孙悟空
// console.log(sex);  //男
//或导入部分变量
import { sex } from "../export/module1.js";
console.log(sex);  //男

Demo01.html

<!-- 
    module1.js:模块代码,通过export暴露变量
    test1.js:导入module1.js提供的变量
    Demo01.html:引入test1.js内容
-->
<script type="module" src="import/test1.js"></script>

二、网页中直接import模块

module1.js

// export let name = "孙悟空";
// export let sex = "男";
//或
let name = "孙悟空";
let sex = "男";
export {name,sex};

HTML:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>网页中import模块</title>
	</head>
	<body>
		<h1>姓名:<span id="spanName"></span></h1>
		<h1>性别:<span id="spanSex"></span></h1>
	</body>
</html>
<!-- 
 module1.js:模块代码,通过export暴露变量
 Demo02.html:导入module1.js提供的变量
 -->
<script type="module">
	import {name,sex} from "./export/module1.js";
	document.getElementById("spanName").innerHTML = name;
	document.getElementById("spanSex").innerHTML = sex;
</script>

三、as的使用

（1）as在export中的用法：变量使用别名,隐藏模块内部的变量

module2.js：

let name = "孙悟空";
let sex = "男";
export {name as expName,sex as expSex};

HTML:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>as在export中的用法</title>
	</head>
	<body>
		<h1>姓名:<span id="spanName"></span></h1>
		<h1>性别:<span id="spanSex"></span></h1>
	</body>
</html>
<!-- 
 module2.js:模块代码,通过export暴露变量(变量使用别名,隐藏模块内部的变量)
 Demo03.html:导入module2.js提供的变量
 -->
<script type="module">
	import {expName,expSex} from "./export/module2.js";
	document.getElementById("spanName").innerHTML = expName;
	document.getElementById("spanSex").innerHTML = expSex;
</script>

（2）as在import中的用法：导入多个模块的变量,使用as解决命名冲突。

module1.js

// export let name = "孙悟空";
// export let sex = "男";
//或
let name = "孙悟空";
let sex = "男";
export {name,sex};

module3.js

// export let name = "孙悟空";
// export let sex = "男";
//或
let name = "猪八戒";
let sex = "男";
export {name,sex};

HTML:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>as在import中的用法</title>
	</head>
	<body>
		<h1>姓名:<span id="spanName1"></span></h1>
		<h1>性别:<span id="spanSex1"></span></h1>
		<hr />
		<h1>姓名:<span id="spanName2"></span></h1>
		<h1>性别:<span id="spanSex2"></span></h1>
	</body>	
</html>
<!-- 
 module1.js:模块代码(暴露name,sex)
 module3.js:模块代码(暴露name,sex)
 Demo04.html:导入两个模块的变量,使用as解决命名冲突
 -->
<script type="module">
	import {name as name1,sex as sex1} from "./export/module1.js";
	import {name as name2,sex as sex2} from "./export/module3.js";
	document.getElementById("spanName1").innerHTML = name1;
	document.getElementById("spanSex1").innerHTML = sex1;
	document.getElementById("spanName2").innerHTML = name2;
	document.getElementById("spanSex2").innerHTML = sex2;
</script>

四、导入模块中的函数和类

（1）导入模块中的函数

module4.js

// function Add(...items)
// {
// 	let sum = 0;
// 	for(let item of items)
// 	{
// 		sum += item;
// 	}
// 	return sum;
// }
// export{Add};
//或
export function Add(...items)
{
	let sum = 0;
	for(let item of items)
	{
		sum += item;
	}
	return sum;
};

HTML

<script type="module">
	//导入函数
	import {Add} from './export/module4.js';
	let result = Add(1,2,3,4,5);
	console.log(result); //15
</script>

（2）导入模块中的类：

module4.js

// class Student
// {
// 	constructor(stuno,stuname) 
// 	{
// 		this.stuno = stuno;
// 		this.stuname = stuname;
// 	}
// 	sayHi()
// 	{
// 		console.log("大家好,我是"+this.stuname+",我的学号是"+this.stuno);
// 	}
// }
// export {Student};
//或
export class Student
{
	constructor(stuno,stuname) 
	{
		this.stuno = stuno;
		this.stuname = stuname;
	}
	sayHi()
	{
		console.log("大家好,我是"+this.stuname+",我的学号是"+this.stuno);
	}
}

HTML

<script type="module">
	//导入类
	import {Student} from './export/module4.js';
	let stu = new Student("001","孙悟空");
	stu.sayHi();
</script>

五、import的特点

module5.js

let name = "孙悟空";
let sex = "男";
let emp = {name:"孙悟空",sex:"男"};
export {name,sex,emp};

HTML

<script type="module">
	//只读特点
	//import {name,sex,emp} from './export/module5.js';
	//(1)普通类型的值不能改变
	// name = "猪八戒"; //报错
	// sex = "男";//报错
	//(2)不能直接改变对象
	//emp = {name:"猪八戒",sex:"男"};
	//(3)可以改变变量的属性值
	// emp.name = "猪八戒";
	// emp.sex = "男";
	
	//单例特点
	//(1)下面两句import只会执行一次
	//import {name,sex,emp} from './export/module5.js';
	//import {name,sex,emp} from './export/module5.js';
	//(2)下面两句import相当于 import {name,sex} from './export/module5.js';
	// import {name} from './export/module5.js';
	// import {sex} from './export/module5.js';
	
	//静态特点
	//(1)不支持表达式
	//import {"na"+"me"} from './export/module5.js'; //报错
	//(2)不支持动态导入,以下代码也会报错
	// if(true)
	// 	import {name,sex} from './export/module5.js';
	// else
	// 	import {emp} from './export/module5.js';	
</script>

六、模块的整体import加载

module5.js

let name = "孙悟空";
let sex = "男";
let emp = {name:"孙悟空",sex:"男"};
export {name,sex,emp};

HTML

<script type="module">
	//加载module5中所有暴露出来的内容
	import * as test from './export/module5.js';
	console.log(test.name);
	console.log(test.emp.name);
</script>

七、export default命令

使用import命令的时候，用户需要知道所要加载的变量名或函数名，否则无法加载，export default 向外暴露的

成员，可以使用任意变量来接收，解决上述问题。

export default 命令特点:

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

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

（3）导入导出不需要{}符号。

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

（1）export default导出变量

module6.js

//export default导出变量不需要var

//export var a = 10; // 正确

// 正确
var a = 10;
export default a;

// 错误
//export default var a = 10;

HTML

<script type="module">
	//接受默认变量
	import b from './export/module6.js'; //此处可以用任意变量(b)来接受
	console.log(b);
</script>

（2）export default导出函数

module6.js

function Add(...items)
{
	let sum = 0;
	for(let item of items)
	{
		sum += item;
	}
	return sum;
}
//此处Add不需要{}
export default Add

HTML

<script type="module">
	//接受默认函数
	import sum from './export/module6.js'; //此处可以用任意变量(sum)来接受
	let result = sum(1,2,3,4,5);
	console.log(result);
</script>

八、export与import的复合写法

export 与 import 可以在同一模块使用，我们称为复合使用。

（1）复合使用的基本语法

module1.js

// export let name = "孙悟空";
// export let sex = "男";
//或
let name = "孙悟空";
let sex = "男";
export {name,sex};

module7.js

//复合使用的语法
let emp = {name:"猪八戒",sex:"男"};

export { name, sex } from './module1.js';
// //上面的export等于如下：
// // import { name, sex } from './module1.js';
// // export { name, sex };

export {emp}

HTML

<script type="module">
	//导入module7,在module7中导出module1内容
	import {name,sex,emp} from "./export/module7.js";
	console.log(name);
	console.log(emp.name);
</script>

（2）复合写法实现接口改名

module1.js

// export let name = "孙悟空";
// export let sex = "男";
//或
let name = "孙悟空";
let sex = "男";
export {name,sex};

module7.js

//复合写法实现接口改名
let emp = {name:"猪八戒",sex:"男"};
export { name as myname, sex as mysex } from './module1.js';
export {emp}

HTML

<script type="module">
	//导入改名后的变量
	// import {myname,mysex,emp} from "./export/module7.js";
	// console.log(myname);
	// console.log(emp.name);	
</script>

（3）转换为默认接口

module1.js

// export let name = "孙悟空";
// export let sex = "男";
//或
let name = "孙悟空";
let sex = "男";
export {name,sex};

module7.js

// 转换为默认接口
let emp = {name:"猪八戒",sex:"男"};
export {name as default,sex} from './module1.js';
export {emp}

HTML

<script type="module">
	//导入修改成默认接口的name,使用abc接收
	import abc from "./export/module7.js";
	import {sex,emp} from "./export/module7.js";
	console.log(abc);
	console.log(emp.name);
</script>

（4）默认接口转换为命名接口

module6.js

function Add(...items)
{
	let sum = 0;
	for(let item of items)
	{
		sum += item;
	}
	return sum;
}
//此处Add不需要{}
export default Add

module7.js

//将默认接口转换为命名接口
export {default as sum} from './module6.js';

HTML

<script type="module">
	//导入默认接口转换成的sum接口
	import {sum} from "./export/module7.js";
	let result = sum(1,2,3,4,5);
	console.log(result);
</script>

（5）导出所有接口

module1.js

// export let name = "孙悟空";
// export let sex = "男";
//或
let name = "孙悟空";
let sex = "男";
export {name,sex};

module7.js

//导出所有
export * from './module1.js'

HTML

<script type="module">
	//接收导出的所有接口
	import {name,sex} from "./export/module7.js";
	console.log(name);
	console.log(sex);
</script>

到此这篇关于ES6基础语法之模块化的文章就介绍到这了。希望对大家的学习有所帮助，也希望大家多多支持编程网。

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: ES6基础语法之模块化介绍

本文链接: https://www.lsjlt.com/news/147824.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档
去做题
猜你喜欢
  • ES6基础语法之模块化介绍
    ES6 引入了模块化， ES6 的模块化分为导出（export） @与导入（import）两个模块。 ES6模块化特点： （1）ES6 的模块自动开启严格模式，不管你有没有在模块头部...
    99+
    2022-11-13
  • ES6基础语法之对象介绍
    一、对象和属性和方法 JavaScript中对象： var person={name:"Jack",age:20}; 或： var name = "jack"; var age = ...
    99+
    2022-11-13
  • ES6基础语法之函数介绍
    一、函数参数的扩展 ES6支持参数的默认值： function fn(name,age,sex="男") { console.log(`大家好,我是${name},性别${sex}...
    99+
    2022-11-13
  • ES6基础语法之class类介绍
    一、class基本语法 JavaScript 语言中,编写一个学生类,代码如下：（prototype可以个对象添加属性和方法） function Student(stuno,stun...
    99+
    2022-11-13
  • ES6基础语法之模块化怎么实现
    本篇内容介绍了“ES6基础语法之模块化怎么实现”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！ES6 引入了模块化， ES6 的模块化分为导出...
    99+
    2023-06-30
  • Python学习之基础语法介绍
    目录前言基础语法编码注释行与缩进多行语句import与from…import前言 Python环境的搭建这里就不赘述了，有需要的小伙伴可以在网上搜罗出很多教程，注意安装PyChom编...
    99+
    2022-11-12
  • Python基础语法介绍（3）
    基本概念、特性 顺序存储相同/不同类型的元素 定义：使用（）将元素括起来，元素之间用“，”括开 特性：不可变，不支持添加，修改，删除等操作 查询：通过下标查询元组指定位置的元素 其他 空元组定义：non_tuple = () 只包含一...
    99+
    2023-01-31
    语法 基础 Python
  • Python基础语法介绍（1）
    环境配置 开发平台：Mac OS Version 10.13.2 开发工具安装 Python3.6.5 官网安装网址：https://www.python.org/downloads/ Pycharm 官网安装网址：http://w...
    99+
    2023-01-31
    语法 基础 Python
  • Kotlin 基础语法详细介绍
    Kotlin 基础语法详细介绍基础语法定义包名包名的定义应当在源文件的头部package my.demoimport java.util.*// ......
    99+
    2023-05-31
    kotlin 基础语法
  • ES6基础语法之数组拓展
    一、Array.of() 将参数中所有值作为元素形成数组： console.log(Array.of(1, 2, 3, 4)); // [1, 2, 3, 4] 参数的值可以为不同的...
    99+
    2022-11-13
  • ES6基础语法之字符串扩展
    一、字符串的遍历 JS中遍历字符串： var str = "hello,world"; for(var i = 0;i<str.length;i++) { console.l...
    99+
    2022-11-13
  • ES6基础语法之Map和Set对象
    一、Map对象 Map 对象保存键值对。任何值(对象或者原始值) 都可以作为一个键或一个值。 Map中的键值是有序的。 let myMap = new Map(); myMap.se...
    99+
    2022-11-13
  • ES6基础语法之class类怎么用
    这篇文章主要介绍了ES6基础语法之class类怎么用的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇ES6基础语法之class类怎么用文章都会有所收获，下面我们一起来看看吧。一、class基本语法JavaScri...
    99+
    2023-06-30
  • ES6基础语法之函数怎么使用
    这篇“ES6基础语法之函数怎么使用”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“ES6基础语法之函数怎么使用”文章吧。一、函...
    99+
    2023-06-30
  • JavaScript基础语法与数据类型介绍
    目录一、JavaScript语法1、区分大小写2、标识符3、注释4、变量二、JavaScript的数据类型1、Undefined类型2、Null类型3、Boolean类型4、Numb...
    99+
    2022-11-13
  • ES6基础语法之字符串扩展的方法
    这篇文章主要介绍“ES6基础语法之字符串扩展的方法”，在日常操作中，相信很多人在ES6基础语法之字符串扩展的方法问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”ES6基础语法之字符串扩展的方法”的疑惑有所帮助！...
    99+
    2023-06-30
  • Python3的一些基础语法介绍和理解
    作者：心叶时间：2018-04-23 22:18 此处长期维护一些对帮助快速使用python3的一些基础语法，方便日常算法练习使用。 break 语句可以跳出 for 和 while 的循环体。如果你从 for 或 while 循环中终...
    99+
    2023-01-31
    语法 基础
  • ES6基础语法之Map和Set对象怎么用
    本篇内容主要讲解“ES6基础语法之Map和Set对象怎么用”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“ES6基础语法之Map和Set对象怎么用”吧!一、Map对象Map 对象保存键值对。任何值...
    99+
    2023-06-30
  • Python基础教程之正则表达式基本语法以及re模块
    什么是正则： 正则表达式是可以匹配文本片段的模式。 正则表达式'Python'可以匹配'python' 正则是个很牛逼的东西，python中当然也不会缺少。 所以今天的Python就跟大家一起讨论一下...
    99+
    2022-06-04
    语法 基础教程 模块
  • ES6基础语法之数组的使用实例分析
    这篇文章主要介绍了ES6基础语法之数组的使用实例分析的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇ES6基础语法之数组的使用实例分析文章都会有所收获，下面我们一起来看看吧。一、Array.of()将参数中所有值...
    99+
    2023-06-30
软考高级职称资格查询
软考职称历年真题下载
软考职称资料下载
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作