用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后 ...
随机推荐
- mysql选择联合索引还是单索引？索引列应该使用哪一个最有效？深入測试探讨
先建表 CREATE TABLE `menu_employee` ( `Id` int(11) NOT NULL AUTO_INCREMENT COMMENT '自增主键,无实际意义', `emplo ...
- android104 帧动画，补间动画，属性动画
##帧动画FrameAnimation* 多张图片快速切换,形成动画效果* 帧动画使用xml定义 package com.itheima.frameanimation; import android. ...
- 【转】hibernate.hbm.xml详解
在Hibernate中,各表的映射文件….hbm.xml可以通过工具生成,例如在使用MyEclipse开发时,它提供了自动生成映射文件的工具.配置文件的基本结构如下: Xml代码 <?xmlve ...
- Android和Java的轻巧Wire协议缓冲器
Wire协议缓冲器 一个人必须有一个代码! -奥马尔小 由于我们的团队和项目增长,数据的种类和数量也随之增加. 成功将您简单的数据模型转换为复杂的! 无论您的应用程序将数据存储到磁盘或网络传送信号,该 ...
- 使用CocoaPods遇到的几个坑,记录一下
最近使用pod的时候升级到1.0.0版本后遇到一些坑,整理一下 首先是CocoaPods报错:The dependency `` is not used in any concrete target ...
- Ubuntu 12.04安装PPTP
1.安装软件 sudo apt-get install pptpd ufw 2.编辑/etc/ppp/pptpd-options 找到 refuse-pap refuse-chap refuse-ms ...
- RAC分解步骤之一，在oracle linux 4u4上安装oracle 10.2.0.1.0操作日志
练习oracle的rac组建过程,第一步,先练习4u4上安装oracle 10.2.0.1.0.直接安装rac,有些难度.从简单的做起.总RAC步骤,参照小布老师的RAC组建. 1. 启动vc,登陆v ...
- 从零基础到App Store
- html-----009
</head> <!-- 通过使用框架,你可以在同一个浏览器窗口中显示不止一个页面. <p> 垂直框架</p> 本例演示:如何使用三份不同的文档制作一个垂直框 ...
- sublime_text编辑器下载安装使用
1.sublime_text下载 https://www.sublimetext.com/3 (选择相对应的版本) 2.通过package control安装插件 https://packagec ...