认识ES6中的模块化-导入导出

最新推荐文章于 2024-08-09 11:43:11 发布

Sys_菜菜

最新推荐文章于 2024-08-09 11:43:11 发布

阅读量332

点赞数

分类专栏：学习

本文链接：https://blog.csdn.net/qq_26657121/article/details/106459580

版权

学习专栏收录该内容

25 篇文章 0 订阅

订阅专栏

模块化开发的必要性

在这里插入图片描述比如一个项目由两个人开发，小明在文件aaa.js里边定义了一个很普通的参数var flag=true
小红在开发ccc.js是也定义了 flag 并且赋值为flase,在小明开发了aaa，bbb之后，等到开发mmm的时候，需要用到flag参数，小明并没有改过这个参数，于是他直接在mmm.js里直接调用

//  小明的代码 mmm.js
    if (flag) {
        console.log("mmmmm-");
    }

但是index.html运行之后，控制台没有打出mmm.js文件中console.log的内容，接着他排查代码发现，是小红重新给这个参数赋值了。

对于我们这个代码来说，可能排查很快，真实项目中代码动辄几万几十万行代码，这个时候如果排查代码就很难了，白白增加了很多工作量，而且自己的代码看起来已经很难了，再去读别人代码，简直是地狱。
为了解决这种全局变量同名类似的问题，经过发展提出了模块化的概念。现在前端模块化已经很成熟了。如今常用的模块化规范有以下几种：
CommonJS、AMD、CMD，也有ES6自带的Module

ES6模块化的导入和导出

引用js文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ES6模块</title>
</head>
<body>
    <script src="./export.js" type="module"></script>
    <script src="./import.js" type="module"></script>
</body>
</html>

（自己的理解，不知道对不对）
引入js文件的时候，加上type="module"之后，相当于给该文件的代码申请一块单独的存储空间，代码运行的时候就在它私有的存储空间上跑，别人也访问不了。
那又引出下一个问题，这样单独的存储空间，那怎样别人也能用你定义的参数呢？那就用到了导入导出。

导入导出

直接看下代码，了解下几种导出和导入方式
在这里插入图片描述
// export.js文件

var flag = true;
if (flag) {
    console.log("aaaaa");
}

// 导出方式1
export {
    flag
}

// 导出方式2
export var num = 1000;//


// 导出函数
export function sum(num1, num2) {
    return num1 + num2;
}


// 导出Class，class也可以提前创建好
export class Person{
    constructor(age, name) {
        this.age = age;
        this.name = name;
    }
    weight
    height
    run() {
        console.log("呼吸");
    }
}


// export default 同一模块只能存在一个,可以让导入的文件自定义导入的名称
const addr = "北京市"
export default addr;

// import.js文件

import {flag} from "./export.js"
import {num} from "./export.js"
import {Person} from "./export.js"
import userdefineAddress from "./export.js" //导入default，可以自定义导入参数
import * as aaa from "./export.js" //导入  模块全部导出内容，用aaa.访问
if (flag) {
    console.log("bbbb");
    console.log("num:" + num);
    Person.age = 12;
    console.log("person:" + Person);
    console.log("person,age:" + Person.age);
    console.log("default address: " + userdefineAddress);
}

运行效果图如下：
在这里插入图片描述

Sys_菜菜

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
认识ES6中的模块化-导入导出

模块化开发的必要性比如一个项目由两个人开发，小明在文件aaa.js里边定义了一个很普通的参数var flag=true小红在开发ccc.js是也定义了 flag 并且赋值为flase,在小明开发了aaa，bbb之后，等到开发mmm的时候，需要用到flag参数，小明并没有改过这个参数，于是他直接在mmm.js里直接调用// 小明的代码 mmm.js if (flag) { console.log("mmmmm-"); }但是index.html运行之后，控制台没有打
复制链接

扫一扫

专栏目录