ECMA6Script学习笔记(六)
【摘要】 本文是对自己学习ES6的学习笔记回顾,后面是概要:文章深入探讨了ES6模块化处理，强调模块化在提高代码可维护性、可复用性和可扩展性方面的重要性。介绍了ES6模块化的三种导出方式：分别导出、统一导出和默认导出，并通过具体的代码示例展示了如何在module.js和app.js文件中实现这些导出方式。同时，解释了导入时可以使用as关键字进行别名设置，以及如何通过import语句将模块导入到其他文件中。
Es6的模块化处理
1. 模块化介绍
模块化是一种组织和管理前端代码的方式，将代码拆分成小的模块单元，使得代码更易于维护、扩展和复用。它包括了定义、导出、导入以及管理模块的方法和规范。前端模块化的主要优势如下：
- 提高代码可维护性：通过将代码拆分为小的模块单元，使得代码结构更为清晰，可读性更高，便于开发者阅读和维护。
- 提高代码可复用性：通过将重复使用的代码变成可复用的模块，减少代码重复率，降低开发成本。
- 提高代码可扩展性：通过模块化来实现代码的松耦合，便于更改和替换模块，从而方便地扩展功能。
目前，前端模块化有多种规范和实现，包括 CommonJS、AMD 和 ES6 模块化。ES6 模块化是 JavaScript 语言的模块标准，使用 import 和 export 关键字来实现模块的导入和导出。现在，大部分浏览器都已经原生支持 ES6 模块化，因此它成为了最为广泛使用的前端模块化标准. `
- ES6模块化的几种暴露和导入方式
- 分别导出
- 统一导出
- 默认导出
ES6中无论以何种方式导出,导出的都是一个对象,导出的内容都可以理解为是向这个对象中添加属性或者方法
2. 分别导出
下面的所有展示如何进行导出文件都是通过module.js文件,app.js文件,以及index.html文件进行的,其中module.js文件是用来定义属性和方法,而app.js是通过调用导出的moudule.js文件中的属性和方法的
导出调用的方式和python的模块基本类似
2.1方式一:分别导出
- module.js 向外分别暴露成员
// 在js文件定义一些变量方法和类以及类的属性和方法
//变量
// 模块想对外导出,需要添加export关键字
export const PI = 3.14
const PI2 = 3.14
//方法
export function sum(a,b){
return a+b;
}
//类
export class Person{
constructor(name,age){
this.name = name;
this.age = age;
}
sayHello(){
console.log(`Hello,my name is ${this.name},I'am ${this.age} years old`)
}
}
app.js文件
//导入module.js文件
/*
*代表module.js的所有成员
无论何种方式导入,导入的内容都会被当成一个对象处理
使用一个对象来接收所有的成员
m1代表所有导入成员所属的对象
*/
import * as m1 from './module.js'
//调用导入的属性
console.log(m1.PI);
//没有导出(暴露)因此无法使用
console.log(m1.PI2);
//调用导入的方法
console.log(m1.sum(10,20));
//调用导入的对象
let person = new m1.Person("李四",18);
person.sayHello();
index.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 引入app.js文件 -->
<!-- 默认不支持js文件中导入其他js文件,需要告诉浏览器开启module -->
<script src="./app.js" type="module"></script>
</head>
<body>
</body>
</html>
2.2方式二:统一导出
module.js
const PI = 3.14
const PI2 = 3.14
//方法
function sum(a,b){
return a+b;
}
//类
class Person{
constructor(name,age){
this.name = name;
this.age = age;
}
sayHello(){
console.log(`Hello,my name is ${this.name},I'am ${this.age} years old`)
}
}
//文件底部加上,想导出什么写什么
export{PI,PI2,sum,Person};
app.js
引入时可以使用as起别名,和mysql以及python的语法类似
import {PI as pi,PI2,sum,Person} from './module.js'
//可以直接写引入的属性,方法,以及对象
//调用导入的属性
// console.log(PI);
//使用起的别名,原名称无法使用
console.log(pi);
//没有导出(暴露)因此无法使用
console.log(PI2);
//调用导入的方法
console.log(sum(10,20));
//调用导入的对象
let person = new Person("李四",18);
person.sayHello();
2.3方式三:默认导出
module.js
const PI = 3.14
const PI2 = 3.14
//方法
function sum(a,b){
return a+b;
}
//类
class Person{
constructor(name,age){
this.name = name;
this.age = age;
}
sayHello(){
console.log(`Hello,my name is ${this.name},I'am ${this.age} years old`)
}
}
// 默认导出在一个js文件中只能有一个
export default sum;
// export default sum; 不能写第二个
app.js
//方式一
import * as m1 from './module.js';
//想要使用需要加default关键字
console.log(m1.default(10,20));
//方式二
import {default as add} from './module.js';
//简化语法
import add from './module.js';
console.log(add(10,20));
【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）