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

    https://github.com/JakeWharton/Android-ViewPagerIndicator

  2. [React ] React Fundamentals: Component Lifecycle - Mounting Usage

    The previous lesson introduced the React component lifecycle mounting and unmounting. In this lesson ...

  3. php位运算的应用(转)

    在实际应用中可以做用户权限的应用 我这里说到的权限管理办法是一个普遍采用的方法,主要是使用到”位运行符”操作,& 位与运算符.| 位或运行符.参与运算的如果是10进制数,则会被转换至2进制数参 ...

  4. <BEA-141281> <unable to get file lock, will retry ...> --reference

    I ran into this error the first time I restarted Weblogic on one of my installs, the only reference ...

  5. PHP【第一篇】安装

    一.准备 1.环境 系统平台:Red Hat Enterprise Linux Server release 7.3 (Maipo) 内核版本:3.10.0-514.el7.x86_64 2.下载安装 ...

  6. 普通SQL注入

    安全防御:过滤/转义非法参数,屏蔽SQL查询错误. 工具:Firefox,hackbar,sqlmap,burpsuite 1.联想tms站 例1, 联想tms站fromCity参数存在普通SQL注入 ...

  7. 认识copy关键

    首先先引用阳神Sunny博客中的一道面试题: 用@property声明的NSString(或NSArray,NSDictionary)经常使用copy关键字,为什么?如果改用strong关键字,可能造 ...

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

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

  9. iOS项目进行测试的配置

    一.首先,注册苹果开发者账号并登陆https://developer.apple.com/account/#/overview/ZFBE9NJZM6, 二.创建测试证书

  10. 读取group by 之外的字段

    序号 姓名 性别 身高 1 张三 男  185 2 李四 女  161 3 王五 女  166 4 赵六 男  178 1.获取男生女生人数 select count(性别) , 性别 from 表名 ...