在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. 从零开始学习docker之docker的安装

    一.Docker 使用 Google 公司推出的 Go 语言 进行开发实现,基于 Linux 内核的 cgroup,namespace,以及 OverlayFS 类的 Union FS 等技术,对进程 ...

  2. ASP.Net内置对象之网页之间传参（二）

    Session对象 运用于多个界面调用某一个特定的用户信息,也就是每个Session 对象是独立的,个不受影响. Session对象的读取和存储 Session[name]=”chen”; 可以用来界 ...

  3. 树莓派4b 上手三板斧

    树莓派4b 上手三板斧 1.无屏幕和网线连接准备 windows / mac 电脑下载安装Notepad++ 新建文件并保存为ssh(该文件为空文件) 新建文件wpa_supplicant.conf ...

  4. [Asp.Net Core] Blazor Server Side 项目实践 - 切换页面时保留状态

    前言: 这是 项目实践系列 , 算是中高级系列博文, 用于为项目开发过程中不好解决的问题提出解决方案的. 不属于入门级系列. 解释起来也比较跳跃, 只讲重点. 因为有网友的项目需求, 所以提前把这些解 ...

  5. Mysql表的对应关系

    表关系 一对一一张表中的一条记录与另一张表中最多有一条明确的关系:通常,此设计方案保证两张表中使用同样的主键即可假设一张学生表:id 姓名 年龄 性别 籍贯 婚否 住址那么姓名 年龄 性别 这种字段比 ...

  6. 大数据并行计算框架Spark

    Spark2.1. http://dblab.xmu.edu.cn/blog/1689-2/ 0+入门:Spark的安装和使用(Python版) Spark2.1.0+入门:第一个Spark应用程序: ...

  7. python爬虫实战之爬取智联职位信息和博客文章信息

    1.python爬取招聘信息 简单爬取智联招聘职位信息 # !/usr/bin/env python # -*-coding:utf-8-*- """ @Author  ...

  8. Inno Setup 升级时不再询问用户安装路径

    UsePreviousAppDir Description: When this directive is yes, the default, at startup Setup will look i ...

  9. ERC20 Short Address Attack

    ERC20 Short Address Attack 什么是ERC20 Application Binary Interface(ABI) ERC20 Short Address Attack 开始攻 ...

  10. 深入理解Mysql——锁、事务与并发控制

    本文对锁.事务.并发控制做一个总结,看了网上很多文章,描述非常不准确.如有与您观点不一致,欢迎有理有据的拍砖! mysql服务器逻辑架构 每个连接都会在mysql服务端产生一个线程(内部通过线程池管理 ...