ES6的模块化

最新推荐文章于 2022-10-10 00:27:30 发布

~嘘~禁止想象~

最新推荐文章于 2022-10-10 00:27:30 发布

阅读量137

点赞数 2

分类专栏：前端 # JavaScript知识点

本文链接：https://blog.csdn.net/weixin_45773503/article/details/112998173

版权

前端同时被 2 个专栏收录

150 篇文章 5 订阅

订阅专栏

JavaScript知识点

36 篇文章 0 订阅

订阅专栏

模块化概述

模块化就是将独立的一个功能封装到一个模块（文件）中，模块和模块之间是相互独立、相互隔离。

模块和模块之间虽然是相互独立的，但一个模块可以通过特定的接口公开自己的内部成员，以便让其它的模块可以使用或者访问自己的内部成员

1. ES6中的模块化方式

目录结构
在这里插入图片描述

在 index.js 中引入三个js文件，并设置 type 属性（将js模块化）

<body>
    <script src="./aaa.js" type="module"></script>
    <script src="bbb.js" type="module"></script>
    <script src="mmm.js" type="module"></script>
</body>

在 aaa.js 中，有两种方式将（变量、函数、类）导出

var flag = true;

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

// 导出方式1，//属性名和属性值一样，可以只写一个（对象增强写法）
export {
    sum,
    flag,
}

// 导出方式2
export var num1 = 1000;
export var height = 1.88;

在这里插入图片描述

在 mmm.js 导入aaa.js 中暴露出的变量

import { flag, sum, num1 } from './aaa.js'

//导入后就可以在mmm.js中使用aaa.js中暴露出的变量了
console.log(flag);
console.log(sum(20, 30));
console.log(num1);

export default 默认导出文件中的某些变量，只能导出一个（important！！！），所以可以自己重新命名

从 aaa.js 导出

const address = '新疆';
const novel = '三体';
export default {
    address,
    novel
}

在 mmm.js 中导入

import abc from './aaa.js' //默认导入

在 mmm.js 中就可以使用了

console.log(abc.address );

导出文件中所有的有导出关键字的变量

导入：

import * as all from './aaa.js';

使用：

console.log(all.height);

~嘘~禁止想象~

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ES6的模块化

模块化概述模块化就是将独立的一个功能封装到一个模块（文件）中，模块和模块之间是相互独立、相互隔离。模块和模块之间虽然是相互独立的，但一个模块可以通过特定的接口公开自己的内部成员，以便让其它的模块可以使用或者访问自己的内部成员1. ES6中的模块化方式目录结构1. 在 index.js 中引入三个js文件，并设置 type 属性（将js模块化）<body> <script src="./aaa.js" type="module"></script&
复制链接

扫一扫