AMD-CMD-requirejs

为什么要使用模块化？

随着互联网技术的发展，网页的JavaScript代码越来越庞大，越来越复杂，复杂的网页通常需要团队分工合作、进度管理等，开发者迫切需要能隔离、组织庞大的JavaScript代码的功能，也就是这里所说的模块化。
一个模块就是一个实现特定功能的文件，有了模块，我们就可以更方便地使用别人的代码，想要什么功能，就加载什么模块。同时还解决了命名冲突，变量污染等问题。
模块化开发规范在前端先驱们的探索中一步步形成。从最开始的函数封装 --->对象-->立即执行函数，到后来的CommonJS、AMD、CMD。

CommonJS、AMD、CMD

CommonJS规范

CommonJS是服务器端模块的规范，Node.js采用了这个规范。Node.JS首先采用了js模块化的概念。它的主要内容：

定义模块根据CommonJS规范，一个单独的文件就是一个模块。每一个模块都是一个单独的作用域，也就是说，在该模块内部定义的变量，无法被其他模块读取，除非定义为global对象的属性
模块输出：模块只有一个出口，module.exports对象，我们需要把模块希望输出的内容放入该对象
加载模块：加载模块使用require方法，该方法读取一个文件并执行，返回文件内部的module.exports对象。

//模块定义 myModel.js
 var name = 'Byron';
 function printName(){
   console.log(name);
 }
 module.exports = {
   printName: printName,
 }
 //加载模块
 var nameModule = require('./myModel.js');
 nameModule.printName();

CommonJS的局限：由于require是同步的，模块系统需要同步读取模块文件内容，并编译执行以得到模块接口。这在服务器端可以很好的执行，因为模块都放在本地硬盘，直接读取就行了。但CommonJS却不适合浏览器环境，比如：

  var math = require('math');
  math.add(2, 3);

后面的代码执行依赖于前面加载的模块math，浏览器加载是异步的，如果加载时间很长，后面的代码也无法执行，会一直卡在那里。为了解决这个问题，诞生了AMD和CMD规范。

AMD 即Asynchronous Module Definition，中文名是异步模块定义的意思。语法：
1.用define来定义模块。

 define(id?, dependencies?, factory);

id：可选参数，用来定义模块的标识，如果没有提供该参数，脚本文件名（去掉拓展名）
dependencies：是一个当前模块依赖的模块名称数组
factory：工厂方法，模块初始化要执行的函数或对象。如果为函数，它应该只被执行一次。如果是对象，此对象应该为模块的输出值

2.用require来加载模块。

 require([dependencies], function(){});

require()函数接受两个参数：
第一个参数是一个数组，表示所依赖的模块
第二个参数是一个回调函数，当前面指定的模块都加载成功后，它将被调用。加载的模块会以参数形式传入该函数，从而在回调函数内部就可以使用这些模块
require()函数在加载依赖的函数的时候是异步加载的，这样浏览器不会失去响应，它指定的回调函数，只有前面的模块都加载成功后，才会运行，解决了依赖性的问题。

CMD（[Common Module Definition] 模块定义规范。在 CMD 规范中，一个模块就是一个文件。代码的书写格式如下：

  define(function(require, exports, module) {
      // 模块代码
  });

require 是一个方法，接受模块标识作为唯一参数，用来获取其他模块提供的接口；exports 是一个对象，用来向外提供模块接口；module 是一个对象，上面存储了与当前模块相关联的一些属性和方法。

AMD和CMD的区别：

AMD 是 RequireJS 在推广过程中对模块定义的规范化产出。
CMD 是 SeaJS 在推广过程中对模块定义的规范化产出。
AMD:提前执行（异步加载：依赖先执行）+延迟执行。
CMD:延迟执行（运行到需加载，根据顺序执行）。
CMD 推崇依赖就近，AMD 推崇依赖前置。

 // CMD
 define(function(require, exports, module) {
 var a = require('./a')
 a.doSomething()
 // 此处略去 100 行
 var b = require('./b') // 依赖可以就近书写
 b.doSomething()
 // ... 
 })
 // AMD 默认推荐的是
 define(['./a', './b'], function(a, b) { // 依赖必须一开始就写好
 a.doSomething()
 // 此处略去 100 行
 b.doSomething()
 ...
 })

范例预览

AMD-CMD-requirejs

为什么要使用模块化？

CommonJS、AMD、CMD

你可能感兴趣的:(AMD-CMD-requirejs)