在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. cmd 文件/文件夹的一切操作

    dir // 列出目录下所有文件夹 rd dirname // 删除dirname文件夹(空文件夹) rd /s/q dirname // 删除dirname文件夹(非空)

  2. SSL 3.0 POODLE攻击信息泄露漏洞_CVE-2014-3566

    0x01 SSL3.0简介 我们知道最开始HTTP协议传输数据的时候,数据是不加密的,不安全的,网景公司针对此,推出了SSL(secure socket layer)安全套接层.SSL3.0时,IET ...

  3. 用Python打造电脑人脸屏幕解锁神器附带接头暗号！

    前言 最近突然有个奇妙的想法,就是当我对着电脑屏幕的时候,电脑会先识别屏幕上的人脸是否是本人,如果识别是本人的话需要回答电脑说的暗语,答对了才会解锁并且有三次机会.如果都没答对就会发送邮件给我,通知有 ...

  4. python小白入门之导入指定的模块

    在python中导入模块是通过关键字import进行导入的,下面演示一下,模块的导入,指定模块别名,指定函数别名,调用模块中所有的函数运行结果:  1.模块的导入Study.py文件里面的内容是:形式 ...

  5. Jest 前端单元测试工具

    Jest和enzyme 前端单元测试工具 什么是Jest? Jest是一个令人愉悦的JavaScript测试框架,其重点是简单性. 它适用于使用以下项目的项目:Babel,TypeScript,Nod ...

  6. kubernetes （一）使用Rancher搭建集群

    目录 如何快速高效部署K8s集群 Rancher是什么 为什么是Rancher 1.0.安装Rancher 1.1.环境 1.2.选择Rancher版本 1.3.拉取镜像 2.0.容器启动高级选项 2 ...

  7. ElasticSearch 镜像 & 安装 & 简易集群

    目录 ES镜像 JDK镜像 安装 1. 安装JDK 2. 解压安装ES 3. 配置 4. 新建用户 5. 启动 踩坑 1. root启用报错 2. max file descriptors [4096 ...

  8. SpringBoot应用操作Rabbitmq

    记录RabbitMQ的简单应用 1.springboot项目中引入maven包,也是springboot官方的插件 <dependency> <groupId>org.spri ...

  9. javascript SDK开发之webpack中eslint的配置

    eslint的好处就不多说了.代码检查,代码报错, 智能提示,让开发人员更规范的撸代码等等. 1.安装依赖 npm install --save-dev eslint eslint-friendly- ...

  10. centos 编码问题 编码转换 cd到对应目录 执行 中文解压

    2019独角兽企业重金招聘Python工程师标准>>> **unzip -O CP936 xxx.zip (用GBK, GB18030也可以)** find -type f -nam ...