ES6模块import、export

最新推荐文章于 2024-08-08 18:47:52 发布

shenroom

最新推荐文章于 2024-08-08 18:47:52 发布

阅读量2.3k

点赞数 2

分类专栏： js/javascript 文章标签： ES6模块化 js模块化

本文链接：https://blog.csdn.net/qq_41772754/article/details/88091918

版权

js/javascript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

js 本身不支持模块化

在ES6之前，js社区制定了一些模块化的规范

Commonjs 规范主要用于服务器端 nodeJs require("url")

AMD 规范客户端。代表性的框架：requireJs,curIJs

CMD规范客户端。代表性框架：seaJs

ES6出来,它统一了服务端和客户端的模块规范

语法统一: import { xxx } aaa

下面看一下ES6模块化的玩法

定义模块-导出-export

模块化，一般都是js文件,用 export 导出文件，语法： export   导出的东西
方式1：export  const A = 123
方式2：export {
A,
AA as BB   // 起别名
       }

方式3：export default 30

┌── module        // 模块文件夹
│   ├── a.js      // 模块文件 a
│   ├── b.js      // 模块文件 b
│   ├── c.js      // 模块文件 c
│   ├── d.js
│
├── index.html    // 主页面

-----------------------------------------------------------------------------------------------
a.js 文件
方法1:单个导出
export const A1 = 1
export const A2 = 11
export const A3 = 111

方法2：对象导出
const A1 = 1
const A2 = 11
const A3 = 111
export{
    A1,
    A2,
    A3
}
-----------------------------------------------------------------------------------------------
b.js 文件
方法3：别名导出（给导出的变量起别名）
const B1 = 2
const B2 = 22
const B3 = 222
export{
    B1 as B,
    B2 as BB,
    B3 as BBB
}
-----------------------------------------------------------------------------------------------
c.js 文件
方法4：对应下面 导入方法4
export default 20     

-----------------------------------------------------------------------------------------------
d.js 文件
方法5：多种格式导出，对应导入方法5，多种格式接受导入
export const D1 = 3
export const D2 = 33
export default 20

使用模块-导入-import

注：导入外部模块，一定要在 script 标签里面使用，并且声明 script type 类型为module

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

一定要服务器环境下运行

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>ES6模块化化</title>
    </head>
    <body>
         <h1>一定要在服务器环境中运行，否则报跨域错误</h1>
    </body>
    </html>
<script type="module">
    方式1：正常导入
    import { A1, A2, A3 } from "./module/a.js"
    import { B, BB, BBB } from "./module/b.js"
    console.log( A1,A2,A3 )  // 1 11 111
    console.log( B,BB,BBB )  // 2 22 222

-----------------------------------------------------------------------------------------
    方式2：别名导入（导出可以起别名，导入同样可以起别名）
    import { A1 as A, A2 as AA, A3 as AAA } from "./module/a.js"
    console.log( A,AA,AAA )  // 1 11 111

-----------------------------------------------------------------------------------------
    方式3：
    import * as mode from "./module/a.js"
    console.log( mode )  // {A1:1, A2:11, A3:111}

-----------------------------------------------------------------------------------------
    方式4：只适用于 export default 方式导出的东西
    import C from "./module/c.js"
    console.log( c)  // 20

-----------------------------------------------------------------------------------------
    方式5：对应 d.js 方式导出的东西
    import d, { D1, D2 } from "./module/d.js"
    console.log( d,D1,D2 )  // 20 3 33

-----------------------------------------------------------------------------------------
    方式6：按需加载，动态引入模块，可以写在if 语句中，路径也可以接受变量
    let path = "./module/a.js";
    import(path).then(res=>{
        console.log( res )  // { A1:1, A2:11, A3:111 }
    })
</script>

import特点：

1.import 可以是相对路径，也可以是绝对路径

2.import 无论引入多少次，模块只会导入一次，且实时更新的（模块数据后续更改了，主页面数据也会自动修改）

3.import "./module/a.js" 相当于把整个文件引入

4.import { A as AA } from "./module/a.js" ---起别名导入

5.import 有提升效果，会自动提到程序最前端首先执行

6.import() 类似 node 里面的 require,可以动态的引入模块，返回的是一个promise对象。可以结合promise 和异步函数使用

注：在ES6模块化中，自动默认就是严格模式 “use strict”，所以写代码的时候要遵循js语法的严格模式