在html中，require的官方基本用法如下：

<!DOCTYPE html>

<html>

    <head>

        <title>My Sample Project</title>

        <!-- data-main attribute tells require.js to load

             scripts/main.js after require.js loads. -->

        <script data-main="scripts/main" src="scripts/require.js"></script>

    </head>

    <body>

        <h1>My Sample Project</h1>

    </body>

</html>

但在实践过程中，我们可能会有很多需要配置的，比如jquery...

然后我们大约会把这些配置写到配置文件，如下：

// require.config.js

require.config({

    paths: {

        jquery    : "/js/library/jquery.min",

    },

    shim : {

    }

});

然后，再在  main.js  中引用

//mian.js

require(["/js/require.config.js"],function(){

    "use strict";

    require(["jquery"], function ($) {

        //功能代码

    });

})

因为网页缓存问题，这种方式存在当 require.config.js 有修改时，客户端的 require.config.js 并不会更新的问题。同时如果有多个html都用了require，那每个模块的 main.js 都需要在头部加上述代码。

既然在require中引用 config，会有缓存问题，那我就把  require.config.js  放到 html ，并且增加版本控制。但需要注意的是， rquire.config.js  必须放到  require.js  后面，因为他用到了require类。

如下

<!DOCTYPE html>

<html>

    <head>

        <title>My Sample Project</title>

        <!-- data-main attribute tells require.js to load

             scripts/main.js after require.js loads. -->

        <script data-main="scripts/main" src="scripts/require.js"></script>

        <script src="scripts/require.config.js?v=xxx"></script>

    </head>

    <body>

        <h1>My Sample Project</h1>

    </body>

</html>

这种形式会存在一个新的问题：当 require.config.js  修改后，由于   require.js  已经在浏览器缓存，所以很快（快到  require.config.js 还未加载完成）就会加载  main.js ，此时 man.js 没有享受到  require.config.js 中的配置。

这里我想到了  require.js  的模式（先加载  require.js , 再加载  main.js ）与现在的需求（先加载 require.config.js ，再加载 main.js ）大概相同。所以看了  require.js  中的实现，把相关部分的代码复制到  require.config.js 。

最终，我使用的代码样例如下：

需要注意的是：html 中，需要移动 data-main 的位置：

<!DOCTYPE html>

<html>

    <head>

        <title>My Sample Project</title>

             scripts/main.js after require.js loads. -->

        <script src="scripts/require.js"></script>

        <!-- data-main 移动到这里 -->

        <script src="scripts/require.config.js?v=xxx" data-main="scripts/main" ></script>

    </head>

    <body>

        <h1>My Sample Project</h1>

    </body>

</html>    
// require.config.js

;(function () {

    let rev = 'xxxx';

    let cfg = {

        // 不设置超时 = 0

        waitSeconds: 60,

        paths: {

            'jquery': '../../../../Common/Common/jquery-3.3.1/dist/jquery.min',

        },

        shim: {

            'jquery': {exports: 'jQuery'},

        },

        urlArgs: function (id, url) {

            if (url.indexOf('http') === 0) {

                return '';

            }

            let args = `rev=${rev}`;

            // /Common/Common 下的文件不用版本控制, 都是 3 方库

            if (url.indexOf('/Common/Common/') >= 0) {

                args = 'v=2'

            }

            return (url.indexOf('?') === -1 ? '?' : '&') + args;

        }

    };

    let dataMain = '';

    let scripts = document.getElementsByTagName('script');

    for (let i = scripts.length - 1; i > -1; i -= 1) {

        let script = scripts[i];

        let src = script.getAttribute('src');

        if (src.indexOf('require.common.config.js') > 0) {

            dataMain = script.getAttribute('data-main');

            if (dataMain) {

                //Preserve dataMain in case it is a path (i.e. contains '?')

                let mainScript = dataMain;

                //Set final baseUrl if there is not already an explicit one,

                //but only do so if the data-main value is not a loader plugin

                //module ID.

                if (!cfg.baseUrl && mainScript.indexOf('!') === -1) {

                    //Pull off the directory of data-main for use as the

                    //baseUrl.

                    src = mainScript.split('/');

                    mainScript = src.pop();

                    let subPath = src.length ? src.join('/') + '/' : './';

                    cfg.baseUrl = subPath;

                }

            }

            break;

        }

    }

    require.config(cfg);

    if (dataMain) {

        require([dataMain]);

    }

}());

html中require.config 缓存问题的更多相关文章

  1. avalon 中require.config源码分析

    /********************************************************************* * 配置系统 在系统运行的开始就需要读取系统中requir ...

  2. nodejs中 require 方法的加载规则

    require参数类型 http.fs.path等,原生模块 ./mod或../mod,相对路径的文件模块 /pathtomodule/mod,绝对路径的文件模块 mod,非原生模块的文件模块 在进 ...

  3. [原创]mybatis中整合ehcache缓存框架的使用

    mybatis整合ehcache缓存框架的使用 mybaits的二级缓存是mapper范围级别,除了在SqlMapConfig.xml设置二级缓存的总开关,还要在具体的mapper.xml中开启二级缓 ...

  4. 在.net中读写config文件的各种方法

    阅读目录 开始 config文件 - 自定义配置节点 config文件 - Property config文件 - Element config文件 - CDATA config文件 - Collec ...

  5. mybatis中的查询缓存

    一: 查询缓存 Mybatis提供查询缓存,用于减轻数据压力,提高数据库压力. Mybatis提供一级缓存和二级缓存. 在操作数据库时需要构造SqlSession对象,在对象中有一个数据结构(Hash ...

  6. 在Spring、Hibernate中使用Ehcache缓存(2)

    这里将介绍在Hibernate中使用查询缓存.一级缓存.二级缓存,整合Spring在HibernateTemplate中使用查询缓存.,这里是hibernate3,使用hibernate4类似,不过不 ...

  7. C#开发微信门户及应用(48) - 在微信框架中整合CacheManager 缓存框架

    在我们的很多框架或者项目应用中,缓存在一定程度上可以提高程序的响应速度,以及减轻服务器的承载压力,因此在一些地方我们都考虑引入缓存模块,这篇随笔介绍使用开源缓存框架CacheManager来实现数据的 ...

  8. requireJs require.config公共配置

    //场景:让require.config配置文件成一个公共文件,每个页面引用这个公共配置 //方式一样例: require.config({ baseUrl: (function () { var p ...

  9. spring(三、spring中的eheche缓存、redis使用)

    spring(三.spring中的eheche缓存.redis使用) 本文主要介绍为什么要构建ehcache+redis两级缓存?以及在实战中如何实现?思考如何配置缓存策略更合适?这样的方案可能遗留什 ...

随机推荐

  1. java中的模运算规则

    取模运算定义 如果a和d是两个自然数,d非零,可以证明存在两个唯一的整数 q 和 r,满足 a = qd + r 且0 ≤ r < d.其中,q 被称为商,r 被称为余数. 运算实例 java模 ...

  2. coding++：@DisallowConcurrentExecution 注解的作用

    Quartz定时任务默认都是并发执行的,不会等待上一次任务执行完毕,只要间隔时间到就会执行, 如果定时任执行太长,会长时间占用资源,导致其它任务堵塞. 在Spring中这时需要设置concurrent ...

  3. 【编程之美】超时重传，滑动窗口，可靠性传输原理C语言实现

    版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://www.cnblogs.com/lihuidashen/p/128003 ...

  4. maven过滤配置文件

    第一种方式, 解决maven打包时,会编译特定文件导致文件不可用maven打包时,过滤不编译文件类型 <plugin>    <groupId>org.apache.maven ...

  5. [软件共享]将数据库中的数据导出为SQL脚本

    可以直接将数据库中的数据导出为脚本,并可以自己设置过滤条件.使用方法很简单,不在多说了.下面是软件截图.123 下载:http://files.cnblogs.com/pw/mssql2.rar

  6. 在okhttp的callback回调中加Toast出现Cant create handler inside hread that has not called Looper.prepare()...

    2019独角兽企业重金招聘Python工程师标准>>> 分析:callback中回调的response方法中还是在子线程中运行的,所以要调取Toast必须回到主线程中更新ui 解决方 ...

  7. Linux 搭建nginx的PID

    pid logs/nginx.pid 安装的时候就是没有,其实在启动 nginx 时自动生成的 里面存放的是 当前 nginx 住进程的 ID 号:所以在配置文件中指定pidpid /usr/loca ...

  8. 解决iframe跨域刷新的问题

    用iframe的location.reload(true); 方法来刷新外部URL会报 Blocked a frame with origin xxxx from accessing a cross- ...

  9. #Week7 Neural Networks : Learning

    一.Cost Function and Backpropagation 神经网络的损失函数: \[J(\Theta) = - \frac{1}{m} \sum_{i=1}^m \sum_{k=1}^K ...

  10. FTP服务器项目的一些整理

    几个月前按照网上的教程写了一个FTP的服务器,现在回头整理一下里面的一些知识. FTP简介 FTP是文件传输协议(File Transfer Protocol),工作在TCP/IP协议族的应用层,其传 ...