前端模块化,AMD,CMD,ES6 Module,CommonJS,ES6 模块与CommonJS 模块的差异

前端模块化

问题： 为什么前端要使用模块化？

​ 模块化： 是具有特定功能的一个对象（ 广义理解 ）

​ 模块定义的流程：

​ 1.定义模块（对象）

​ 2.导出模块

​ 3.引用模块

​ 好处：

1. 可以存储多个独立的功能块

2. 复用性高

分类

1. AMD

• AMD规范采用异步方式加载模块，模块的加载不影响它后面语句的运行。所有依赖这个模块的语句，都定义在一个回调函数中，等到加载完成之后，这个回调函数才会运行。这里介绍用require.js实现AMD规范的模块化：用require.config()指定引用路径等，用define()定义模块，用require()加载模块。

  首先我们需要引入require.js文件和一个入口文件main.js。main.js中配置require.config()并规定项目中用到的基础模块。

  /** 网页中引入require.js及main.js **/
  <script src="js/require.js" data-main="js/main"></script>
  

  /** main.js 入口文件/主模块 **/
  // 首先用config()指定各模块路径和引用名
  require.config({
       
    baseUrl: "js/lib",
    paths: {
       
      "jquery": "jquery.min",  //实际路径为js/lib/jquery.min.js
      "underscore": "underscore.min",
    }
  });
  // 执行基本操作
  require(["jquery","underscore"],function($,_){
       
    // some code here
  });
  

引用模块的时候，我们将模块名放在[]中作为reqiure()的第一参数；如果我们定义的模块本身也依赖其他模块,那就需要将它们放在[]中作为define()的第一参数。

     // 定义math.js模块
     define(function () {
   
         var basicNum = 0;
         var add = function (x, y) {
   
             return x + y;
         };
         return {
   
             add: add,
             basicNum :basicNum
         };
     });
     // 定义一个依赖underscore.js的模块
     define