我们在日常开发过程中，可能有重复加载同一个资源例如: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. 标准I/O库之打开和关闭流

    下列三个函数打开一个标准I/O流. #include <stdio.h> FILE *fopen( const char *restrict pathname, const char *r ...

  2. Android 自定义View修炼-仿QQ5.0 的侧滑菜单效果的实现

    有一段时间没有写博客了,最近比较忙,没什么时间写,刚好今天有点时间, 我就分享下,侧滑菜单的实现原理,一般android侧滑的实现原理和步骤如下:(源码下载在下面最后给出哈) 1.使用ViewGrou ...

  3. iOS之layout方法-layoutSubviews、layoutIfNeeded、setNeedsLayout

    下面列举下iOS layout的相关方法: layoutSubviews layoutIfNeeded setNeedsLayout setNeedsDisplay drawRect sizeThat ...

  4. kali2.0如何安装中文输入法

    由于kali的更新源是国外网站,替换成国内的镜像站,具体操作如下: 打开终端输入 leafpad /etc/apt/sources.list   把下面的源粘贴进去,原有内容注释掉 #中科大源deb  ...

  5. hdu 2027 统计元音

    统计元音 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Submi ...

  6. Ubuntu 14.04 LAMP搭建小记

    文章目录 LAMP WinQQ Ubuntu 的使用的建模工具 JDK Chormium flash Eclipse 无法找到Jre LAMP 参考资料: 1. 安装php环境   http://ww ...

  7. hbuilder用自己的服务

    2016-03-10 以后写测试demo用Sublime3 http://docs.emmet.io/cheat-sheet/ 更多炫酷信息和emmet语法请参见: 视频demo 语法文档 2016- ...

  8. 20160327javaweb 之JSP入门

    一.什么是JSP? JSP全称是Java Server Pages,它和servle技术一样,都是SUN公司定义的一种用于开发动态web资源的技术. JSP这门技术的最大的特点在于,写jsp就像在写h ...

  9. Android Studio快捷键快速入门

    调整,Settings->IDE Settings->Editor->Appearance->Show line numbers  显示代码行数Settings->IDE ...

  10. 轻松应对C10k问题

    http://blog.csdn.net/u011011917/article/details/17203539 传统的.教科书里的I/O复用等待函数select/poll在处理数以万计的客户端连接时 ...