我们在日常开发过程中，可能有重复加载同一个资源例如: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. paip. mysql如何临时 暂时 禁用 关闭 触发器

    paip. mysql如何临时 暂时 禁用 关闭 触发器 作者Attilax ,  EMAIL:1466519819@qq.com  来源:attilax的专栏 地址:http://blog.csdn ...

  2. [React Native] Error Handling and ActivityIndicatorIOS

    With React Native you use ActivityIndicatorIOS to show or hide a spinner. In this lesson we combine ...

  3. CSS_使用css布局

    本文出自:http://blog.csdn.net/svitter 1.   创建一个HTML页面, 其内容为一个无序列表,列表中至少包括了5本畅销书,每本书之前的项目符号必须採用概述封面的缩略图.这 ...

  4. 合并两个vectcor——2013-08-26

    vector<int> v1; vector<int> v2; for(int i=0; i<5; i++) { v1.push_back(i); if(i%2==1) ...

  5. java中double四舍五入并设置小数点位数的问题

    本文系转载,原文地址:http://blog.csdn.net/star_huang/article/details/7639267 今天遇到个需要将一个double类型的数据保留小数点后两位的问题. ...

  6. Java基础知识强化之IO流笔记39：字符流缓冲流之复制文本文件案例01

    1. 字符流缓冲流之复制文本文件案例 需求:把当前项目目录下的a.txt内容复制到当前项目目录下的b.txt中 数据源: a.txt -- 读取数据 -- 字符转换流 -- InputStreamRe ...

  7. Mysql 数据库 操作语句

    mysql 格式语句规范 如何登陆你的数据库? 举例! 如果你的是 编译安装的花 那就得去编译安装后的那个目录中去,我的是安装到/usr/local/mysql 下登陆数据库:cd /usr/loca ...

  8. [整理]Oracle LOCK 机制

    数据库是一个多用户使用的共享资源.当多个用户并发地存取数据时,在数据库中就会产生多个事务同时存取同一数据的情况.若对并发操作不加控制就可能会读取和存储不正确的数据,破坏数据库的一致性.锁机制用于管理对 ...

  9. 通过ApplicationContextAwareSpring实现手工加载配置的javabean

    在做一个多线程的数据采集器实现的过程中,由于框架是集成srping,因此希望统一使用原有的数据库配置信息,但是需要手工获取数据库配置bean.我们可以通过继承ApplicationContextAwa ...

  10. netMVC 搭建Ucenter 同步登陆退出discuz

    先看一下效果