1

我们已经开始通过 ajax 进行更多的动态内容加载，并且已经演变的模式是包含函数以及我们加载并粘贴到 div 中的 html。因此，如果主 html 页面有一个 div：

<div id="a"></div>

我们将这样的内容加载到该 div 中：

<div id="b" onchange="dostuff();">...</div>
<script type="text/javascript">
    function dostuff() {
        // ...
    }
</script>

这里的 dostuff 方法通常不包含任何服务器生成的东西（通过 php 或 jsp），它更方便，将 javascript 代码放在它所操作的 html 附近可以更容易地找到函数和/或查看一个文件中的所有相关代码。

在我工作的另一个项目中，我们倾向于将 dostuff() 之类的函数放在一个单独的 .js 文件中（通常一个 .js 文件将包含许多用于多个动态加载的 html 块的函数），该文件在主页面加载一次加载。这对我来说感觉像是一个更好的解决方案，但是当我想在团队中争论这一点时，我很难确定利弊——也许我错了？

我注意到的一件事是在 Firebug 中调试更困难，因为我在其中放置断点的函数已重新加载，这使调试器感到困惑。随着浏览器重新编译功能，性能可能会降低吗？

4

2 回答 2

1

我会说不要混合标记和逻辑。将所有 JavaScript 放在一个单独的文件中并在那里分配事件，这样它就不会那么混乱并且更便携。

html:

<div id="b">...</div>

js：

var b = document.querySelector('#b');
b.addEventListener('change', function() {
  // do something
});

假设b是静态的，这将起作用，否则请查看“事件委托”。

随着浏览器重新编译功能，性能可能会降低吗？

为了获得最佳性能，最好将您的 JavaScript 放在单独的文件中，这样您就可以连接和缩小所有内容并在浏览器中仅加载一个文件。

于 2013-01-21T08:58:58.340 回答
1

有一件事是，如果您将它包含在您的 html 中，那么您执行它的方式，dostuff 是一个全局函数（这通常是一个坏主意）。至少使用 1 个全局命名空间变量对象文字，并将所有内容附加到该变量：

var YOURNAMESPACE = {};

并在您的包括：

<div id="b">...</div>
<script type="text/javascript">
  YOURNAMESPACE.dostuff = function () {
    // ...
  };

  document.getElementById('b').onchange = function () {
    YOURNAMESPACE.dostuff();
  }
</script>

如您所见，我的代码中没有使用 javascript 属性。这只是不好的做法！

关于你的问题，这取决于。由于初始页面加载时间，有一些参数可以用您的 ajax 请求加载它。

在 1 个文件中执行此操作的一个论点是，显然更容易构建您的 javascript 并拥有更好的概览。您可以（并且应该）缩小/丑化您的 javascript 文件！

您通常应该考虑您的 ajax 模式。你能用json ajax 吗？你的ajax请求应该会快很多。（如果你用 json 来做，你的问题就过时了，因为你不能通过 json 将 javascript 代码发送到浏览器）。

于 2013-01-21T09:03:00.903 回答