这个插件主要是结合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依赖前面的就是文件。如果不同步会有找不到变量、方法的问题。当然同步会影响性能,那没得说的。

庐山真面目,插件源码在此:

  1. /***
  2. * jquery.import.dynamic.script-debug.js plugin
  3. * v1.1
  4. * @createDate -- 2015-08-04
  5. * @author hoojo
  6. * @email hoojo_@126.com
  7. * @requires jQuery v1.8.3 or later
  8. * Copyright (c) 2015 M. hoojo
  9. * Dual licensed under the MIT and GPL licenses:
  10. * http://blog.csdn.net/IBM_hoojo
  11. **/
  12. ;(function ($) {
  13.  
  14. var defaultOptions = {
  15. // 根路径
  16. rootPath: (function () {
  17. var path = ctxPath || window.location.host + "/eduyun/";
  18. return path;
  19. })(),
  20. scripts: [ {
  21. path: "", // js路径
  22. src: "", // js路径
  23. delay: 0, // 延迟加载时间
  24. once: true // 是否导入一次,默认ture
  25. } ],
  26. // 导入过的历史记录值栈
  27. importStack: {},
  28. // 全局延迟
  29. delay: 0,
  30. // 回调函数,如果需要的话。使用回调函数将进入同步模式
  31. callback: null,
  32. // 是否开启缓存,默认开启
  33. cache: false,
  34. // 开启日志模式
  35. debug: false,
  36. log: function (msg) {
  37. if (defaultOptions.debug) {
  38. console.log(msg);
  39. }
  40. }
  41. };
  42.  
  43. var _options = defaultOptions;
  44. _options.scripts = new Array();
  45.  
  46. // 动态导入JavaScript核心代码
  47. var importScript = function (settings, scripts, call) {
  48.  
  49. var item = scripts.shift();
  50.  
  51. if ($.type(item) === "string") {
  52. item = { path: item, once: true };
  53. } else if ($.type(item) === "object") {
  54. } else {
  55. throw new Error("unknow params type!");
  56. }
  57.  
  58. var script = item.path || item.src;
  59. var delay = item.delay || _options.delay;
  60. var once = item.once === undefined ? true : item.once;
  61.  
  62. if (script) {
  63. if (!~script.indexOf(_options.rootPath) && !~script.indexOf("http://")) {
  64. script = _options.rootPath + script;
  65. }
  66.  
  67. _options.log("================= import stack value ===================");
  68. _options.log(_options.importStack);
  69.  
  70. if (!_options.importStack[script] || !once) {
  71.  
  72. window.setTimeout(function () {
  73. if (!$("scripts").get(0)) {
  74. $("body:first").append("<scripts/>");
  75. }
  76.  
  77. if (call) {
  78. _options.log("synchronize import script :" + script + ", delay import script: " + delay);
  79.  
  80. $.ajax({
  81. url: script,
  82. dataType: "script",
  83. cache: settings.cache || _options.cache,
  84. async: true,
  85. success: function () {
  86. $("scripts").append('<import src="' + script + '"/>');
  87. _options.importStack[script] = true;
  88. if (scripts.length == 0) {
  89. return call();
  90. } else {
  91. importScript(settings, scripts, call);
  92. }
  93. }
  94. });
  95. } else {
  96. _options.log("asynchronous import script :" + script + ", delay import script: " + delay);
  97. //$("scripts").append('<script src="' + script + '" type="text/javascript" charset="utf-8"></script> <import src="' + script + '"/>');
  98. $.ajax({
  99. url: script,
  100. dataType: "script",
  101. cache: settings.cache || _options.cache,
  102. async: true,
  103. success: function () {
  104. $("scripts").append('<import src="' + script + '"/>');
  105. _options.importStack[script] = true;
  106. }
  107. });
  108.  
  109. if (scripts.length == 0) {
  110. return;
  111. } else {
  112. importScript(settings, scripts, null);
  113. }
  114. }
  115.  
  116. }, delay);
  117. } else {
  118. _options.log("exists script :" + script);
  119. if (scripts.length == 0) {
  120. if (call) return call();
  121. } else {
  122. importScript(settings, scripts, call);
  123. }
  124. }
  125. }
  126. };
  127.  
  128. var mergeScripts = function (args) {
  129. var scripts = [];
  130. for (var i = 0; i < args.length; i++) {
  131. if ($.type(args[i]) === "array") {
  132. scripts = scripts.concat(args[i]);
  133. } else {
  134. scripts.push(args[i]);
  135. }
  136. }
  137.  
  138. return scripts;
  139. };
  140.  
  141. // 提供jquery 插件方法
  142. $.extend({
  143. imports: function (opts) {
  144.  
  145. _options.log("=================== opts ===================");
  146. _options.log(opts);
  147. _options.log("=================== _options ===================");
  148. _options.log(_options);
  149.  
  150. var settings = {};
  151. if (arguments.length <= 1) {
  152. var _type = $.type(opts);
  153. if (_type === "string") {
  154. $.extend(settings, _options);
  155. settings.scripts.push(opts);
  156. } else if (_type === "object") {
  157. if (opts.scripts) {
  158. $.extend(settings, _options, opts);
  159. } else {
  160. $.extend(settings, _options);
  161. settings.scripts.push(opts);
  162. }
  163. } else if (_type === "array") {
  164. $.extend(settings, _options, { scripts: opts });
  165. } else {
  166. throw new Error("unknow data type!");
  167. }
  168. } else {
  169. var args = Array.prototype.slice.call(arguments);
  170. if ($.type(args[args.length - 1]) === "function") {
  171. var call = args.pop();
  172. var scripts = mergeScripts(args);
  173. $.extend(settings, _options, { scripts: scripts });
  174. settings.callback = call;
  175. } else {
  176. var scripts = mergeScripts(args);
  177. $.extend(settings, _options, { scripts: scripts });
  178. }
  179. }
  180.  
  181. _options.log("=================== settings ===================");
  182. _options.log(settings);
  183. _options.log("=================== _options ===================");
  184. _options.log(_options);
  185.  
  186. importScript(settings, settings.scripts, settings.callback);
  187. }
  188. });
  189.  
  190. })(jQuery);

自己编写jQuery动态引入js文件插件 (jquery.import.dynamic.script)的更多相关文章

  1. 1.在html中引入js文件和Jquery框架

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. 使用Jquery promise 动态引入js文件

    动态加载一个js得方式很多,如下方式: /** *一般方式加载 */ function normalLoadScript(url) { var node = document.createElemen ...

  3. 动态引入Js文件

    var src = "/Scripts/Test.js"; $("<script type = 'text/javascript' src='" + sr ...

  4. jsp引入js文件

    转自:http://blog.csdn.net/ppzhangj/article/details/7859628 1)引入的js文件出错, 检查方法:将Js的内容写在当前的页面的<script& ...

  5. 项目一:第四天 1、快递员的条件分页查询-noSession,条件查询 2、快递员删除(逻辑删除) 3、基于Apache POI实现批量导入区域数据 a)Jquery OCUpload上传文件插件使用 b)Apache POI读取excel文件数据

    1. 快递员的条件分页查询-noSession,条件查询 2. 快递员删除(逻辑删除) 3. 基于Apache POI实现批量导入区域数据 a) Jquery OCUpload上传文件插件使用 b) ...

  6. vue脚手架使用swiper /引入js文件/引入css文件

    1.安装vue-cli 参考地址:https://github.com/vuejs/vue-cli 如果不使用严格语法需要在后三项打no:(加了挺头疼的,老是报错,但是对自己的代码规范性也是有很大的帮 ...

  7. jQuery动态网格瀑布流插件Masonry

    Masonry是一款非常强大的jQuery动态网格布局插件,可以帮助开发人员快速开发瀑布流界面效果.和CSS中float的效果不太一样的地方在于,float先水平排列,然后再垂直排列,使用Masonr ...

  8. 关于 ajax 动态返回数据 css 以及 js 失效问题(动态引入JS)

    ajax 毕竟是异步的 所以动态加载出来的数据 难免遇到 css 或者 js 失效的问题,所以要动态加载 css ji等文件了 1.公共方法 load //动态加载 js /css function ...

  9. jquery.nicescroll.min.js滚动条插件的用法

    1.jquery.nicescroll.min.js源码 /* jquery.nicescroll 3.6.8 InuYaksa*2015 MIT http://nicescroll.areaaper ...

随机推荐

  1. js-面试题之字符串

    问题:输入两个字符串,从第一个字符串中删除第二个字符串中的所有字符串不可以使用replace<!--例如:输入"They are students" 和"aeiou ...

  2. JavaWeb总结(十)—文件上传和下载

    一.文件的上传 1.文件的基本上传 对于文件上传,浏览器在上传的过程中是将文件以流的形式提交到服务器端的,如果直接使用Servlet获取上传文件的输入流然后再解析里面的请求参数是比较麻烦,所以一般选择 ...

  3. SystemVerilog搭建验证平台使用DPI时遇到的问题及解决方案

    本文目的在于分享一下把DPI稿能用了的过程,主要说一下平台其他部分搭建好之后,在完成DPI相关工作阶段遇到的问题,以及解决的办法. 工作环境:win10 64bit, Questasim 10.1b ...

  4. css中auto的用法

    —什么是auto? +auto是自适应的意思,auto是很多尺寸值的默认值,也就是由浏览器自动计算. +块级元素中margin.border.padding以及content宽度之和构成父元素widt ...

  5. Sitemesh 3 配置和使用(最新)

    Sitemesh 3 配置和使用(最新) 一 Sitemesh简介 Sitemesh是一个页面装饰器,可以快速的创建有统一外观Web应用 -- 导航 加 布局 的统一方案~ Sitemesh可以拦截任 ...

  6. ios 获取当前ViewController

    - (UIViewController*)getpresentVC:(UIWindow *)window{ if ([window.rootViewController class]==[UITabB ...

  7. js距离现在时间计算

    <script language="javascript"> var biryear = 2015; var birmonth = 12; var birday = 1 ...

  8. javascript中json对象json数组json字符串互转及取值

    今天用到了json数组和json对象和json类型字符串之间互转及取值,记录一下: 1.json类型的字符串转换为json对象及取值 var jsonString = '{"bar" ...

  9. 财付通API

    开发财付通API的步骤: 1.首先开发财付通API时先获取商户号和密钥: 财付通测试号:商户号String partner = "1900000109";密钥String key ...

  10. CF #edu 11 C. Hard Process

    题目链接:http://codeforces.com/problemset/problem/660/C 大意是给一个01数组,至多可以将k个0变为1,问最后数组中最长能有多少个连续的1,并输出. 问题 ...