AMD异步模块定义—require.js学习总结

AMD 异步模块定义（require.js）
require.js官网地址

require.js 提供了两个全局函数define()和require()

控制台输出define，require函数

通过这两个全局函数可以减少JS文件的http请求次数，有相互引用关系的JS文件根据依赖关系进行层级加载，没有依赖到的JS文件不加载。

require.js测试程序如下：
下面截图中JS文件加载顺序：

使用require.js前必须先引入require.js
CDN：https://cdn.bootcss.com/require.js/2.3.5/require.min.js

---

上面定义了main.js，a.js，a-util.js，util.js这几个JS文件，依赖关系如下(=>代表依赖)

main.js => a.js => a-util.js => util.js

util.js可以当作是整个项目的公共工具类，
a-util.js可以是处理a某个业务逻辑的类，
a.js依赖于a-util.js，
main.js是整个项目入口文件。

这时只需要加入data-main的数据标识中引入main.js就加载到了main.js，

<script data-main="main.js" src="https://cdn.bootcss.com/require.js/2.3.5/require.min.js"></script>

依赖代码如下：

util.js

// 抛出util

define(function(){
   var util = {
     getFormatDate : function(date , type){
         if(type === 1){
             return '2018-2-5';
         }
         else if(type === 2){
             return '2018年2月5日';
         }
         else{
             return parseInt(date);
         }
     }
   };
   return util;
});

a-util.js

// 抛出a-util.js
// a-util.js依赖于util.js，util.js返回的util对象用于a-util.js的参数

define(['./util.js'],function(util){
   var a_util = {
        FormatDateLog : function(date){
            return util.getFormatDate(date);
        }
    }
    return a_util;
});

a.js

// 抛出a.js

define(['./a-util.js'],function(a_util){
   var a = {
      fn : function(date){
         return a_util.FormatDateLog(date);
      }
   };
   return a;
});

main.js

// 这里是入口文件，引用需要用到的js文件不需要就不加载

require(['./a.js'],function(a){
    var date = new Date();
    console.log(a.fn(date.getFullYear()));
});

这里程序的输出：2018。

AMD还有个好处就是当你不需要用到某个模块时，只需修改下依赖代码，可以不加载不需要的JS模块。

持续更新中……