在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. 文字检测模型EAST应用详解 ckpt pb的tf加载，opencv加载

    参考链接:https://github.com/argman/EAST (项目来源) https://github.com/opencv/opencv/issues/12491  (遇到的问题)    ...

  2. Spring5：控制反转

    二.Spring IOC控制反转 1:IOC推导 >传统业务调用编程 定义一个userDao接口:UserDao package com.spring; public interface Use ...

  3. linux上Docker安装gogs私服亲测(详解)

    一.前言 有网友问我为什么要使用私服,可能大部分人都不是太懂,网上那么多存储仓库而且好用方便,但是你想过没有如果企业中的项目,放在人家的仓库上这个安全性不是太好,所以说一般企业都会有自己的私服.本章教 ...

  4. Java 多线程 -- 协作模型：生产消费者实现方式一：管程法

    多线程通过管程法实现生产消费者模式需要借助中间容器作为换从区,还包括生产者.消费者.下面以蒸馒头为列,写一个demo. 中间容器: 为了防止数据错乱,还需要给生产和消费方法加锁 并且生产者在容器写满的 ...

  5. linux php 安装 openssl扩展

    (1.生成 openssl.so 文件)#进入扩展目录cd /data/soft/php-5.5.38/ext/openssl#生成 configure 文件/usr/local/php/bin/ph ...

  6. SourceTree for Windows跳过登录解决方法

    来源:https://blog.csdn.net/t_332741160/article/details/79611303 SourceTree 是一个强大的git管理客户端,但是在使用最新版需要登录 ...

  7. bootstrop设置背景图片自适应屏幕

    如果不用bootstrop框架,想让背景图片自适应窗口大小,可以这样做: <style type="text/css"> html{height: %;} body.a ...

  8. http请求返回的数字代表的含义

    一些常见的状态码为: 200 - 服务器成功返回网页 404 - 请求的网页不存在 503 - 服务器超时 下面提供 HTTP 状态码的完整列表.点击链接可了解详情.您也可以访问 HTTP 状态码上的 ...

  9. String、String[]、ArrayList<String>之间的转换

    1. ArrayList<String> 转换为 String[]: ArrayList<String>  list = new ArrayList<>(); li ...

  10. LightOJ 1287 Where to Run(期望)

    题目链接:http://www.lightoj.com/volume_showproblem.php?problem=1287 题意:给定一个n个点的无向图(0到n-1),你开始在0.你开始遍历这个图 ...