自己编写jQuery动态引入js文件插件 (jquery.import.dynamic.script)
Posted hoojo
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了自己编写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依赖前面的就是文件。如果不同步会有找不到变量、方法的问题。当然同步会影响性能，那没得说的。
庐山真面目，插件源码在此：
1 /*** 2 * jquery.import.dynamic.script-debug.js plugin 3 * v1.1 4 * @createDate -- 2015-08-04 5 * @author hoojo 6 * @email [email protected] 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 if ($.type(item) === "string") { 51 item = { path: item, once: true }; 52 } else if ($.type(item) === "object") { 53 } else { 54 throw new Error("unknow params type!"); 55 } 56 57 var script = item.path || item.src; 58 var delay = item.delay || _options.delay; 59 var once = item.once === undefined ? true : item.once; 60 61 if (script) { 62 if (!~script.indexOf(_options.rootPath) && !~script.indexOf("http://")) { 63 script = _options.rootPath + script; 64 } 65 66 _options.log("================= import stack value ==================="); 67 _options.log(_options.importStack); 68 69 if (!_options.importStack[script] || !once) { 70 71 window.setTimeout(function () { 72 if (!$("scripts").get(0)) { 73 $("body:first").append("<scripts/>"); 74 } 75 76 if (call) { 77 _options.log("synchronize import script :" + script + ", delay import script: " + delay); 78 79 $.ajax({ 80 url: script, 81 dataType: "script", 82 cache: settings.cache || _options.cache, 83 async: true, 84 success: function () { 85 $("scripts").append(‘<import src="‘ + script + ‘"/>‘); 86 _options.importStack[script] = true; 87 if (scripts.length == 0) { 88 return call(); 89 } else { 90 importScript(settings, scripts, call); 91 } 92 } 93 }); 94 } else { 95 _options.log("asynchronous import script :" + script + ", delay import script: " + delay); 96 //$("scripts").append(‘<script src="‘ + script + ‘" type="text/javascript" charset="utf-8"></script> <import src="‘ + script + ‘"/>‘); 97 $.ajax({ 98 url: script, 99 dataType: "script", 100 cache: settings.cache || _options.cache, 101 async: true, 102 success: function () { 103 $("scripts").append(‘<import src="‘ + script + ‘"/>‘); 104 _options.importStack[script] = true; 105 } 106 }); 107 108 if (scripts.length == 0) { 109 return; 110 } else { 111 importScript(settings, scripts, null); 112 } 113 } 114 115 }, delay); 116 } else { 117 _options.log("exists script :" + script); 118 if (scripts.length == 0) { 119 if (call) return call(); 120 } else { 121 importScript(settings, scripts, call); 122 } 123 } 124 } 125 }; 126 127 // 提供jquery 插件方法 128 $.extend({ 129 imports: function (opts) { 130 131 _options.log("=================== opts ==================="); 132 _options.log(opts); 133 _options.log("=================== _options ==================="); 134 _options.log(_options); 135 136 var settings = {}; 137 if (arguments.length <= 1) { 138 var _type = $.type(opts); 139 if (_type === "string") { 140 $.extend(settings, _options); 141 settings.scripts.push(opts); 142 } else if (_type === "object") { 143 if (opts.scripts) { 144 $.extend(settings, _options, opts); 145 } else { 146 $.extend(settings, _options); 147 settings.scripts.push(opts); 148 } 149 } else if (_type === "array") { 150 $.extend(settings, _options, { scripts: opts }); 151 } else { 152 throw new Error("unknow data type!"); 153 } 154 } else { 155 var args = Array.prototype.slice.call(arguments); 156 if ($.type(args[args.length - 1]) === "function") { 157 var call = args.pop(); 158 $.extend(settings, _options, { scripts: args }); 159 settings.callback = call; 160 } else { 161 $.extend(settings, _options, { scripts: args }); 162 } 163 } 164 165 _options.log("=================== settings ==================="); 166 _options.log(settings); 167 _options.log("=================== _options ==================="); 168 _options.log(_options); 169 170 importScript(settings, settings.scripts, settings.callback); 171 } 172 }); 173 174 })(jQuery);
以上是关于自己编写jQuery动态引入js文件插件 (jquery.import.dynamic.script)的主要内容，如果未能解决你的问题，请参考以下文章