用JS实现避免重复加载相同js文件

浏览数：58 / 时间：2015年06月09日

我们在日常开发过程中，可能有重复加载同一个资源例如: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资源的重复加载