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

2022-03-02 22:01:12 阅读：160 来源： 互联网

标签：es6 commonjs obj log 模块化 js 模块 console importFunc

文章目录

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的模块化是异步加载的

标签：es6,commonjs,obj,log,模块化,js,模块,console,importFunc
来源： https://blog.csdn.net/weixin_44043130/article/details/122284543

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9