用JS实现避免重复加载相同js文件
我们在日常开发过程中，可能有重复加载同一个资源例如:1.js,为了提高性能和用户体验这里我们用原生JS实现同一个资源只加载一次。
下面是 common.js里的JS代码
//使用沙箱模式防止污染外面的变量
; (function () {
//让外面可以只能访问到require变量
window.require = require;
//定义一个加载模块的方法
function require(moduleName, callback) {
//创建加载模块的具体实现类
var requireHelper = new RequireHelper(moduleName, callback);
//调用加载模块类的load方法加载模块
requireHelper.load();
}
//存储已加载模块的信息
var moduleList = []; //创建一个实体类,给传进来的属性赋值
function RequireHelper(moduleName, callback) {
this.moduleName = moduleName;
this.callback = callback;
} //给模块加载实现类的原型添加方法
RequireHelper.prototype = {
//加载模块
load: function () {
var that = this;
var moduleName = that.moduleName;
if (that.isLoad()) {//模块已被加载(资源优化:已经请求的模块不要再次加载)
var moduleInfo = that.getModuleInfo();//获取模块的描述信息
if (moduleList.isLoad) {//如果模块资源已加载完成
that.callback();//可以放心的调用模块对应的回调函数
} else {//模块资源没加载完
var oldCallback = moduleInfo.callback;//取出之前的回调函数
moduleInfo.callback = function () {//追加回调函数
oldCallback();
that.callback();
};
}
} else {//模块没有加载
var script = document.createelement("script");
script.src = that.modulename;
document.getelementsbytagname("head")[0].appendchild(script);//加载模块
var moduleInfo = {
moduleName: that.moduleName, isLoad: false, callback: function () {
that.callback();
}
};//添加模块的描述信息
script.onload = function () {
moduleInfo.callback();//执行模块对应的回调函数
moduleInfo.isLoad = true;//标识模块资源被加载完成
}
}
},
//判断指定模块是否加载
isLoad: function () {
return this.getModuleInfo() == null ? false : true;
},
//根据模块名称获取模块信息
getModuleInfo: function () {
for (var i = 0; i < moduleList.length; i++) {
if (that.moduleName == moduleList[i].name) {
return moduleList;
}
}
return null;
}
}; })(window)
下面是xd1.js
function say() {
alert("111111");
}
下面是html代码
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
</head>
<body>
<script src="Common.js"></script>
<script type="text/javascript">
require("xd1.js", function () {
say();
});
require("xd1.js", function () {
alert(222);
});
</script>
</body>
</html>
这样的话，我们就可以避免了js资源的重复加载
用JS实现避免重复加载相同js文件的更多相关文章
- Resumable.js – 基于 HTML5 File API 的文件上传
Resumable.js 是一个 JavaScript 库,通过 HTML5 文件 API 提供,稳定和可恢复的批量上传功能.在上传大文件的时候通过每个文件分割成小块,每块在上传失败的时候,上传会不断 ...
- ASP.NET MVC 4 的JS/CSS打包压缩功能-------过滤文件
今天在使用MVC4打包压缩功能@Scripts.Render("~/bundles/jquery") 的时候产生了一些疑惑,问什么在App_Start文件夹下BundleConfi ...
- Node.js高级编程读书笔记 - 2 文件和进程处理
Outline 3 文件.进程.流和网络 3.1 查询和读写文件 3.2 创建和控制外部进程 3.3 读写数据流 3 文件.进程.流和网络 3.1 查询和读写文件 path 从Node 0.8起,pa ...
- node.js 使用 UglifyJS2 高效率压缩 javascript 文件
UglifyJS2 这个工具使用很长时间了,但之前都是在 gulp 自动构建 时用到了 UglifyJS 算法进行压缩. 最近玩了一下 UglifyJS2 ,做了一个 在线压缩javascript工具 ...
- 使用r.js来打包模块化的javascript文件
前面的话 r.js(下载)是requireJS的优化(Optimizer)工具,可以实现前端文件的压缩与合并,在requireJS异步按需加载的基础上进一步提供前端优化,减小前端文件大小.减少对服务器 ...
- 不带插件 ，自己写js，实现批量上传文件及进度显示
今天接受项目中要完成文件批量上传文件而且还要显示上传进度,一开始觉得这个应该不是很麻烦,当我在做的时候遇到了很多问题,很头疼啊. 不过看了别人写的代码,自己也测试过,发现网上好多都存在一些问题,并不是 ...
- [js高手之路]Node.js+jade抓取博客所有文章生成静态html文件
这个周末,恶补了一下jade模板引擎,就为生成静态html文件,这篇文章需要知道jade以及看过我的上篇文章,我先给出他们的参考链接: [js高手之路]Node.js模板引擎教程-jade速学与实战1 ...
- [js高手之路]Node.js+jade+mongodb+mongoose实现爬虫分离入库与生成静态文件
接着这篇文章[js高手之路]Node.js+jade抓取博客所有文章生成静态html文件继续,在这篇文章中实现了采集与静态文件的生成,在实际的采集项目中, 应该是先入库再选择性的生成静态文件.那么我选 ...
- js中使用showModelDialog中下载文件的时候，闪一下后无法下载
在js中使用showModelDialog中下载文件的时候,会因为showModelDialog自动设置target为_self导致下载文件“只会闪一下”就消失掉 在吧target设置为_blank后 ...
随机推荐
- mydumper工作原理 :myownstars专家
http://blog.itpub.net/15480802/viewspace-1465080/
- DNS 和 IPv6 配置攻略
Windows 2003 DNS配置攻略 http://lgzeng2360.blog.51cto.com/275998/161908/ http://ask.zol.com.cn/q/21861.h ...
- iOS数据处理之SQLite数据库
1. 数据库管理系统 1> SQL语言概述 SQL: SQL是Structured Query Language(结构化查询语言)的缩写.SQL是专为数据库而建立的操作命令集, 是一种功能齐全的 ...
- ZBLibrary不能运行的解决方法
ADT运行 右键ZBLibrary Demo > Run as > Android Application 可能出现部分错误,解决方案如下: 右键Project(这里为ZBLibrar ...
- the third assignment of software testing
没有网的日子不好过,Junit4下不下来,先用androidTestCase实现一个. 遇到了几个bug. 首先是除0问题. public void testDivide(){ result=calc ...
- Android Studio之could not reserve enough space for object heap
在用AndroidStudio时出现这样的错误: 每次创建工程后,在项目文件 gradle.properties文件中加入如下代码: org.gradle.jvmargs=-Xmx512m -XX: ...
- yii中的自定义组件
yii中的自定义组件(组件就是一些自定义的公用类) 1.在项目目录中的protected/components/Xxxx.php 2.在Xxxx.php中定义一个类,类名必须与文件名相同 3.控制器中 ...
- java 用eclipse j2ee写的servlet 程序，WEB-INF下的配置文件web.xml在哪啊？谢谢！
我用的版本是tomcat7.0,在webcontent\web-inf里只有一个空文件夹lib,写完servlet 类程序,就可以运行了,我想知道自动生成的配置文件在哪里?或者说从哪里能够看出来配置内 ...
- Linq 与UnitOfWork
submitchages(linq to sql)或者savechanges(ef)的次数是根据你操作方法的数量决定的,也即是:它只认识自己的提交语句(submtchanges,savechanges ...
- ASC码 .
有些时候需要用到一些字符的ASC码,到网上查找太麻烦,现在记录下来. 第128-255号为扩展字符(不常用) Dec Hx Oct Char Dec Hx Oct Char Dec Hx Oct ...