AMD、CMD、CommonJs规范

AMD、CMD、CommonJs规范

　将js代码分割成不同功能的小块进行模块化的概念是在一些三方规范中流行起来的，比如CommonJS、AMD和CMD。接下来我们看一下这几种规范。

 

模块化规范

      CommonJs是使用在服务器端，是同步加载的，NodeJs是对此规范的实践。

      AMD，CMD是使用在浏览器端的，是异步加载的，require.js与sea.js是依赖此规范实现。

1.1 CommonJs规范实例

　   CommonJs对模块的定义十分简单，主要分为模块定义 、模块引用、模块标识。

      根据此规范，一个js文件就是一个模块，有自己的作用域，不会污染全局作用域。在一个文件里面定义的变量、函数、类都是私有的，对其他文件不可见。

      在模块中，存在一个module对象，她代表模块自身。其中exports是module的属性，该属性是一个对象，用于挂载当前模块的方法或者变量，也是当前模块的唯一导出的出口。以供其他模块使用。

1  addTwo.js
2 -----------------------------------------
3  export.add = function(a,b){
4        return a+b;
5  }   //导出模块

       在模块中，存在require()方法，这个方法接受模块标示，用来引入一个模块。

1 main.js
2 -----------------------------------------
3 var a = 5;
4 var b = 4;
5 var addTwo = require("./addTwo");//此参数为模块标示
6   
7 console.log(addTwo.add(a,b));//9

 

       CommonJS规范加载模块是同步的，也就是说，只有加载完成，才能执行后面的操作。AMD规范则是非同步加载模块，允许指定回调函数。由于Node.js主要用于服务器编程，模块文件一般都已经存在于本地硬盘，所以加载起来比较快，不用考虑非同步加载的方式，所以CommonJS规范比较适用。

1.2 AMD规范实例

      AMD是"Asynchronous Module Definition"的缩写，意思就是"异步模块定义"。

      AMD设计出一个简洁的写模块API：
　　define([id], [dependencies], factory);
　　第一个参数 id 为字符串类型，表示了模块标识，为可选参数。若不存在则模块标识应该默认定义为在加载器中被请求脚本的标识。如果存在，那么模块标识必须为顶层的或者一个绝对的标识。
　　第二个参数，dependencies ，是一个当前模块依赖的，已被模块定义的模块标识的数组字面量。
　　第三个参数，factory，是一个需要进行实例化的函数或者一个对象。

     1、html代码

 1 index.html
 2 ---------------
 3  <!DOCTYPE html>
 4  <html>
 5  <head>
 6     <title></title>
 7     <!-- 引入require.js -->
 8     <script type="text/javascript" src="http://cdn.bootcss.com/require.js/2.3.3/require.js"></script> </head>
 9   <body>
10     <script type="text/javascript" src="main.js"></script>
11   </body>
12  </html>

 　　2、js代码

 1 myName.js
 2 ---------------
 3 // 定义模块
 4 define('myName',[],function () {
 5   return 'My name is toTo_li.'
 6 })
 7 
 8 yourName.js
 9 ---------------
10 // 定义模块
11 define('yourName',[],function () {
12   return 'Your name is boke.'
13 })

 

       加载模块：AMD模块化规范中使用全局或局部的require函数实现加载一个或多个模块，所有模块加载完成之后的回调函数。

       require([module], callback)：

            [module]：是一个数组，里面的成员就是要加载的模块；
　　      callback：是模块加载完成之后的回调函数。

1  main.js
2  ---------------
3  // 调用模块
4  require(['myName','yourName'],function (myName,yourName) {
5    console.log(myName)
6    console.log(yourName)
7  })

 

1.3 CMD规范实例

      CMD是SeaJS 在推广过程中对模块定义的规范化产出

  • 对于依赖的模块AMD是提前执行，CMD是延迟执行。不过RequireJS从2.0开始，也改成可以延迟执行（根据写法不同，处理方式不通过）。

  • CMD推崇依赖就近，AMD推崇依赖前置。

     1 //AMD
 2   define(['./a','./b'], function (a, b) {
 3    
 4       //依赖一开始就写好
 5       a.test();
 6       b.test();
 7   });
 8    
 9   //CMD
10  define(function (requie, exports, module) {
11       
12      //依赖可以就近书写
13      var a = require('./a');
14      a.test();
15       
16      ...
17      //软依赖
18      if (status) {
19       
20          var b = requie('./b');
21          b.test();
22      }
23  });

     

     

 

posted @ 2017-10-10 17:11  toTo_l  阅读(331)  评论(0)  编辑  收藏  举报