ES6基础入门（六)—— 模块化

最新推荐文章于 2025-06-14 16:11:41 发布

原创最新推荐文章于 2025-06-14 16:11:41 发布 · 133 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ES6

es6 专栏收录该内容

17 篇文章

订阅专栏

本文详细讲解了JavaScript模块化的概念，探讨了ES6中export和import的使用方法，包括基本数据类型和对象类型的导入导出，以及如何一次性引入文件所有模块并进行重命名。同时，介绍了default导出的推荐使用方式。

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

1.模块化的概述

2.export和import的使用

3.export default

//index.html
<script type="module" src="js/index.js"><script/>

//index.js:入口文件，可以使用js文件
import {a,person,Animal} from './export.js'
//导入模块如果是基本数据类型，不能重新赋值
//a = 100;
//导入模块如果是对象类型，可以重新赋值，但是要极其小心，不好查错
person.name = "mmike";
console.log(a)

let ani = new Animal();
console.log(ani);

//2.一次性引入某个文件所有模块，并重新命名
import * as export from "./export.js"
console.log(export.a)
console.log(export.Animal)

//3.推荐使用方式，default只能使用一次
import export from "./export.js";
console.log(export.a);
console.log(export.Animal)

//export.js:提供功能的文件
export let a = 10;
export let person = {name:"nike"}
export function test({console.log('hello')})

export class Animal{};

//3.推荐使用方式，
 let a = 10;
let person = {name:"nike"}
 function test({console.log('hello')})
 class Animal{};
export default{
    a,person,test,Animal
}