手机

iphone11大小尺寸是多少？苹果iPhone11和iPhone13的区别是什么？

警方通报辅警执法直播中被撞飞：犯罪嫌疑人已投案

家电

每日聚焦：第137篇:重学ES6模块化

2023-04-13 23:05:46 来源：博客园

好家伙，

(资料图片)

我原本以为学完模块化之后，就能非常顺利的完成我的项目分包，

然而并没有，这是非常重要的知识,而我没有学好

所以我决定重学一遍

本篇为《阮一峰 ECMAScript 6 (ES6) 标准入门教程第三版》第23章"Module的语法"学习笔记

1.概述

历史上，JavaScript 一直没有模块（module）体系，无法将一个大程序拆分成互相依赖的小文件，再用简单的方法拼装起来。

CommonJS 和 AMD 两种。前者用于服务器，后者用于浏览器。

ES6 在语言标准的层面上，实现了模块功能，而且实现得相当简单，完全可以取代 CommonJS 和 AMD 规范，成为浏览器和服务器通用的模块解决方案。

ES6 模块的设计思想是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量。

2.模块的整体加载

可以使用整体加载，即用星号（*）指定一个对象，所有输出值都加载在这个对象上面。

//moduleA.mjsfunction add(a) {    return a + 2;}function multi(a) {    return a * 2;}export {    add,    multi,};

//moduleB.mjsimport * as module from "./moduleA.mjs"console.log(module.add(2))console.log(module.multi(3))

测试运行:

模块整体加载所在的那个对象,应该是可以静态分析的,所以不允许运行时改变。

3.export default命令

从前面的例子可以看出，使用import命令的时候，用户需要知道所要加载的变量名或函数名，否则无法加载。

但是，用户肯定希望快速上手，未必愿意阅读文档，去了解模块有哪些属性和方法。

首先我们定义一个匿名函数在moduleA.mjs中

//moduleA.mjsexport default function (a) {    return a + 2;}

moduleA.mjs在moduleB.mjs文件中

//moduleB.mjsimport add from "./moduleA.mjs";console.log(add(2))

上面代码moduleA.mjs的默认输出是一个函数。

其他模块加载该模块时，import命令可以为该匿名函数指定任意名字。

（就是说，在这个例子中，我们把moduleA.mjs当作开发者，把moduleB.mjs当作使用者

对于开发者而言，开发者将模块导出后，使用者是不知道方法名字的

而默认导出，将方法的命名权给了使用者，这确实是非常人性化的设计）

即使定义了方法名，在导入时也能重新命名

//moduleA.mjsexport default function add(a) {    return a + 2;}

//moduleB.mjsimport adddd from "./moduleA.mjs";console.log(adddd(2))// 4

4.跨模块常量

目录结构如下：

如果想设置跨模块的常量（即跨多个文件），或者说一个值要被多个模块共享，可以采用下面的写法。

// constants/db.mjsexport const db = {    url: "http://my.couchdbserver.local:5984",    admin_username: "admin",    admin_password: "admin password"  };

// constants/users.mjsexport const users = ["root", "admin", "staff", "ceo", "chief", "moderator"];

// constants/index.mjsexport {db} from "./db.mjs";export {users} from "./users.mjs";

//moduleB.mjsimport {db, users} from "./constants/index.mjs";console.log(db)console.log(users)

运行结果如下：

(我想我的飞机大战中的配置项config.js可以这么搞)

关键词：