ECMA6Script学习笔记(六)

news2024/12/26 11:32:02

【摘要】本文是对自己学习ES6的学习笔记回顾,后面是概要:文章深入探讨了ES6模块化处理，强调模块化在提高代码可维护性、可复用性和可扩展性方面的重要性。介绍了ES6模块化的三种导出方式：分别导出、统一导出和默认导出，并通过具体的代码示例展示了如何在module.js和app.js文件中实现这些导出方式。同时，解释了导入时可以使用as关键字进行别名设置，以及如何通过import语句将模块导入到其他文件中。

原创声明:文章首发地址:https://bbs.huaweicloud.com/blogs/431976,本文是由本作者在华为云社区的首发后搬运而来,不存在抄袭.

Es6的模块化处理

1. 模块化介绍

模块化是一种组织和管理前端代码的方式，将代码拆分成小的模块单元，使得代码更易于维护、扩展和复用。它包括了定义、导出、导入以及管理模块的方法和规范。前端模块化的主要优势如下：

提高代码可维护性：通过将代码拆分为小的模块单元，使得代码结构更为清晰，可读性更高，便于开发者阅读和维护。
提高代码可复用性：通过将重复使用的代码变成可复用的模块，减少代码重复率，降低开发成本。
提高代码可扩展性：通过模块化来实现代码的松耦合，便于更改和替换模块，从而方便地扩展功能。

目前，前端模块化有多种规范和实现，包括 CommonJS、AMD 和 ES6 模块化。ES6 模块化是 JavaScript 语言的模块标准，使用 import 和 export 关键字来实现模块的导入和导出。现在，大部分浏览器都已经原生支持 ES6 模块化，因此它成为了最为广泛使用的前端模块化标准. `

ES6模块化的几种暴露和导入方式
1. 分别导出
2. 统一导出
3. 默认导出

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));