用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文件

相关文章