自己编写jQuery动态引入js文件插件 (jquery.import.dynamic.script)

这个插件主要是结合jquery或者xhr异步请求来使用的，它可以把已经引入过的js文件记录在浏览器内存中，当下次再引入相同的文件就忽略该文件的引入。

 

当你用$.load("dir/my-page.jsp"); 或xhr.request("server/to-my-page");等异步请求加载html页面的时候，在页面中导入js文件用本插件进行引入的话，

那么其他请求的页面中也导入了和前面页面相当的js文件的情况下，那这些js文件就不需要重新引入。插件会自动忽略之前已经引入过的文件，来节约开销加快速度。

 

此插件不支持浏览器刷新保存数据，那需要利用cookie来保存引入数据记录。这里只时候异步加载js文件的方式。

使用本插件必须先引入jquery，后再引入动态导入插件js文件。在不刷新页面的情况下，本插件导入的javascript只需用导入一次，后面都会使用上一次导入的缓存文件

下面简单说下插件用法，使用规则方法：

1、导入一个文件

1 // 导入一个文件
2 $.imports("${pageContext.request.contextPath }/statics/js/jquery.json/jquery.json.js");
3 //src=导入文件；delay=延迟200毫秒导入；参数once=表示每次都导入，忽略上次导入（大部分情况不需要设置）
4 $.imports({ src: "${pageContext.request.contextPath }/statics/js/jquery.json/jquery.json.js", delay: 200, once: false });

 

2、导入多个文件

1 // 导入多个文件
2 $.imports("dir/jquery.json.js", "dir/jquery.json2.js", ".....");
3 $.imports(["dir/jquery.json.js", "dir/jquery.json2.js", "....."]);

 1 导入多个js文件，额外加些配置
 2 $.imports([
 3     { src: "${pageContext.request.contextPath }/statics/js/jquery.json/jquery.json.js", delay: 200, once: false },
 4     { src: "${pageContext.request.contextPath }/statics/js/jquery.json/jquery.json.js", delay: 200 }
 5 ]);
 6 
 7 $.imports(
 8     "${ctxPath }/statics/js/jquery.raty.min.js",
 9      { src: "${ctxPath }/statics/js/student/appraise.js", once: false }
10 );

 

3、导入js文件完成后，执行回调函数

1 //支持回调，有回调函数的将使用同步导入。就是前面的javascript都会按顺序导入
2 $.imports("dir/jquery.json.js", "dir/jquery.json2.js", ".....", function () {
3     //call back
4 });

 

4、全部完整配置参数列表

 1 //完整参数
 2 $.imports({
 3     // 根路径    
 4     rootPath: ctxPath,
 5     scripts: [ {
 6         src: "js/1.js", // js路径
 7         delay: 10, // 延迟加载时间
 8         once: true // 是否导入一次，默认ture
 9     }, {
10         path: "js/2.js", // js路径
11         once: false // 是否导入一次，默认ture
12     } ],
13     // 全局延迟
14     delay: 100,
15     // 回调函数，如果需要的话。使用回调函数将进入同步模式
16     callback: function () {
17         //导入完成执行
18     },
19     // 是否开启缓存，默认开启
20     cache: true,
21     // 开启日志模式
22     debug: false
23 });

上面的同步模式是指js文件的引入顺序就是加载的顺序，因为有时候后面引入的js依赖前面的就是文件。如果不同步会有找不到变量、方法的问题。当然同步会影响性能，那没得说的。

 

庐山真面目，插件源码在此：

  View Code