javascript - 如何处理浏览器尚未调用代码的 SJR 响应？

Question

我想知道如何缓解用户通过 AJAX 与您的网站交互时出现的问题，而您同时部署了该网站的新版本。

设想如下场景:

---

用户正在通过单击“下一步”按钮浏览您的帖子。这“下一步”按钮通过 XHR 向服务器提交表单，然后服务器使用服务器生成的 Javascript 响应 (SJR) 进行响应。

SJR 呈现此 Javascript:

// in create.js.erb
renderNewPost(<%= @post.to_json %>);

(renderNewPost 在您的串联、缩小的 application.js 中定义，并由用户的浏览器缓存。)

此时一切正常。

现在，作为新功能的一部分，您更改端点的 SJR 以首先记录一些内容:

// in create.js.erb
logSomething("hi!");
renderNewPost(<%= @post.to_json %>);

并添加函数logSomething给你的application.js .

用户再次点击“下一步”按钮。这一次，SJR 以 logSomething('hi') 响应线...但浏览器没有 logSomething在任何地方定义，因为 application.js浏览器加载的是第一个版本。

现在，在刷新页面之前，用户将无法使用您的网站。

---

我们如何解决这个问题？手头的问题有名称吗？

Answer 1

选项 1:

一个简单的选择是，让响应尽可能独立，这意味着在您的示例中，您不会在其他地方定义 log_something 方法，但也在相同的地方回复。

选项 2:

另一种可能更通用的解决方案是，您在应用程序 Controller 中的自定义响应 header 中发送某种版本(比方说 X-SJR-Version)

before_action do
  response.headers['X-SJR-Version'] = '1.0.0'
end

并添加一些 Javascript 客户端代码，您可以在其中执行 AJAX 请求以检查版本是否仍然匹配。粗略的实现可能是这样的(虽然未经测试):

var version = null;
$(document).bind("ajaxSuccess", function(xhr, status){
   var newVersion = xhr.getResponseHeader('X-SJR-Version')
   if(version === null) { version = newVersion } // initial version
   if(newVersion !== version) { location.reload(); }
});

这利用了 jquery 钩子(Hook) ajaxSuccess , 执行版本检查。您可能想查看 this如果您使用常规的 jquery-ujs rails 调用，请查看页面。

现代方法:

但是，现代 Rails 应用程序通常不再经常使用服务器生成的 javascript，因为那里的架构通常是您自己编写客户端 javascript(通常使用 react、angular 或 vue)并使用 JSON API 端点 用于来自服务器的数据，而 javascript 代码已经存在于页面的响应中，不需要加载额外的 JS。

这样做的好处是，您可以使用 API 版本控制，而加载的 javascript 将坚持使用旧版本，因此您可以顺利转移到较新的 API 版本(而通常您甚至不需要新的 API 版本，因为只有 javascript 发生变化)

因此，您很可能找不到解决此问题的开箱即用的解决方案，而不得不寻求类似上述的解决方案。