我对内联 vs 包含有问题 Javascript

Question

我对 JavaScript 比较陌生，正在尝试了解如何正确使用它。

如果我将 JavaScript 代码包装在匿名 function 中以避免public变量，则 JavaScript 中的函数在包含 JavaScript 的 html 中不可用。

在初始加载页面时，JavaScript 会加载并执行，但在随后重新加载页面时，JavaScript 代码不会再次通过执行过程 go。 具体来说，有一个 ajax 调用使用httprequest从 PHP 文件中获取它，并将返回的数据传递给回调function ，如果我可以调用httprequest从 html 中执行 httprequest

<script type="text/javascript" ></script>

在每次页面加载时阻止我都准备好了 - 因为我必须将整个 JavaScript 代码注入该块以使其在页面加载时工作，希望有人可以教育我。

Answer 1

如果您没有使用 javascript 框架，我强烈建议您使用它。 我使用 MooTools，但还有许多其他工具非常可靠（Prototype、YUI、jQuery 等）。 这些包括将功能附加到 DomReady 事件的方法。 问题在于：

window.onload = function(){...};

是你只能有一个 function 附加到该事件（后续分配将覆盖这个）。

框架为此提供了更合适的方法。 例如，在 MooTools 中：

window.addEvent('domready', function(){...});

最后，还有其他方法可以避免污染全局命名空间。 仅命名您自己的代码 (mySite.foo = function...) 将帮助您避免任何潜在的冲突。

还有一件事。 根据您的评论，我不能 100% 确定您遇到的问题是特定于页面加载事件的。 您是说代码也需要在 ajax 返回时执行吗？ 如果是这种情况，请编辑您的问题。

Answer 2

我建议只做 window.onload：

<script type="text/javascript">
(function() {
    var private = "private var";
    window.onload = function() {
        console.log(private);
    }
})();
</script>

Answer 3

在最初加载页面时，js 加载并执行，但在随后重新加载页面时，js 代码不会 go 再次通过执行过程

我不确定我是否完全理解您的问题，因为 JS 应该每次都执行，无论它是包含脚本还是内联脚本。 但我想知道您的问题是否与浏览器缓存有关。 缓存问题可能有两个不同的点：

1. 您的 javascript include 正在被缓存，您正在尝试从该 include 提供动态生成或最近编辑的 javascript。

2. 正在缓存您的 ajax 请求。

您应该能够通过在服务器上设置响应标头来避免缓存。
此外， 此页面还介绍了另一种解决 ajax 请求缓存问题的方法。

Answer 4

最好不要将所有内容都包装在匿名 function 中，只希望它被执行。 您可以将其命名为 function，并将其名称放入 body 标记的加载处理程序中。 这应该确保它在每次加载页面时运行。

Answer 5

取决于你想做什么，但为了避免污染全局命名空间，你可以将你的代码附加到你关心的元素上。

例如

<div id="special">Hello World!</div>
<script>
  (function(){
    var foo = document.getElementById('special');
    foo.mySpecialMethod = function(otherID, newData){
      var bar = document.getElementById(otherID);
      bar.innerHTML = newData;
    };
    //do some ajax... set callback to call "special" method above...
    doAJAX(url, 'get', foo.mySpecialMethod);
  })();
</script>

我不确定这是否能解决您的问题，但这是处理它的一种方法。