自己编写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);
自己编写jQuery动态引入js文件插件 (jquery.import.dynamic.script)的更多相关文章
- 1.在html中引入js文件和Jquery框架
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 使用Jquery promise 动态引入js文件
动态加载一个js得方式很多,如下方式: /** *一般方式加载 */ function normalLoadScript(url) { var node = document.createElemen ...
- 动态引入Js文件
var src = "/Scripts/Test.js"; $("<script type = 'text/javascript' src='" + sr ...
- jsp引入js文件
转自:http://blog.csdn.net/ppzhangj/article/details/7859628 1)引入的js文件出错, 检查方法:将Js的内容写在当前的页面的<script& ...
- 项目一:第四天 1、快递员的条件分页查询-noSession,条件查询 2、快递员删除(逻辑删除) 3、基于Apache POI实现批量导入区域数据 a)Jquery OCUpload上传文件插件使用 b)Apache POI读取excel文件数据
1. 快递员的条件分页查询-noSession,条件查询 2. 快递员删除(逻辑删除) 3. 基于Apache POI实现批量导入区域数据 a) Jquery OCUpload上传文件插件使用 b) ...
- vue脚手架使用swiper /引入js文件/引入css文件
1.安装vue-cli 参考地址:https://github.com/vuejs/vue-cli 如果不使用严格语法需要在后三项打no:(加了挺头疼的,老是报错,但是对自己的代码规范性也是有很大的帮 ...
- jQuery动态网格瀑布流插件Masonry
Masonry是一款非常强大的jQuery动态网格布局插件,可以帮助开发人员快速开发瀑布流界面效果.和CSS中float的效果不太一样的地方在于,float先水平排列,然后再垂直排列,使用Masonr ...
- 关于 ajax 动态返回数据 css 以及 js 失效问题(动态引入JS)
ajax 毕竟是异步的 所以动态加载出来的数据 难免遇到 css 或者 js 失效的问题,所以要动态加载 css ji等文件了 1.公共方法 load //动态加载 js /css function ...
- jquery.nicescroll.min.js滚动条插件的用法
1.jquery.nicescroll.min.js源码 /* jquery.nicescroll 3.6.8 InuYaksa*2015 MIT http://nicescroll.areaaper ...
随机推荐
- js-面试题之字符串
问题:输入两个字符串,从第一个字符串中删除第二个字符串中的所有字符串不可以使用replace<!--例如:输入"They are students" 和"aeiou ...
- JavaWeb总结(十)—文件上传和下载
一.文件的上传 1.文件的基本上传 对于文件上传,浏览器在上传的过程中是将文件以流的形式提交到服务器端的,如果直接使用Servlet获取上传文件的输入流然后再解析里面的请求参数是比较麻烦,所以一般选择 ...
- SystemVerilog搭建验证平台使用DPI时遇到的问题及解决方案
本文目的在于分享一下把DPI稿能用了的过程,主要说一下平台其他部分搭建好之后,在完成DPI相关工作阶段遇到的问题,以及解决的办法. 工作环境:win10 64bit, Questasim 10.1b ...
- css中auto的用法
—什么是auto? +auto是自适应的意思,auto是很多尺寸值的默认值,也就是由浏览器自动计算. +块级元素中margin.border.padding以及content宽度之和构成父元素widt ...
- Sitemesh 3 配置和使用(最新)
Sitemesh 3 配置和使用(最新) 一 Sitemesh简介 Sitemesh是一个页面装饰器,可以快速的创建有统一外观Web应用 -- 导航 加 布局 的统一方案~ Sitemesh可以拦截任 ...
- ios 获取当前ViewController
- (UIViewController*)getpresentVC:(UIWindow *)window{ if ([window.rootViewController class]==[UITabB ...
- js距离现在时间计算
<script language="javascript"> var biryear = 2015; var birmonth = 12; var birday = 1 ...
- javascript中json对象json数组json字符串互转及取值
今天用到了json数组和json对象和json类型字符串之间互转及取值,记录一下: 1.json类型的字符串转换为json对象及取值 var jsonString = '{"bar" ...
- 财付通API
开发财付通API的步骤: 1.首先开发财付通API时先获取商户号和密钥: 财付通测试号:商户号String partner = "1900000109";密钥String key ...
- CF #edu 11 C. Hard Process
题目链接:http://codeforces.com/problemset/problem/660/C 大意是给一个01数组,至多可以将k个0变为1,问最后数组中最长能有多少个连续的1,并输出. 问题 ...