javascript - 客户端调用服务器函数设置的服务器端变量是否仍然存在？ (不!)

Question

我尝试使用 Revealing module pattern在应用程序中的JavaScript。我喜欢这个想法，但它似乎最尖锐地揭示了我对 1) javascript 2) 应用程序脚本和 3) 它们如何交互的无知。

在编辑器中运行函数时，该模式工作正常(请参阅下面的 test())，但当从实时 Web 应用程序运行时，它就会崩溃。我的印象是服务器端 javascript 中的值不能使用闭包来设置。

每当我在编辑器中运行 getEmail 或 setEmail 时，一切都会正常。如果我从 Web 应用程序调用它们，则 setEmail 设置的值不会保持设置状态，因此对 getEmail 的另一次调用将检索原始值，而不是 setEmail 设置的值。

如果相同的 javascript 代码作为脚本出现在 html 页面中，我相信这些设置将会保留。 (好吧……必须测试一下……)。

工作代码: https://script.google.com/macros/s/AKfycbwrmi-b7J5Gqb_SDUUuiO-TTG31hQJVWtMLFvAPTPOb97qZaQw/exec

代码本身:https://script.google.com/d/1LNw54M-hMgafMfsnYBR0QzFlzXDhd9mFX4asghtqejJRC2Uh66zoFuAb/edit?usp=sharing

核心部分:

function doGet() {
  settings.setEmail("start email");
  return HtmlService.createTemplateFromFile('dialog')
            .evaluate()
            .setSandboxMode(HtmlService.SandboxMode.NATIVE)
}

var settings = (function () {
        var email = "blank";
        var getEmail= function () { return email}
        var setEmail= function (m) { email=m}

        return {
          getEmail: getEmail,
          setEmail: setEmail
        }
} ());

function getVal() { return settings.getEmail() }
function setVal(x) { settings.setEmail(x); return "set '" + x + "'"}

function test() {
  Logger.log(setVal("my email"));
  Logger.log(getVal());
}

HTML 代码:

    <div id="output" >  <?= settings.getEmail()?> </div>
    <br>
    <input  id="input" size="20" type="string" />
    <input type="button" value="Set Value"  onclick="google.script.run.withSuccessHandler(serverSaid).setVal(document.getElementById('input').value);" />
    <input type="button" value="Get Value"  onclick="google.script.run.withSuccessHandler(serverSaid).getVal();" />

    <script>
    function serverSaid(reply) {
          var div = document.getElementById('output');
          var messages= div.innerHTML;
          div.innerHTML = messages +" | " + reply;
    }
    </script>

所以，我尝试在客户端做同样的事情。它按预期工作。 HTML 代码如下:

<div id="output" >  </div>
<br>
<input  id="input" size="20" type="string" />
<input type="button" value="Set Value"  onclick="serverSaid(setVal(document.getElementById('input').value));" />
<input type="button" value="Get Value"  onclick="serverSaid(getVal());" />

<script>
function serverSaid(reply) {
      var div = document.getElementById('output');
      var messages= div.innerHTML;
      div.innerHTML = messages +" | " + reply;
}

/// everything below has been moved over from server-side 
var settings = (function () {
        var email = "blank";
        var getEmail= function () { return email}
        var setEmail= function (m) { email=m}

        return {
          getEmail: getEmail,
          setEmail: setEmail
        }
} ());

function getVal() { return settings.getEmail() }
function setVal(x) { settings.setEmail(x); return "set '" + x + "'"}

</script>

Answer 1

我认为你误解了一些事情。如果我很好地理解您的问题，那么您正在尝试调用一些服务器端函数来设置/获取值。但实际上您并不将这个值存储在服务器端!你所得到的差异是由于不同的背景造成的。

当您使用编辑器时，脚本会在自己的上下文中执行，这意味着只要脚本执行(只要您停留在页面上)，所有实例化的对象/变量都会保留。

但是当您从客户端调用这些函数时，服务器脚本将在调用后执行一次，然后当您“离开”(函数执行结束)服务器时，其上下文将被销毁。

所以值实际上被改变了，但是执行结束后改变值的上下文被销毁了。最后，当您调用 get 函数时，您将重新创建一个全新的上下文，其中的值将使用其默认值进行实例化。

要处理这个问题，您必须将变量存储在某个地方，例如数据库中。