ES6 模块化

本文深入探讨了ES6模块化的基本概念,包括模块化的优点、基本语法、导出与导入的多种方式,以及如何在浏览器中加载ES6模块。通过具体示例,详细解释了export与import的使用方法,以及如何避免命名冲突,实现代码复用。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1.模块化

将一个大的程序文件拆分成许多小的文件,然后再将小的文件组合起来。

2.模块化的好处
  1. 防止命名冲突
  2. 实现代码复用
  3. 高维护性
3.ES6模块化语法
	模块化功能主要由2个命令构成 export和import
    export命令用于规定模块的对外接口
    import命令用于输入其他模块提供的功能

export和import的一个重要限制是他们必须在其他语句和函数之外使用。只能在模块顶部使用export。

4.导出的基本语法(export)
</script>
// example.js
    export var color = 'red';
    export let name = 'galaxy';
    export const myNumber = 7;
    // 导出函数
    export function sum(num1,num2){
      return num1+num2;
    }
    // 导出类
    export class Rectange{
      constructor(length,width){
        this.length = length;
        this.width = width;
      }
    }
</script>
5.导入的基本语法(import)
1.导入单个绑定
	import {sum} from "./example.js"
	console.log(sum(1,2));
2.导入多个绑定
	import {sum,myNumber} from "./example.js"
	console.log(sum(1,myNumber));
3.导入整个模块
	import * as example from './example.js'
	console.log(example.sum(1,example.myNumber))

在这段代码中,从example.js中导出的所有绑定都被加载到一个被称作example的对象身上,指定的导出会作为example的属性被访问。

如果多次重复执行同一句import语句,那么只会执行一次,而不会执行多次。

	import { foo } from 'my_module';
	import { bar } from 'my_module';
	
	// 等同于
	import { foo, bar } from 'my_module';

然foo和bar在两个语句中加载,但是它们对应的是同一个my_module实例
当从模块中导入一个绑定的时候,就像使用const定义一样,结果是无法定义一个同名变量,也无法在import语句之前使用标识符或改变绑定的值。

6.导入和导出式重命名

导出时重命名

    function sum(num1,num2){
      return num1+num2;
    }
    export {sum as add}

函数sum()时本地名称,add()是导出时使用的名称,即在另外一个模块要导入这个函数的时候,必须使用add这个名称。
导入时重命名

	//将add重新命名为sum
    import {add as sum} from "./example.js"
7.模块的默认值
1.导出默认值

由于函数被模块所代表,因此不需要名称。

    export default function(num1,num2){
      return num1+num2;
    }

也可以在先定义函数,再将其导出为默认值

    function sum(num1,num2){
      return num1+num2;
    }
    export default sum;
2.导入默认值
    import sum from "./example.js"

这里将模块导出的任何默认函数用sum来表示。

    export var color = 'red';
    export default function(num1,num2){
      return num1+num2;
    }

用逗号将默认和用{}包裹的非默认值分隔开,在import语句中import默认值必须排在非默认值前面。

    import sum,{color} from "./example.js"

导出默认值时重命名

    import {default as sum,color} from "./example.js"
8.export 与 import 的复合写法
    import {sum} from "./example.js"
    export {sum}

等同于

	export {sum} from "./example.js"
9.浏览器的模块加载

浏览器使用 ES6 模块的语法如下。

<script type="module" src=""></script>

type属性设为module,所以浏览器知道这是一个 ES6 模块。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值