客户端javascript变量持续存在的Node JS项目？答案

【问题标题】：Node JS project where client side javascript variables persist?客户端javascript变量持续存在的Node JS项目？
【发布时间】：2016-03-30 11:34:06
【问题描述】：

我来自 PHP 背景，是 Node JS 开发的新手。我决定尝试一个基本的 Meteor JS + Iron Router + React 项目。以下行为让我措手不及：

我在一个类似http://192.168.0.110:3000/dashboard/john 的页面上，它有一个类似<a href="/dashboard/john/111222"> 的链接。当页面首次加载时，客户端 JavaScript 变量 myvariable 的值为 undefined，但我在页面加载时将其设置为 myvariable="hello world"。
当我点击 <a href="/dashboard/john/111222"> 链接时，页面会加载，但令我惊讶的是，myvariable 的值已经是 hello world 而不是 undefined。

因此，即使我访问了一个全新的 url，我希望在其中刷新整页，myvariable 仍保持前一页的值。由于我的 PHP 背景，我期待值 undefined。

这对我来说是一个全新的行为，因为如果这是一个 PHP 项目，我将不得不显式编写代码以产生客户端 javascript 变量在不同页面 url 之间持续存在的错觉（或者我使用 ajax 重绘屏幕)。但是在我的 NodeJS 项目中，我不必做任何这些，客户端变量保持它的值。

所以我的问题是，这种行为叫什么？是 Node JS、Meteor、Iron Router 还是 React 造成了这种行为？一旦我知道了这种行为的名称，我就可以谷歌并阅读详细信息。

这是我的项目的代码：

我的项目.jsx

var myvariable;
var configAppRoute = {action:applicationController};
Router.route('/dashboard/:username',configAppRoute);
Router.route('/dashboard/:username/:appid',configAppRoute);
function applicationController()
{
  console.log(myvariable);
  myvariable='hello world';
  console.log(myvariable);

  Meteor.startup(function () {
  ReactDOM.render(<App />, document.getElementById("render-target"));
  });
}

App.jsx

App = React.createClass({

  render() {
    return (
      <div>
        <a href={'/dashboard/john/111222'}>click me</a>
      </div>
    );
  }
});

我的项目.html

<head>
  <title>My Project</title>
</head>

<body>
  <div id="render-target"></div>
</body>

【问题讨论】：

你能发布带有问题的 myvariable 代码的 javascript 代码吗？
这可能是流星做的。流星的原理之一：Data on the Wire. Meteor doesn't send HTML over the network. The server sends data and lets the client render it——表示基于流星的应用是单页应用。我没有使用过流星，所以我不能 100% 确定，但流星可能会重写您的链接以进行 ajax 调用并将其呈现在同一页面中。这可以解释你所看到的行为。 FWIW 您也可以在 PHP 中执行此操作。 Facebook 就是这样一个用 PHP 编写的应用程序示例。
@Tim 我已经更新了代码
@slebetman 谢谢。我会研究那个。是的，在 PHP 中，我本来希望编写自己的代码来实现这一点。

标签： node.js meteor reactjs iron-router

【解决方案1】：

我从未使用过 Iron Router，但我仍然可以自信地告诉你，这就是行为的来源。

Iron 路由器包括一个客户端路由器。这意味着您的应用实际上是一个单页应用，其行为类似于多页应用。

由于您正在编写单页应用程序，因此变量永远不会“重置”，因为您的上下文会在用户交互的整个过程中持续存在——新的“页面”会写入 Document Object 的 SAME 实例。因此，除非用户离开应用程序，否则您将保留上下文。

【讨论】：

感谢伊桑。你知道meteor是否只是为了制作单页应用程序吗？
是的，这是 Meteor 的核心目的。引用他们的文档：“使用 Meteor，您可以编写应用程序……通过网络而不是 HTML 发送数据。”