javascript - 如何通过从浏览器 js 控制台触发的 require.js 重新加载文件

标签 javascript jquery requirejs google-chrome-devtools

在初始应用程序启动时由 require.js 加载文本文件(下划线模板):

define(['text!templates/template.html'], function(Template){ ... };

当我现在正在更改此文件并希望重新加载该单个文件而无需重新加载整个页面并重新启动整个应用程序时,这可能吗?

我想从浏览器的 javascript 控制台触发它。

用例是通过 require.js 加载下划线模板的场景,当更改其中一个模板文件时,我可以轻松地将新文件“注入(inject)”到正在运行的应用程序,手动触发 View 渲染方法并查看更改无需从头开始重新加载所有内容。

感谢您的想法。

最佳答案

一般来说,RequireJS 不是为重新加载模块而设计的。

但是,如果您仔细设计您的应用程序,您可以让 RequireJS 重新加载一些模块。这是一个例子:

<body>
  <p id="contents">Nothing loaded.</p>
  <button id="reload">Reload</button>
  <script>
    require.config({
        baseUrl: "./js",
        paths: {
            jquery: '//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min',
        }
    });
    require(["jquery"], function ($) {
        var $contents = $("#contents");
        function reload() {
            require.undef("text!../file.html");
            require(["text!../file.html"], function (file) {
                $contents.empty();
                $contents.append(file);
            });
        }
        $("#reload").click(reload);
    });
  </script>
</body>

关键是调用require.undef在重新加载之前取消定义模块。

我有一个 repo说明整个事情。如果您编辑 file.html 文件并点击“重新加载”按钮,该段落的文本将替换为文件的内容。要获得一个功能,您可以从控制台调用,只需将其分配给 window 的字段(例如 window.reload)。

该按钮实际上应该称为加载/重新加载(因为它执行初始加载重新加载)但我不打算修复它。

关于javascript - 如何通过从浏览器 js 控制台触发的 require.js 重新加载文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19966133/

相关文章:

javascript - NodeJS 中 require() 的功能

javascript - 带有 JS 的 <select> 中的链接在 Chrome 上不起作用。 IE 和 FF 有效

javascript - (HTML/CSS) 以有效的方式定位文字/图片,以便考虑窗口收缩

javascript - 表单数据显示空对象

javascript - 检查横幅是否加载

javascript - 如何使用 jQuery 在新窗口中打开 .pdf?

javascript - 数组值计数javascript

javascript - 向下滑动和向上滑动事件在快速鼠标滚轮上下混合

knockout.js - 将 knockoutjs 分离到单独的文件中,并使用 requirejs 注入(inject)内容

javascript - 如何使用 Require JS 加载 JSON.js 库以使 Backbone 应用程序在 IE7 中运行?