RequireJS 和 Globals

Question

我的页面中有许多事件处理程序正在访问全局函数（在页面上的脚本标签中定义的函数）。例如：

<button id="ClearText" onclick="cleartb()">Clear Text Box</button>

cleartb() 函数只是放在页面上：

<script>
function cleartb()
{
  vm.essayText('');
  return;
}
</script>

现在，vm 是我页面的视图模型（但对于这个问题，重要的是它只是一个可用于整个页面的全局变量），我使用它在多个事件处理程序、警报消息、等等

问题是我已经将 vm 的定义移到了一个名为 vm.js 的 RequireJS AMD 模块中：

define(["knockout", "jquery"], function (ko, $) {

  var essayText = 'Hello World!';

  ...

  return {
    essayText: essayText
  }
});

当我的 onlick 事件处理程序运行或我以任何方式引用 vm 时，我收到“vm undefined”错误（如预期的那样）。

问题一：

如何让我的页面访问 AMD 模块中定义的 vm 变量，尤其是在我不想“污染”全局命名空间的情况下？这里有最佳实践吗？

问题 2：

最终，我什至不想在页面上显示 cleartb()，因为它确实是特定于视图模型的操作。尽管我认为一旦获得问题 1 的（一个？）答案，我就可以弄清楚该怎么做，但我很想知道如何最好地将 cleartb 函数移动到 vm AMD 模块中，以便我仍然可以从我的onlick 事件处理程序。

请注意，我希望仍然从 vm 变量中公开值和函数，以便我可以继续使用 vm.cleartb() 或检查 vm.essayText() 的值（这是一个 KO 可观察的）。 （换句话说，我不想用 cleartb(vm) 解决方案来解决问题。）

感谢您的帮助！

Answer 1

<script>
function cleartb()
{
  vm.essayText('');
  return;
}
alert(window.cleartb);
</script>

其实这种方式已经污染了全局window变量。所以我认为你的第一个要求没有意义。然后你可以这样做：

define(["knockout", "jquery"], function (ko, $) {

  var essayText = 'Hello World!', varToBeExported;

  ...
  window.varToBeExported = {
   'cleartb': cleartb
 };
  return {
    essayText: essayText
  }
});

但如果没有必要，你应该使用 requireJs 的方式 - require(['your moudle'],.... 。