我们在日常开发过程中，可能有重复加载同一个资源例如: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资源的重复加载
时间： 2024-10-11 06:14:40