ES6模块化用法全解析

举报
北极光之夜。 发表于 2021/09/21 15:53:56 2021/09/21
【摘要】 以前浏览器常用的模块化规范有 AMD（代表Require.js）和 CMD（代表Sea.js），但是都落伍了。服务端有 CommonJS规范。不过也不是标准的。最终ES6官方提出了大一统的模块化规范，这也是目前浏览器与服务端的通用规范。

一.模块化前世今生：

  1.模块化就是把单独的一个功能封装到一一个模块(文件)中,模块之间相互隔离,但是可以通过特定的接口公开内部成员,也可以依赖别的模块。模块化开发的好处是方便代码的重用，从而提升开发效率，期方便后期的维护。
  2.以前浏览器常用的模块化规范有 AMD（代表Require.js）和 CMD（代表Sea.js），但是都落伍了。服务端有 CommonJS规范。不过也不是标准的。最终ES6官方提出了大一统的模块化规范，这也是目前浏览器与服务端的通用规范。
  3.Es6模块化规范中定义:每个js文件都是一个独立的模块。导入模块成员使用import关键字。暴露模块成员使用export关键字。
   4.下面请看详细的使用。

二.详细用法：

  首先，我同一个目录下新建一个export.js文件模拟其为要导出的模块，再建一个import.js文件模拟其要导入其它模块。同时为了在浏览器运行，新建一个index.html文件，并引入import.js文件。需要注意的是index.html引入import.js时要指定类型type="module"才能使用模块化。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
   <!-- 看这  -->
    <script type="module" src="./import.js"></script>
  </head>
  <body></body>
</html>

1.导出导入基本变量：

直接导出整句导出，导入变量名要跟导出的模块变量名一一对应否则报错，同时用{}包裹导入的变量名：

export.js内容：

export let name = 'jack';
export let age = 18;

import.js内容

// 名称要跟导出的模块名称一一对应，同时from后为导入模块的路径
import {name,age} from './export.js'
console.log(`我叫${name},今年${age}岁`);

运行结果：

在这里插入图片描述

2.导出导入基本变量（2）：

也可以先定义变量名，再直接导出变量名。

export.js内容：

 let name = 'jack';
 let age = 18;
 export {
     name,
     age
 }

import.js内容

import {name,age} from './export.js'
console.log(`我叫${name},今年${age}岁`);

运行结果：
在这里插入图片描述

3.as对变量起别名：

导入的时候通过 as 可以修改变量名字。

export.js内容：

 let name = 'jack';
 let age = 18;
 export {
     name,
     age
 }

import.js内容

import {name as myName,age} from './export.js'
console.log(`我叫${myName},今年${age}岁`);

运行结果：
在这里插入图片描述

4.导入变量不可修改：

导入变量是只读的，不可修改。

export.js内容：

 let name = 'jack';
 let age = 18;
 export {
     name,
     age
 }

import.js内容

import {name as myName,age} from './export.js'
age = 20;
console.log(`我叫${myName},今年${age}岁`);

运行结果：
在这里插入图片描述

5.导入引用类型可修改值：

导入引用类型（对象，数组）可修改值

export.js内容：

 let obj = {a:1,b:2};
 let arr = [0,1,2];
 export {
     obj,
     arr
 }

import.js内容

import {obj,arr} from './export.js'
obj.a = 100;
arr[0] = 200;
console.log(obj,arr);

运行结果：
在这里插入图片描述

6.基本导入导出函数：

可以导入导出函数，导入的函数存在声明提升。

export.js内容：

export function add(a,b){
    console.log(a+b);
}

import.js内容

myAdd(1,2);
import {add as myAdd} from './export.js'

运行结果：
在这里插入图片描述

7.导出多个函数并起别名：

导出多个函数，同时也可以在导出的时候通过as起别名。

export.js内容：

function add(a,b){
    console.log(a+b);
}
function sub(a,b){
    console.log(a-b);
}
export {add as myAdd , sub as mySub}

import.js内容

import {myAdd,mySub} from './export.js'
myAdd(2,3);
mySub(6,3);

运行结果：
在这里插入图片描述

8.静态导入：

模块导入是静态导入的，不能使用那些什么需要判断呀什么变量保存呀的需要运行时才能确定导入的。必须按规定写法。

export.js内容：

function add(a,b){
    console.log(a+b);
}
function sub(a,b){
    console.log(a-b);
}
export {add as myAdd , sub as mySub}

import.js内容

let path = './export.js'
import {myAdd,mySub} from path;
myAdd(2,3);
mySub(6,3);

运行结果：
在这里插入图片描述

9.静态导入（2）：

模块导入是静态导入的，不能使用那些什么需要判断呀什么变量保存呀的需要运行时才能确定导入的。必须按规定写法。

export.js内容：

function add(a,b){
    console.log(a+b);
}
function sub(a,b){
    console.log(a-b);
}
export {add as myAdd , sub as mySub}

import.js内容

if(true){
 import {myAdd,mySub} from './export.js'
}
myAdd(2,3);
mySub(6,3);

运行结果：
在这里插入图片描述

10.（*）整体加载：

在导入的时候用（*）号指定一个对象，同时用 as 给这个对象起别名，那么导出的全部变量都是这个对象的某个属性。

export.js内容：

function add(a,b){
    console.log(a+b);
}
function sub(a,b){
    console.log(a-b);
}
let arr = [1,2,3];
export {add , sub , arr}

import.js内容

import * as obj from './export.js'
obj.add(2,3);
obj.sub(6,3);
console.log(obj.arr);

运行结果：
在这里插入图片描述

11. 默认输出：

export default 指定默认输出，就是导出的时候为导出一个匿名函数，而在导入的时候就可以指定随便起一个名字都能实现导入。这样就不需要知道原模块输出的函数名，大大方便使用。且导入的时候不再需要{}包裹。要注意的是，一个js文件（模块）只能存在一个export default ：

export.js内容：

export default function(a,b){
  console.log(a+b);
}

import.js内容

import fn from './export.js'
fn(1,2);

运行结果：
在这里插入图片描述

12. 默认输出（2）：

也可以直接默认输出一个对象：

export.js内容：

export default {
    age:18,
    add(a,b){
    console.log(a+b);
    }
}

import.js内容

import obj from './export.js'
obj.add(1,2);
console.log(obj.age);

运行结果：
在这里插入图片描述

13.默认输出（3）：

也可以默认输出一个构造函数或者class类：

export.js内容：

export default function(name,age){
    this.name = name;
    this.age = age;
}

import.js内容

import Person from './export.js'
var zhangsan = new Person('zhangsan',19);
console.log(zhangsan);

运行结果：
在这里插入图片描述

14.复合写法：

如果在一个模块中，导入一个模块后又导出同一个模块，可以采用复合写法：

原来写法：

import {add} from './add.js'
export {add}

可以直接这样简写：

export {add} from './add.js'

三.总结：

   上面就是es6模块一些常用的语法了，shiε≡٩(๑>₃<)۶ 。总而言之，Es6模块化规范中定义每个js文件都是一个独立的模块。导入模块成员使用import关键字。暴露模块成员使用export关键字。这是ES6官方提出了大一统的模块化规范，这也是目前浏览器与服务端的通用规范。
   那么，下次见啦~ 对了，今天中秋节，送句话给你们⭐🌕⭐⭐⭐：一生相识，来自天意；一份真情，来自秋季；一份美丽，来自惦记；一句祝福，来自心底，愿健康平安快乐幸福永远伴随您。祝你中秋节快乐！不是复制的，读书人能叫复制么，叫借鉴(^ ▽ ^)。

在这里插入图片描述

【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱： cloudbbs@huaweicloud.com
ECMAScript JavaScript 前端
  • 点赞
  • 收藏
  • 关注作者

评论（0）

0/1000
抱歉，系统识别当前为高风险访问，暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称，即可参与社区互动！

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

确认 取消

加入云驻计划，成为创作者

  • 华为云周边好礼
  • 免费体验产品
  • 特殊身份标识
  • 线下官方门票
  • 内部专家零距离
  • 与10000+优质创作者共同成长
立即加入