前端进阶课程之模块化（三）CMD规范

最新推荐文章于 2024-11-01 10:18:14 发布

weixin_33814685

最新推荐文章于 2024-11-01 10:18:14 发布

阅读量115

点赞数

文章标签：前端 ViewUI

原文链接：https://juejin.im/post/5bf7fa38e51d4508485c0c77

版权

一：sea.js

疑问：为什么会出现CMD规范？为什么会出现sea.js，它到底解决了什么问题？

答案：CMD规范是国内发展起来的，和AMD规范类似，AMD规范有一个require.js的实现，CMD也有一个叫sea.js的实现，这就是他们出现的背景。

至于解决了什么问题？我们可以暂且认为他和AMD解决的问题是一样的， 1: 浏览器中js文件的异步加载，避免的js文件的阻塞问题 2: 定义了模块之间如何相互依赖，更好的维护文件代码。

这里就冒出了一个疑问？CMD规范和AMD规范的作用不是一样嘛，那他俩有什么区别呢？稍后详述

二：CMD规范与sea.js的关系

和AMD规范与require.js的关系一样，CMD是一个规范，sea.js是规范的具体实现。

三：CMD规范代码实例

//index.html: 引入sea.js和主入口文件main.js
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="./sea.js"></script>
<script src="./main.js"></script>
</body>
</html>
复制代码

//main.js ,这里引入了三个模块文件，
seajs.use(['./lib/a.js', './lib/b.js', './lib/c.js'], function (a, b, c) {
    console.log(a);//{name: 1}
    console.log(b);//{name: 2}
    console.log(c);//{name: 3}
});
复制代码

//定义模块文件
//a.js
define({
    name: 1
});

//b.js
define({
    name: 2
});

//c.js
define({
    name: 3
});

复制代码

四：AMD与CMD规范的联系与区别

相同点：

思想类似，解决的问题都一样，都是异步加载模块，同时更好的定义了模块之间如何去依赖。

不同点：

1: 模块定义都是采用define()方法，模块引入的api所有不同，但是思想一致，第一个参数表示引入的模块路径，第二个参数是回调函数，表示所有模块全部加载完成以后，所调用的函数。

AMD规范：采用define去定义模块，采用require(['模块1','模块2'], function() {}) 去引入模块 CMD规范：采用define去定义模块，采用seajs.use('模块1','模块2'], fucntion () {}) 去引入模块

2: 模块加载的时机不同

AMD规范：依赖前置：即在模块中引入其他模块时，必须提前声明好要引入的模块

//main.js模块
define(['./a', './b'], function(a, b) {

    a.doSomething();

    b.doSomething();

});

说明：
我们分析一下上面的代码：
浏览器在加载main.js模块时，首先看到了声明了a.js和b.js模块，所以会首先加载这两个模块，加载完成以后，再执行回调函数中代码。
复制代码

CMD规范：依赖就近：即在模块中不需要提起声明要引入的模块，写代码哪里用到其他模块，就在哪里直接引入模块。

//main.js模块
define(function(require, exports, module) {
  var a = require('./a')
  a.doSomething()
  var b = require('./b')
  b.doSomething()
})

说明：
我们再来分析一下用cmd规范实现的这段代码：
浏览器在加载main.js模块时，它会首先遍历整个文件中，然后找到所有带require关键字的代码，并且加载其对应的模块，所以相对于AMD规范直提前声明要引用的 模块（依赖前置）而言，
CMD规范 则需要 遍历 整个文件，才可以找到需要加载哪些模块 (这一步遍历整个文件找requuire关键字就牺牲了性能，带了方便就是书写的方便，
我们不用考虑提前引入哪些模块，只需要直接写代码，然后写着写着，发现这段代码需要引入其他模块，然后直接在此处引入其他模块即可）

复制代码