我们在日常开发过程中，可能有重复加载同一个资源例如: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代码
require("xd1.js", function () {
say();
});
require("xd1.js", function () {
alert(222);
});
这样的话，我们就可以避免了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后 ...
随机推荐
Express+mysql的博客(1)
学了东西一定要自己上手试过才知道是不是真的会了.一直想练练node的使用,本来也没有什么好想法的,经同学提醒了一下,发现其实我可以用node写一个博客.我同学说工作量会非常之大╮(╯_╰)╭那也得先试 ...
Instant Python 中文缩减版
前言 本文主要来自([挪]Magnus Lie Hetland著,司维 曾军崴 谭颖华译 人民邮电出版社) 中的“附录A 简明版本”,对于其中的有问题之处 ...
《think in python》学习-5
think in python -5 think in python -5 条件和递归 求模操作符% 用于整数,可以计算出第一个操作数除以第二个操作数的余数 7%3 #结果是2 求模操作符%有很多用途 ...
Django 系列博客(八)
Django 系列博客(八) 前言 本篇博客介绍 Django 中的模板层,模板都是Django 使用相关函数渲染后传输给前端在显式的,为了想要渲染出我们想要的数据,需要学习模板语法,相关过滤器.标签 ...
linux之测试硬盘速度篇
作业三:dd命令测试硬盘速度 [root@localhost 桌面]# dd if=/dev/sdc2 of=/a.txt bs=2M count=2 记录了0+1 的读入 记录了0+1 的写出 10 ...
openstack之Neutron网络模式vlan，gre，vxlan详解
第一:neutron openvswitch + vlan虚拟网络 一:基础知识 vlan基础知识 1.vlan介绍 1.1:首先说下lan,LAN 表示 Local Area Network,本地局 ...
将文件夹中的图像路径自动生成txt文件(便于opencv遍历处理图像)
代码: #include #include #include #include usi ...
PHP官方文档和phpstorm配置指南
http://cn2.php.net/manual/zh/ phpstorm安装——>next——>…… 下载PHP.exe 地址:http://www.php.net/ 配置interp ...
Python数据类型补充1
一.可变和不可变类型 可变类型: 值变了,但是id没有变,证明没有生成新的值而是在改变原值,原值是可变类型 不可变类型:值变了,id也跟着变,证明是生成了新的值而不是在改变原值,原值是不可变 # x= ...
python文本 字符与字符值转换
python文本 字符与字符值转换 场景: 将字符转换成ascii或者unicode编码 在转换过程中,注意使用ord和chr方法 >>> print(ord('a')) 97 ...