最近项目使用了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>
有几点需要说明
- 属性‘data-main’中的js代表需要加载的主程序
- 属性‘data-main’中的js关联了几个js,当前页面载入就按js关联了多少按需加载,节约请求次数,避免宽带资源浪费
- 主程序的写法很灵活
第一种写法 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这篇文章,源码分析讲的通俗易懂