1.为什么要使用模块化？

• 当一个项目中需要加载n多js文件时，这些文件之间的依赖关系、调试维护、加载顺序需要我们手动管理，这样不利于项目的调试和维护。使用模块化可以是我们很方便地使用别人的代码，想要什么功能，就加载什么模块，同时代码出现问题时只调试相应的模块即可，模块之间耦合度小，便于维护。

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

前端模块化

• CommonJS： node.js首次将javascript语言用于服务器端编程，这标志”Javascript模块化编程”开始。node.js的模块系统，就是参照CommonJS规范实现的。CommonJS提供了模块化编程一些基本的规范

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

    1 2 3 4 5 6 7 8 9 10 11

    //模块定义 print.js function print(){ console.log('CommonJS模块定义'); } module.exports = { print: print } //加载模块 var nameModule = require('./print.js'); nameModule.print();

• AMD：即Asynchronous Module Definition，异步模块定义。它是一个在浏览器端模块化开发的规范，由于不是JavaScript原生支持，使用AMD规范需要函数库的支持，比如RequireJS。它是由于模块加载问题在浏览器端需要异步加载而推出的规范（浏览器网速、js文件依赖顺序需要模块加载的异步实现）

  • requireJS主要解决两个问题
    • 有依赖的js文件，必须在依赖文件加载完后在加载
    • js加载的过程中浏览器出于等待状态，加载文件越多，页面失去响应时间越长

      1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

      // 定义模块 print.js define(['dependency'], function(){ function print(){ console.log('AMD requireJS模块定义'); } return { print: print }; }); // 加载模块 require(['print'], function (my){ 　 my.print(); });

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

• define(id?, dependencies?, factory);
  id：可选参数，用来定义模块的标识，如果没有提供该参数，脚本文件名（去掉拓展名）
  dependencies：是一个当前模块依赖的模块名称数组
  factory：工厂方法，模块初始化要执行的函数或对象。如果为函数，它应该只被执行一次。如果是对象，此对象应该为模块的输出值
  使用require函数加载模块
  • require([dependencies], function(){});
    require()函数接受两个参数
    第一个参数是一个数组，表示所依赖的模块
    第二个参数是一个回调函数，当前面指定的模块都加载成功后，它将被调用。加载的模块会以参数形式传入该函数，从而在回调函数内部就可以使用这些模块
  • CMD:即Common Module Definition通用模块定义，CMD规范是随着seajs的推广发展出来的，综合了AMD和CommonJS两种规范
    在 CMD 规范中，一个模块就是一个文件, define(factory);
    actory有三个参数
    function(require, exports, module)

    1 2 3 4 5 6 7 8 9 10

    // 定义模块 myModule.js define(function(require, exports, module) { var $ = require('jquery.js') $('div').addClass('active'); }); // 加载模块 seajs.use(['myModule.js'], function(my){ });