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基础语法之模块化的文章就介绍到这了。希望对大家的学习有所帮助,也希望大家多多支持猪先飞。
原文出处:https://www.cnblogs.com/wml-it/p/15967807.html
相关文章
- SeaJS是一个遵循CommonJS规范的JavaScript模块加载框架,可以实现JavaScript的模块化开发及加载机制,本文给大家介绍JavaScript模块化开发之SeaJS,需要的朋友参考下...2015-12-14
- 这篇文章主要介绍了JS前端模块化的几种规范,对前端模块化感兴趣的同学,可以参考下...2021-05-04
- 这篇文章主要介绍了详解ES6实现类的私有变量的几种写法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-02-10
- 这篇文章主要给大家介绍了ES5和ES6中类的区别的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-12-21
- 本章节讨论使用ES6编码风格到代码中需要注意的点。通过记住这些关键点,可以让我们写出更优美的、可读性更强的JavaScript ES6风格的代码。...2021-05-08
- 这篇文章主要介绍了如何通过Proxy实现JSBridge模块化封装,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-10-23
- 这篇文章主要介绍了ES6新特性之变量和字符串用法,结合具体实例形式分析了ES6中变量与字符串的特性、使用方法与相关注意事项,需要的朋友可以参考下...2017-04-03
ES6(ECMAScript 6)新特性之模板字符串用法分析
这篇文章主要介绍了ES6(ECMAScript 6)新特性之模板字符串用法,简单介绍了ES6模板字符串的概念、功能并结合实例形式分析了ES6模板字符串的用法,需要的朋友可以参考下...2017-04-03ES6新特性之类(Class)和继承(Extends)相关概念与用法分析
这篇文章主要介绍了ES6新特性之类(Class)和继承(Extends)相关概念与用法,结合实例形式较为详细的分析了ES6中类(Class)和继承(Extends)的基本概念、语法、使用方法与注意事项,需要的朋友可以参考下...2017-05-27- 这篇文章主要给大家介绍了关于ES6学习教程之Promise用法的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-11-23
- 这篇文章主要介绍了ES6函数实现排它两种写法解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-05-14
- 这篇文章主要给大家介绍了关于es5 类与es6中class区别的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-11-10
- 在ES6属性中新增了两个属性,分别是解构和…运算符,下面这篇文章主要给大家介绍了关于JavaScript ES6解构运算符的理解和运用,文中通过示例代码介绍的非常详细,需要的朋友可以参考下...2021-10-05
- 今天给大家带来的是关于Python的相关知识,文章围绕着python代码模块化展开,文中有非常详细的介绍及代码示例,需要的朋友可以参考下...2021-06-17
- 这篇文章主要介绍了ES6新特性之解构、参数、模块和记号用法,结合实例形式分析了解构、参数、模块和记号的功能、用法及相关使用注意事项,需要的朋友可以参考下...2017-04-03
- 这篇文章主要给大家介绍了关于ES6的循环与可迭代对象的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-01-31
- 在前端模块化的时候,不仅仅是js需要进行模块化管理,html有时候也需要模块化管理。这里就介绍下如何通过requirejs,实现html代码的模块化开发...2016-04-18
- 这篇文章主要介绍了微信小程序 模块化的相关资料,需要的朋友可以参考下...2016-10-20
- 这篇文章主要介绍了ES6新特性之函数的扩展,实例形式较为详细的分析了ES6针对函数参数、运算符及相关新特性的扩展操作与注意事项,需要的朋友可以参考下...2017-04-03
- 这篇文章主要介绍了ES6 Promise对象概念与用法,简单分析了Promise对象的基本状态与三种重要方法,并结合实例形式给出相关使用技巧,需要的朋友可以参考下...2017-04-03