自己编写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、导入一个文件

 // 导入一个文件
 $.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);