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

  1. Resumable.js – 基于 HTML5 File API 的文件上传

    Resumable.js 是一个 JavaScript 库,通过 HTML5 文件 API 提供,稳定和可恢复的批量上传功能.在上传大文件的时候通过每个文件分割成小块,每块在上传失败的时候,上传会不断 ...

  2. ASP.NET MVC 4 的JS/CSS打包压缩功能-------过滤文件

    今天在使用MVC4打包压缩功能@Scripts.Render("~/bundles/jquery") 的时候产生了一些疑惑,问什么在App_Start文件夹下BundleConfi ...

  3. Node.js高级编程读书笔记 - 2 文件和进程处理

    Outline 3 文件.进程.流和网络 3.1 查询和读写文件 3.2 创建和控制外部进程 3.3 读写数据流 3 文件.进程.流和网络 3.1 查询和读写文件 path 从Node 0.8起,pa ...

  4. node.js 使用 UglifyJS2 高效率压缩 javascript 文件

    UglifyJS2 这个工具使用很长时间了,但之前都是在 gulp 自动构建 时用到了 UglifyJS 算法进行压缩. 最近玩了一下 UglifyJS2 ,做了一个 在线压缩javascript工具 ...

  5. 使用r.js来打包模块化的javascript文件

    前面的话 r.js(下载)是requireJS的优化(Optimizer)工具,可以实现前端文件的压缩与合并,在requireJS异步按需加载的基础上进一步提供前端优化,减小前端文件大小.减少对服务器 ...

  6. 不带插件 ，自己写js，实现批量上传文件及进度显示

    今天接受项目中要完成文件批量上传文件而且还要显示上传进度,一开始觉得这个应该不是很麻烦,当我在做的时候遇到了很多问题,很头疼啊. 不过看了别人写的代码,自己也测试过,发现网上好多都存在一些问题,并不是 ...

  7. [js高手之路]Node.js+jade抓取博客所有文章生成静态html文件

    这个周末,恶补了一下jade模板引擎,就为生成静态html文件,这篇文章需要知道jade以及看过我的上篇文章,我先给出他们的参考链接: [js高手之路]Node.js模板引擎教程-jade速学与实战1 ...

  8. [js高手之路]Node.js+jade+mongodb+mongoose实现爬虫分离入库与生成静态文件

    接着这篇文章[js高手之路]Node.js+jade抓取博客所有文章生成静态html文件继续,在这篇文章中实现了采集与静态文件的生成,在实际的采集项目中, 应该是先入库再选择性的生成静态文件.那么我选 ...

  9. js中使用showModelDialog中下载文件的时候，闪一下后无法下载

    在js中使用showModelDialog中下载文件的时候,会因为showModelDialog自动设置target为_self导致下载文件“只会闪一下”就消失掉 在吧target设置为_blank后 ...

随机推荐

  1. [React] React Fundamentals: Mixins

    Mixins will allow you to apply behaviors to multiple React components. Components are the best way t ...

  2. 读完了csapp(中文名：深入理解计算机系统)

    上个星期最终把csapp看完了. 我买的是中文版的,由于除了貌似评价不错以外,由于涉及到些自己不了解的底层东西,怕是看英文会云里雾里.如今看来,大概不能算是个长处,可是的确可以加快我的看书速度,否则一 ...

  3. 常用加密算法的Java实现总结(二) ——对称加密算法DES、3DES和AES

    1.对称加密算法 1.1 定义 对称加密算法是应用较早的加密算法,技术成熟.在对称加密算法中,数据发信方将明文(原始数据)和加密密钥(mi yue)一起经过特殊加密算法处理后,使其变成复杂的加密密文发 ...

  4. Node.js&NPM的安装与配置(转)

    Node.js安装与配置 Node.js已经诞生两年有余,由于一直处于快速开发中,过去的一些安装配置介绍多数针对0.4.x版本而言的,并非适合最新的0.6.x的版本 情况了,对此,我们将在0.6.x的 ...

  5. 数扰结构-visualization

    http://www.cs.usfca.edu/~galles/visualization/Algorithms.html?url_type=39&object_type=webpage&am ...

  6. How to let gedit of linux display "space"

    gedit--> preference --> check "draw spaces" . Then gedit  will display spaces

  7. maven项目在tomcat中运行遇到的问题

    在使用maven构建项目,并在tomcat容器中运行的时候遇到了一些问题,现做一下记录 maven项目中jdk版本会自动恢复 maven项目的编译jdk即使在window -> java -&g ...

  8. Scala闭包

    假如我们定义如下的函数: (x:Int) => x + more 这里我们引入一个自由变量more.它不是所定义函数的参数,而这个变量定义在函数外面,比如: var more =1 那么我们有如 ...

  9. 系统监控、诊断工具之top

    大家对top 命令可能不会陌生,它的作用主要用来监控系统实时负载率.进程的资源占用率及其它各项系统状态属性是否正常. top命令的截图如下: (1)系统.任务统计信息: 前8行是系统整体的统计信息.第 ...

  10. My97DatePicker 没有权限问题

    引自:http://blog.sina.com.cn/s/blog_4b7809800100wkv4.html 今天遇到了My97DatePicker在不同IE版本中使用时有时出现没有权限错误的问题, ...