这个插件主要是结合jquery或者xhr异步请求来使用的，它可以把已经引入过的js文件记录在浏览器内存中，当下次再引入相同的文件就忽略该文件的引入。
当你用$.load("dir/my-page.jsp"); 或xhr.request("server/to-my-page");等异步请求加载html页面的时候，在页面中导入js文件用本插件进行引入的话，
那么其他请求的页面中也导入了和前面页面相当的js文件的情况下，那这些js文件就不需要重新引入。插件会自动忽略之前已经引入过的文件，来节约开销加快速度。
此插件不支持浏览器刷新保存数据，那需要利用cookie来保存引入数据记录。这里只时候异步加载js文件的方式。
使用本插件必须先引入jquery，后再引入动态导入插件js文件。在不刷新页面的情况下，本插件导入的javascript只需用导入一次，后面都会使用上一次导入的缓存文件
下面简单说下插件用法，使用规则方法：
1、导入一个文件
// 导入一个文件
$.imports("${pageContext.request.contextPath }/statics/js/jquery.json/jquery.json.js");
//src=导入文件；delay=延迟200毫秒导入；参数once=表示每次都导入，忽略上次导入（大部分情况不需要设置）
$.imports({ src: "${pageContext.request.contextPath }/statics/js/jquery.json/jquery.json.js", delay: 200, once: false });
2、导入多个文件
// 导入多个文件
$.imports("dir/jquery.json.js", "dir/jquery.json2.js", ".....");
$.imports(["dir/jquery.json.js", "dir/jquery.json2.js", "....."]);导入多个js文件，额外加些配置
$.imports([
{ src: "${pageContext.request.contextPath }/statics/js/jquery.json/jquery.json.js", delay: 200, once: false },
{ src: "${pageContext.request.contextPath }/statics/js/jquery.json/jquery.json.js", delay: 200 }
]); $.imports(
"${ctxPath }/statics/js/jquery.raty.min.js",
{ src: "${ctxPath }/statics/js/student/appraise.js", once: false }
);
3、导入js文件完成后，执行回调函数
//支持回调，有回调函数的将使用同步导入。就是前面的javascript都会按顺序导入
$.imports("dir/jquery.json.js", "dir/jquery.json2.js", ".....", function () {
//call back
});
4、全部完整配置参数列表
//完整参数
$.imports({
// 根路径
rootPath: ctxPath,
scripts: [ {
src: "js/1.js", // js路径
delay: 10, // 延迟加载时间
once: true // 是否导入一次，默认ture
}, {
path: "js/2.js", // js路径
once: false // 是否导入一次，默认ture
} ],
// 全局延迟
delay: 100,
// 回调函数，如果需要的话。使用回调函数将进入同步模式
callback: function () {
//导入完成执行
},
// 是否开启缓存，默认开启
cache: true,
// 开启日志模式
debug: false
});上面的同步模式是指js文件的引入顺序就是加载的顺序，因为有时候后面引入的js依赖前面的就是文件。如果不同步会有找不到变量、方法的问题。当然同步会影响性能，那没得说的。
庐山真面目，插件源码在此：
/***
* jquery.import.dynamic.script-debug.js plugin
* v1.1
* @createDate -- 2015-08-04
* @author hoojo
* @email hoojo_@126.com
* @requires jQuery v1.8.3 or later
* Copyright (c) 2015 M. hoojo
* Dual licensed under the MIT and GPL licenses:
* http://blog.csdn.net/IBM_hoojo
**/
;(function ($) { var defaultOptions = {
// 根路径
rootPath: (function () {
var path = ctxPath || window.location.host + "/eduyun/";
return path;
})(),
scripts: [ {
path: "", // js路径
src: "", // js路径
delay: 0, // 延迟加载时间
once: true // 是否导入一次，默认ture
} ],
// 导入过的历史记录值栈
importStack: {},
// 全局延迟
delay: 0,
// 回调函数，如果需要的话。使用回调函数将进入同步模式
callback: null,
// 是否开启缓存，默认开启
cache: false,
// 开启日志模式
debug: false,
log: function (msg) {
if (defaultOptions.debug) {
console.log(msg);
}
}
}; var _options = defaultOptions;
_options.scripts = new Array(); // 动态导入JavaScript核心代码
var importScript = function (settings, scripts, call) { var item = scripts.shift(); if ($.type(item) === "string") {
item = { path: item, once: true };
} else if ($.type(item) === "object") {
} else {
throw new Error("unknow params type!");
} var script = item.path || item.src;
var delay = item.delay || _options.delay;
var once = item.once === undefined ? true : item.once; if (script) {
if (!~script.indexOf(_options.rootPath) && !~script.indexOf("http://")) {
script = _options.rootPath + script;
} _options.log("================= import stack value ===================");
_options.log(_options.importStack); if (!_options.importStack[script] || !once) { window.setTimeout(function () {
if (!$("scripts").get(0)) {
$("body:first").append("<scripts/>");
} if (call) {
_options.log("synchronize import script :" + script + ", delay import script: " + delay); $.ajax({
url: script,
dataType: "script",
cache: settings.cache || _options.cache,
async: true,
success: function () {
$("scripts").append('<import src="' + script + '"/>');
_options.importStack[script] = true;
if (scripts.length == 0) {
return call();
} else {
importScript(settings, scripts, call);
}
}
});
} else {
_options.log("asynchronous import script :" + script + ", delay import script: " + delay);
//$("scripts").append('<script src="' + script + '" type="text/javascript" charset="utf-8"></script> <import src="' + script + '"/>');
$.ajax({
url: script,
dataType: "script",
cache: settings.cache || _options.cache,
async: true,
success: function () {
$("scripts").append('<import src="' + script + '"/>');
_options.importStack[script] = true;
}
}); if (scripts.length == 0) {
return;
} else {
importScript(settings, scripts, null);
}
} }, delay);
} else {
_options.log("exists script :" + script);
if (scripts.length == 0) {
if (call) return call();
} else {
importScript(settings, scripts, call);
}
}
}
}; var mergeScripts = function (args) {
var scripts = [];
for (var i = 0; i < args.length; i++) {
if ($.type(args[i]) === "array") {
scripts = scripts.concat(args[i]);
} else {
scripts.push(args[i]);
}
} return scripts;
}; // 提供jquery 插件方法
$.extend({
imports: function (opts) { _options.log("=================== opts ===================");
_options.log(opts);
_options.log("=================== _options ===================");
_options.log(_options); var settings = {};
if (arguments.length <= 1) {
var _type = $.type(opts);
if (_type === "string") {
$.extend(settings, _options);
settings.scripts.push(opts);
} else if (_type === "object") {
if (opts.scripts) {
$.extend(settings, _options, opts);
} else {
$.extend(settings, _options);
settings.scripts.push(opts);
}
} else if (_type === "array") {
$.extend(settings, _options, { scripts: opts });
} else {
throw new Error("unknow data type!");
}
} else {
var args = Array.prototype.slice.call(arguments);
if ($.type(args[args.length - 1]) === "function") {
var call = args.pop();
var scripts = mergeScripts(args);
$.extend(settings, _options, { scripts: scripts });
settings.callback = call;
} else {
var scripts = mergeScripts(args);
$.extend(settings, _options, { scripts: scripts });
}
} _options.log("=================== settings ===================");
_options.log(settings);
_options.log("=================== _options ===================");
_options.log(_options); importScript(settings, settings.scripts, settings.callback);
}
}); })(jQuery);