ES6的模块化

模块化概述

模块化就是将独立的一个功能封装到一个模块(文件)中,模块和模块之间是相互独立、相互隔离

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

1. ES6中的模块化方式

目录结构
ES6的模块化_第1张图片

  1. 在 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>
  1. 在 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;

ES6的模块化_第2张图片

  1. 在 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);
  1. 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 );
  1. 导出文件中所有的有导出关键字的变量

导入:

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

使用:

console.log(all.height);

你可能感兴趣的:(前端,#,JavaScript知识点)