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 回答