requireJS的使用及理解

 

最近项目使用了requirejs，备注记录当下所想，从以下几点说起。

一、安装

直接下载require.js文件，也可以cdn直接引用，我是直接下载文件，放在项目目录下，这样可以方便改动源码，把requireConfig加入到底部，操作简便

var requireConfig = ({
    //加上时间戳
    urlArgs: "r=" + (new Date()).getTime(),
 
    paths: {
        'jquery': 'jquery-2.0.3.min',
        'bootstrap':'bootstrap.min',
        "jquery.tree":'ace-elements.min'
    },
 
    shim: {

        'jquery.tree': {
            deps: ['jquery'],
            exports: 'jQuery.fn.ace_tree'
        },
        'bootstrap':{
            deps: ['jquery'],
            exports: 'jQuery.fn.tooltip'
        }
      
    }

});

二、使用

一行代码调用

<script type="text/javascript" src="/js/require.js" data-main="/js/detail.js?v=2018-8-30-4"></script>

有几点需要说明

1. 属性‘data-main’中的js代表需要加载的主程序
2. 属性‘data-main’中的js关联了几个js，当前页面载入就按js关联了多少按需加载，节约请求次数，避免宽带资源浪费
3. 主程序的写法很灵活

    第一种写法
   require.config(requireConfig);
   require(['jquery','bootstrap','jquery.tree','tools','setHtml'],
    function ($,BTP,TREE,T,H) {
     		//关键代码
   }）
   
   第二种写法
   define(function(require){
   	...
   });
       ...
   多个定义

    

三、去缓存方法

第一步，插入代码。在requireConfig 中增加时间戳urlArgs，代码如下：

var requireConfig = ({
    urlArgs: "r=" + (new Date()).getTime();
});

第二步，插入代码。在调用的主程序的js中，注销当前载入，没有之前注入自然就清缓存，代码如下

requirejs.undef("global");

 第三步，验证。在浏览器加载文件时，就能看到每次刷新，模块文件都有不同的时间戳。

    注意：此方法只能清除require模块中的js缓存，主程序还需要其他方式

四、源码分析

requireJs 属于异步非阻塞加载模块，AMD模式，原理类似队列式进出。

这里只针对源码中的 “require”与 "define" 两个关键词做分析,require作为主模块，运行加载load函数，获取script标签载入js，分析当前模块加载状态（loading-文件正在加载，未载入完成,enabling-对该模块的依赖进行加载,defining-对处理的主程序模块进行加载，并运行模块中的callback）当加载完成后，再进行模块化分析。

其中define定义中有个queue队列，把需要加载的小模块放入队列中，并于require 中的全局变量defined中的模块进行对比，然后判断；

如果全局defined定义了该模块，就实例化Module，调用其中的工厂模式，来改变当前模块的加载状态，然后从全局defined中移除该模块，该过程算完成。

否则是全局defined没有定义，则会调用makeModuleMap去定义，然后再实现前一种逻辑，直到修改完成状态。然后再去load其他文件，通道一直是队列的进进出出，直到所有文件加载完成并实例化。

这样讲难理解，源码不是几句话一篇文章能够说明白的。这只是我的一个理解方式，大家可以看看https://www.cnblogs.com/zhiyishou/p/4770013.html这篇文章，源码分析讲的通俗易懂