Javascript函数在单独的文件中，或者在通过ajax加载时与html一起使用？

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

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

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

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

。。。
函数dostuff（）{
// ...
}

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

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

---

我注意到的一件事是，在Firebug中调试比较困难，因为我在其中放置断点的函数已重新加载，这会混淆调试器。而且，随着浏览器重新编译功能，性能可能会下降？

我想说的是，不要将标记和逻辑混为一谈。将所有JavaScript放在一个单独的文件中，并在其中分配事件，这样它就不那么容易混淆，而且更便于移植

html:

假设

b

是静态的，这将起作用，否则请查看“事件委派”

另外，随着浏览器重新编译功能，性能可能会下降

---

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

一件事是，如果您将其包含在html中，则按照您的方式，dostuff是一个全局函数（这通常是一个坏主意）。至少使用1个全局命名空间变量object literal，并将所有内容附加到该变量：

var YOURNAMESPACE = {};

在你的报告中包括：

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

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

。。。
YOURNAMESPACE.dostuff=函数（）{
// ...
};
document.getElementById（'b'）。onchange=function（）{
YOURNAMESPACE.dostuff（）；
}

如您所见，我在代码中没有使用javascript属性。那样做是不好的做法

关于你的问题，这要看情况而定。由于初始页面加载时间的原因，有一些参数支持在ajax请求中加载它

在一个文件中实现这一点的一个理由是，构建javascript显然更容易，并且具有更好的概述。你可以（也应该）缩小/丑化你的javascript文件

---

您通常应该考虑ajax模式。您是否能够使用json创建ajax？使用，您的ajax请求应该会快得多。（如果您使用json，您的问题就过时了，因为您无法通过json将javascript代码发送到浏览器）。

我总是尽可能使用实时绑定（.live（）），因此通过ajax调用加载的元素可以为它们准备好事件。如果要控制页面加载，还可以使用.on（）和.off（）。如果可能，可以使用

引用外部脚本；函数YOURNAMESPACE.dostuff（）{}；但是得到了错误“SyntaxError:missing（在形式参数之前）”-它应该是伪代码吗？对不起，我的错，对于快速键入，我修复了它。很酷，我识别的结构。

var YOURNAMESPACE = {};

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

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