js 模块化，AMD、CMD以及commonjs和es6模块化

2022/3/2 23:17:04

编程Tag： js 模块 ES6 模块化 console CommonJS obj log importFunc

本文主要是介绍js 模块化，AMD、CMD以及commonjs和es6模块化，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

文章目录

- AMD规范
- CMD规范
- Commonjs
- - 模块是值的“浅”拷贝
  - 执行时间
  - 同步加载
- es6模块化
- - 引入的是值的引用
  - 引入时间
  - 异步加载

AMD规范

（来自百度百科）
AMD全称是Asynchronous Module Definition，即异步模块加载机制，规范简单到只有一个API，即define函数：
define([module-name?], [array-of-dependencies?], [module-factory-or-object]);
其中：
module-name: 模块标识，可以省略。
array-of-dependencies: 所依赖的模块，可以省略。
module-factory-or-object: 模块的实现，或者一个JavaScript对象。
requirejs等就是是用这个规范开发的

require([module], callback);

amd要求在使用前需要先把所有的模块都写出来

CMD规范

CMD (Common Module Definition),同样是异步加载模块，是seajs推崇的规范，CMD则是依赖就近，用的时候再require。它写起来是这样的：

define(function(require, exports, module) {
   var clock = require('clock');
   clock.start();
});

Commonjs

Commonjs和es6模块化是本文的重点，Commonjs主要应用的环境是nodejs，它具有下列特点

模块是值的“浅”拷贝

抛出变量以及修改的函数

// export.js
var a = { b: "b" }
var obj = {
    a: a
}

var num = 3

function add() {
    num++
}

function change() {
    obj.a.b = "c"
}

module.exports = {
    obj,
    num,
    add,
    change
}

接受模块内的变量并操作

// require.js
const {obj,num,add,change} = require("./export.js")

console.log(obj)  // { a: { b: 'b' } }
console.log(num)  //  3

add()
change()
console.log(obj)  // { a: { b: 'c' } }
console.log(num)  // 3

观察发现对于引用类的值的修改，修改还是会影响原值的

执行时间

当require运行的时候，便会加载这个模块，这个模块就全部加载并运行，当下一次取值的时候是从缓存中读取的值

同步加载

这里创建三个js文件相互引用

// a.js
console.log('a');
const importFunc = () => {
  console.log(require('./b').b);
}

importFunc()


module.exports = {
  importFunc
}

// b.js
console.log("b")
const b = 1
module.exports = {b}

// c.js
const {importFunc} = require("./a") 
console.log("c")

运行结果显示
在这里插入图片描述
这里c最后被打印，被之前的加载语句所阻塞了

es6模块化

引入的是值的引用

d.js

// d.js
console.log('d');
const importFunc = () => {
  import("./e.js").then(({ e }) => {
    console.log(e)
  })
}
importFunc()
var obj = {
  a: "a"
}
export {
  importFunc,
  obj
}

// f.js
import { importFunc, obj } from "./d.js"
console.log(obj)
obj = "a"  // f.js:4 Uncaught TypeError: Assignment to constant variable.
console.log("f")

这里一旦修改了obj的值就会报错，但是给obj赋值修改参数没问题

引入时间

import引入的模块只有在编译的时候才会引入指定模块

异步加载

将上文的f.js注释掉报错代码

// f.js
import { importFunc, obj } from "./d.js"
// console.log(obj)
// obj = "a"  // f.js:4 Uncaught TypeError: Assignment to constant variable.
console.log("f")

// e.js
console.log("e")
const e = 2
export { e }

<!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="./f.js"></script>
</head>
<body>
    
</body>

</html>

html引入后放入服务器在浏览器打开，得到如下打印
在这里插入图片描述
证明es6的模块化是异步加载的

这篇关于js 模块化，AMD、CMD以及commonjs和es6模块化的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！