动态导入Js文件
var ScriptLoader = {
worker: ,
isWait: false,
readyQueue: [],
callback: [],
timer: null,
wait: function () {
if (!this._isComplateTask()) {
this.isWait = true;
this.readyQueue.unshift('wait');
}
//console.log('wait is true');
return this;
},
_isComplateTask: function () {
return this.worker === ;
},
loadJs: function (url, async, callback) {
console.log('load js ' + url);
if (this.isWait) {
// 将js加载到队列
this.readyQueue.unshift(url);
this.callback.unshift(callback);
if (!this.timer) {
// 定时处理队列
var that = this;
this.timer = setInterval(function () {
if (that.readyQueue.length === ) {
// 队列消费完, 清除定时器
clearInterval(that.timer);
that.timer = null;
} else if (that._isComplateTask()) {
that._loadReady();
}
}, );
}
} else {
this._realLoad(url, async, callback);
}
return this;
},
/**
* 消费队列
*/
_loadReady: function () {
var url;
while (this.readyQueue.length > ) {
url = this.readyQueue.pop();
if (url === 'wait') {
if (!this._isComplateTask()) {
this.isWait = true;
break;
}
} else {
this._realLoad(url, true, this.callback.pop());
}
}
},
_realLoad: function (url, async, callback) {
this.worker++;
var that = this;
console.log('start load js ' + url);
this._loadJsFile(url, function () {
that.worker--;
if (that.worker === ) {
//console.log('wait is false');
that.isWait = false;
}
if(callback){
callback();
}
}, async);
},
_loadJsFile: function (file, callback, async) {
var head, d = document;
((head = d.getElementsByTagName('head')[]) || (head = d.body.parentNode.appendChild(d.createElement("head"))));
var script = d.createElement("script");
script.type = "text/javascript";
script.src = file;
script.charset = 'UTF-8';
if (async) {
script.async = true;
}
if (script.readyState) {//IE
script.onreadystatechange = function () {
if (script.readyState === "loaded" || script.readyState === "complete") {
script.onreadystatechange = null;
callback();
}
};
} else {//其他浏览器
script.onload = function () {
callback();
};
}
head.appendChild(script);
}
};

动态导入Js文件的更多相关文章
- 自己编写jQuery动态引入js文件插件 (jquery.import.dynamic.script)
这个插件主要是结合jquery或者xhr异步请求来使用的,它可以把已经引入过的js文件记录在浏览器内存中,当下次再引入相同的文件就忽略该文件的引入. 此插件不支持浏览器刷新保存数据,那需要利用cook ...
- Extjs学习----------动态载入js文件(减轻浏览器的压力)
动态载入js文件能够减轻浏览器的压力,本例使用了Ext.window.Window组件,该组件的学习地址:http://blog.csdn.net/z1137730824/article/detail ...
- 为了提高性能,怎样动态载入JS文件
超级表格是一款多人协作的在线表格.程序相当复杂,用到十几个JS文件. 可是有些文件是在打开某些类型的表格时才须要载入. 比如,仅仅有当打开甘特图表格时,才须要载入gantetu.js文件. 那么问题来 ...
- asp.net后台代码动态添加JS文件和css文件的引用
首先添加命名空间 using System.Web.UI.HtmlControls; 代码动态添加css文件的引用 HtmlGenericControl myCss = new HtmlGeneric ...
- vue中如何在本地导入js文件
import {setStore,setUser,getStore,removeStore} from "../../../public/localstory" 在导入js文件时, ...
- Boostrap本地导入js文件
我一般都是用CDN直接导入的,但是有时候需要自己添加一些功能进入,会用到本地导入.关于导入路径问题,做个笔记. 使用HBuilder,首先右键导入相应的js/cs文件 然后是常规——>文件系统 ...
- 动态添加js文件.
方法一: $.getScript(url,callback); 这个方法是对$.ajax({ })的封装.默认是异步的而且是带有缓存的. 缓存对于用户来说,是个好东西,但是对于开发者来说可就是日了狗的 ...
- 动态添加JS文件到页面
/*** ** 功能: 加载外部JS文件,加载完成后执行回调函数callback ***/ var utools = { config: { id: "", url: " ...
- jquery----语法扩展(导入js文件)
简单使用 第一步,新建js文件 第二步,在js文件中添加 $.extend({ "GDP": function () { console.log("哈哈哈哈") ...
随机推荐
- CentOS7.4用yum安装并配置MySQL5.7
1.配置YUM源 下载MySQL源安装包 wget http://dev.mysql.com/get/mysql57-community-release-el7-8.noarch.rpm 安装MySQ ...
- kafka知识点
一.为什么需要消息系统 1.解耦: 允许你独立的扩展或修改两边的处理过程,只要确保它们遵守同样的接口约束. 2.冗余: 消息队列把数据进行持久化直到它们已经被完全处理,通过这一方式规避了数据丢失风险. ...
- Unity---在Hierarchy视图中将选中的对象的层级目录复制到剪切板
using UnityEditor; using UnityEngine; public class ObjPathCopyTool : ScriptableObject { [MenuItem(&q ...
- 第 10 章 容器监控 - 078 - Docker 最常用的监控方案
Docker 最常用的监控方案 当 Docker 部署规模逐步变大后,可视化监控容器环境的性能和健康状态将会变得越来越重要. Docker 自带的几个监控子命令: ps .top .stats 功能更 ...
- 三年磨一剑,robot framework 自动化测试框架核心指南,真正讲透robot framework自动化测试框架(笔者新书上架)。
序 关于自动化测试的工具和框架其实有很多.自动化测试在测试IT行业中扮演着越来越重要的角色,不管是在传统的IT行业还是高速发展的互联网行业或是如今的大数据和大热的人工智能领域,都离不开测试,也更加离不 ...
- 从零开始,搭建 AI 音箱 Alexa 语音服务
https://blog.csdn.net/gitchat/article/details/78869367
- springboot killed springboot 无故停止运行解决办法
测试环境的服务部署在阿里云服务器上,运行一段时间总是自动宕掉,在配置文件里加上内存溢出配置,也不能打印出相关日志,一直找不出原因.今天在网上:http://www.cnblogs.com/chener ...
- 客户端与服务器之间通信收不到信息——readLine()
写服务器端和客户端之间通信,结果一直读取不到信息,在https://blog.csdn.net/yiluxiangqian7715/article/details/50173573 上找到了原因:使用 ...
- Vue 知识整理—01-基础
一:Vue是什么? Vue是一个JS框架. Vue.js是一套构建用户界面的渐进式框架. 库和框架的区别: ☞库:提供一些 API 工具函数,体现了封装的思想,需要我们主动调用: ☞框架:提供一套完整 ...
- JavaJ2EE相关知识整理
1.Servlet的生命周期 在Web容器中,Servlet主要经历4个阶段 ①.加载Servlet:当Tomcat第一次访问Servlet的时候,Tomcat会负责创建Servle ...