模块化白小霁5 MinutesApril 18, 2017

为什么要使用模块化？

1.在使用文件使用过程中，如果都写在一个文件当中，有一些变量会提取到全局范围，就会出现命名冲突的问题，使用模块化可以避免此类问题。

1. 如果一个页面当中引入大量的<script>标签，会影响整个页面的响应速度，并可能发生同时引用组件没有引用完全，所以要使用模块化，解决繁琐的文件依赖问题。
2. 本着一个模块一个文件的原则，可以提高代码的可读性，并且实现了代码之间的解耦，提高了代码的复用率。

CMD、AMD、CommonJS 规范分别指什么？有哪些应用

AMD规范

AMD(Asynchronous Module Definition)异步模块定义指定一种机制，在该机制下模块和依赖可以异步加载。对浏览器端很适用。

1. 语法

   define(id?, dependencies?,factory);

• id: 定义模块的名字；
• dependencies(依赖):是当前模块依赖的，已被模块定义的文件名；
• factory(工厂函数):当依赖问价加载完成之后执行的函数

2.应用
RequireJS、curl、Dojo等框架是按照AMD规范实现模块化的设置。

1. 一些配置参数

   require.config({
      baseUrl: 'js/lib', //设定根目录在哪里
       path:{            // 指定各个模块的加载路径
        'jquery': 'jquery.min'
       },
       shim:{  // 配置不兼容的模块
           'jquery.scroll':{
               deps : ['jquery'],   //该模块的依赖
               exports: 'jQuery.fn.scroll'   // 设置输出的变量名
           }
       }
   })

CommonJS规范

CommonJS是一种服务器端模块的规范。node.js也是这种规范。

1. 语法

   require(deps) // 需要依赖的时候加载依赖
   exports.xx = function(){} // 作为唯一的输出表示

CMD规范

CMD（Common Module Definition）是 SeaJS推广过程中产生的。

1. 语法

   define(factory)

2. 案例

   // math.js 
   define(function(requires, exports, module) {
     exports.add = function(x, y) {
       return x + y;
     };
   });
   // inc.js
   define(function(requires, exports, module) {
     var add = require('math').add;
     exports.inc = function(val) {
       return add(val, 1);
     };
   });
   // program.js
   define(function(require, exports, module) {
     var inc = require('inc').inc;
     var a = 1;
     inc(a); // 2
   
     module.id = "program";
   });

UMD

Universal Module Definition 规范类似于兼容 CommonJS 和 AMD 的语法糖，是模块定义的跨平台解决方案。