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

时间 2019-11-24

标签前端进阶课程模块化 cmd 规范繁體版

原文原文链接

一：sea.js

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

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

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

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

二：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 () {}) 去引入模块ui

2: 模块加载的时机不一样spa

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关键字就牺牲了性能，带了方便就是书写的方便，
咱们不用考虑提早引入哪些模块，只须要直接写代码，而后写着写着，发现这段代码须要引入其余模块，而后直接在此处引入其余模块便可）

复制代码