20170623-CommonJS AMD CMD

k00baa 发布于2019-08-20 17:28 / 306人阅读

摘要：但是在浏览器端，加载模块需要向服务器发送请求，会受到网络的影响。如果模块的加载需要等很长时间，浏览器就会处于假死状态。即，中文名为异步模块定义。模块中，中的回调函数会在中所有脚本执行完毕并且其依赖的所有模块都加载完毕后才会被调用。

1.模块与模块化开发

模块：实现特定功能的一组方法

模块化开发：随着浏览器性能的提升，相关技术的进步，前端项目变得越来越复杂。为了提高开发效率，人们将特定功能的方法/代码放在一起，构成模块，方便在开发过程中复用，但是出现了很多问题：全局变量的使用冲突，函数命名冲突，依赖关系管理困难。为了解决上述问题，制定了一些方法和规范来解决上述问题——CommonJS、AMD、CMD

2.CommonJS

CommonJS是起源于服务器端模块化开发的规范

定义模块：一个多带带的文件就是一个模块，每一个模块都是一个多带带的作用域（在模块内部定义的变量，无法被其他模块读取，除非定义为global对象的属性）

模块输出：模块只有一个出口 module.exports 对象，需要将模块希望输出的内容放在该对象中

加载模块：加载模块使用require方法，该方法读取一个文件并执行，返回文件内部的 module.exports 对象

//模块定义 myModel.js

var name = "Byron";

function printName(){
    console.log(name);
}

function printFullName(firstName){
    console.log(firstName + name);
}

module.exports = {
    printName: printName,
    printFullName: printFullName
}

//加载模块

var nameModule = require("./myModel.js");

nameModule.printName();
// 在myModel模块外部是无法获取其内部定义的变量name

问题：加载模块和操作模块提供的变量和方法是同步的，即操作模块提供的变量和方法必须得等到加载模块完成后才可以执行。在服务器端，所有的模块(js文件)都放在硬盘中，因此模块的加载速度很快。但是在浏览器端，加载模块需要向服务器发送请求，会受到网络的影响。如果模块的加载需要等很长时间，浏览器就会处于“假死”状态。因此CommonJS只适用于服务器端，并不适用于浏览器端。

3.AMD

AMD即 Asynchronous Module Definition，中文名为异步模块定义。它是一个在浏览器端模块化开发的规范

RequireJS是遵循AMD规范的一个JavaScript文件和模块的加载器

requireJS主要解决两个问题:

js文件之间的依赖关系：被依赖的文件需要早于依赖它的文件加载到浏览器

js加载的时候浏览器会停止页面渲染，加载文件越多，页面失去响应时间越长

使用

定义模块：requireJS定义了一个函数 define，它是全局变量，用来定义模块

define(id?, dependencies?, factory);

id：可选参数，用来定义模块的标识，如果没有提供该参数，默认为该模块对应的脚本文件名（去掉拓展名）

dependencies：可选参数，是一个当前模块依赖的模块名称数组

factory：必填参数，模块初始化要执行的函数或对象。如果为函数，它应该只被执行一次。如果是对象，此对象应该为模块的输出值

加载和使用模块：

require([module], callback);

1.[module]，是一个数组，指定了要加载的模块

2.callback，是加载成功之后的回调函数

例子：

require(["math"], function (math) {
  math.add(2, 3);
});
console.log("hello world");

console.log()的执行和模块的加载执行是异步的，当模块加载完毕，并且当前页面所有代码执行完毕后才会执行回调函数。

测试

// html

//main.js
require(["sayName", "sayAge", "sayTime"], function(sayName, sayAge,sayTime){
  alert("加载成功！！")
})
alert("hahaha")


// sayName.js
define(function(p){
  alert("xin")
})

// sayAge.js
define(["jquery"],function($){
  alert("22")
})

// sayTime.js
define(function(){
  alert(Date.now())
})

结果：依次弹出：hahaha, xin, 1498193441948, 22, 加载成功!!

请求后的html文件

各种文件的加载顺序

总结：

通过上面的例子，可以看到RequireJS会动态的创建异步脚本去加载各种依赖模块，加载顺序和声明模块时指定依赖模块的顺序有关。

脚本加载完毕后会立即执行，并不能保证这些脚本执行顺序。

一个模块依赖的所有模块都加载完毕后，该模块的回调函数才会被执行。

main模块中，require中的回调函数会在main中所有脚本执行完毕并且其依赖的所有模块都加载完毕后才会被调用。

4.CMD

CMD即 Common Module Definition，中文为通用模块定义，它是一个在浏览器端模块化开发的规范

Sea.js是遵循AMD规范的一个JavaScript文件和模块的加载器

Sea.js推荐一个模块一个文件

使用

定义模块：SeaJS定义了一个函数 define，它是全局变量，用来定义模块

define(id?, dependencies?, factory);

//例子
define(function(require, exports, module) {

  // 通过 require 引入依赖
  var $ = require("jquery");
  var Spinning = require("./spinning");

  // 通过 exports 对外提供接口
  exports.doSomething = ...

  // 或者通过 module.exports 提供整个接口
  module.exports = ...

});

id：可选(推荐不写，默认为文件名)，用来定义模块的标识，通常用文件名作为模块id

dependencies：可选(推荐不写)，是一个当前模块依赖的模块名称数组(因为CMD推崇依赖就近，因此一般不在此处指定)

factory：

function(require, exports, module)

require(id):require 是一个方法，接受模块标识作为唯一参数，用来获取其他模块提供的接口

exports 是一个对象，用来向外提供模块接口

module 是一个对象，上面存储了与当前模块相关联的一些属性和方法

测试

//html

// main.js
define(function(require, exports, module) {
  alert("aaa")

  var sayName = require("sayName")
  sayName()
  var date = new Date()
　// 50s后再执行require("sayAge")
  while(Date.now()-date<50000){}
  var sayAge = require("sayAge")
  sayAge()
});

// sayName.js
define(function(require, exports, module) {
  module.exports = function(){
    alert("xin")
  }
});

// sayAge.js
define(function(require, exports, module) {
  module.exports = function(){
    alert("22")
  }
});

结果：依次弹出：aaa, xin ,(50秒后输出)22

　结果分析：

通过上面的时间图可以看出,尽管在main.js中，var sayAge = require("sayAge")被延迟了(大约)50s才执行，但是sayAge.js的加载却没有收到影响(sayAge.js在200多ms的时候就加载完毕了)，只是sayAge的执行被延迟了(大约)50s。

通过上述实验可以得到以下结论：seajs会分析依赖哪些模块，然后加载这些模块，加载完成后先不执行，当使用require语句的时候，才执行对应的模块，模块的执行顺序和书写顺序是完全一致的

AMD和CMD

模块定义时对依赖的处理不同：

AMD推崇依赖前置，在定义模块的时候就要声明其依赖的模块

CMD推崇就近依赖，只有在用到某个模块的时候再去require

依赖模块加载的过程以及依赖模块执行的时机不同：

AMD依赖前置，js可以方便知道依赖模块是谁，立即加载并执行，所有依赖模块都加载执行完后会进入require的回调函数，执行主逻辑，这样的效果就是依赖模块的执行顺序和书写顺序不一定一致

CMD就近依赖，需要使用把模块变为字符串解析一遍才知道依赖了那些模块，然后加载这些模块，加载完成后先不执行，当使用require语句的时候，才执行对应的模块，模块的执行顺序和书写顺序是完全一致的

模块的加载都是异步的

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/83605.html

【面试系列】之一：关于Cmd和Amd

摘要：开篇我叫王彬，现在是百度首页业务部原网页搜团队索部前端的实习，两天前我得知我所在的部门只有两个，而且要分给策略，这就意味着我要面临千军万马过独木桥的秋招。总结我在百度实习时接触到过一个框架，用于百度首页和首页的模块化开发。之一：关于Cmd和Amd 为什么想起来做这样一个专题呢，答案应该是为了勉励面试笔试秋招中的自己吧！而且也是为了和我一样的你。 1.开篇我叫王彬，现在是百度首页业务...

lordharrd 2019-08-21 14:16 评论0 收藏0
「JavaScript」如何让你的插件兼容CommonJS, AMD, CMD 和原生 JS

摘要：模块标准有三个全局变量和。模块中有两种方式提供对外的接口，一种是，一种是使用进行返回。规范中，函数同样有一个公有属性。由于和都可以使用来定义对外接口，故可以合并成一句代码。模块标准 CommonJS CommonJS 有三个全局变量 module、exports 和 require。但是由于 AMD 也有 require 这个全局变量，故不使用这个变量来进行检测。如果想要对外提供接...

ShevaKuilin 2019-08-21 10:40 评论0 收藏0
AMD, CMD, CommonJS和UMD

摘要：若不存在则模块标识应该默认定义为在加载器中被请求脚本的标识。其中是一个数组，里面的成员就是要加载的模块是模块加载完成之后的回调函数。在加载与两个模块之后执行回调函数实现具体过程。在判断是否支持是否存在，存在则使用方式加载模块。我的github(PS:希望star): https://github.com/tonyzheng1... 今天由于项目中引入的echarts的文件太大，req...

KavenFan 2019-08-19 18:02 评论0 收藏0
使用CommonJS，AMD以及CMD编写模块化JavaScripts

摘要：模块化编程首先，我想说说模块化编程这个概念当我不清楚这个概念的时候，其实说什么模块化编程多好多好都是懵逼的而我一直不觉得有多好，其实也是因为我从开始写，就一直都在模块化编程啊我们写一个文件然后我们在文件中引入然后调用方法哈哈这样已经是模块化模块化编程首先，我想说说模块化编程这个概念当我不清楚这个概念的时候，其实说什么模块化编程多好多好都是懵逼的而我一直不觉得有多好，其实也是因为我从...

nifhlheimr 2019-08-22 10:34 评论0 收藏0
前端模块化开发

摘要：来源于阿贤博客模块化今天给大家写一篇关于前端模块化开发知识点。前端模块化开发那点历史模块化是指在解决某个复杂混杂问题时，依照一种分类的思维把问题进行系统性的分解以之处理。来源于：阿贤博客 javascript模块化今天给大家写一篇关于前端模块化开发知识点。前端模块化开发那点历史模块化：是指在解决某个复杂、混杂问题时，依照一种分类的思维把问题进行系统性的分解以之处理。模块...

tianhang 2019-08-23 16:44 评论0 收藏0