组织来自Ajax调用的JavaScript的最佳实践

Question

我正在编写一个包含许多可重用组件的应用程序（Asp.Net MVC）。

我目前正在使用jQuery库通过Ajax调用加载这些组件。

这些组件也将调用其他子组件，因此所有这些JavaScript都将返回。

所以问题是，我应该将“回调” JavaScript放在哪里？

我目前有这样的事情：

这一页：

<html>
<head>
    <title>blah</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" ></script>
</head>
<body>

<div id="Container"></div>

<script type="text/javascript">
    $(document).ready(function() {
        $('#Container').load('SomeCrazyDomain.com/SomeComponent');
    });
</script>
</body>
</html>

组件：

<p>Load sub components</p><input type="button" onclick="GetSubcompent" />
<div id="SubcompentContainer"></div>

<!-- Is this Bad? -->
<script type="text/javascript">
    function GetSubcompent() {
        $('#SubcompentContainer').load('SomeCrazyDomain.com/SomeSubComponent');
    }
</script>

子组件：

<h1>I am a sub compent</h1>
<script type="text/javascript">
    function ToBeLoadedForEachAjaxCall() {
        //do something
    }
</script>

如果保持原样，则为每个ajax调用加载ToBeLoadedForEachAjaxCall（）有什么作用？ 这些浏览器会杀死最后一个ToBeLoadedForEachAjaxCall（）并替换为“较新的”吗？

谢谢，

Answer 1

将内联javascript放入标记中通常是一个坏主意。 使得维护和调试非常麻烦。 您应该创建一个包含所有JavaScript代码的通用js文件，并将其包含在您的<HEAD>或</BODY> 。 例如，拥有一个包含以下内容的js文件：

$('#SubcompentContainer').load('SomeCrazyDomain.com/SomeSubComponent');
function ToBeLoadedForEachAjaxCall() {
    //do something
}

最终，您可能会意识到其中一些代码非常特定于站点的各个部分。 您可能不希望在每个页面上加载SomeCrazyDomain.com/SomeSubComponent 。 此时，您可以选择创建特定于站点不同部分的js文件。

回答第二个问题。 如果有多个具有相同名称的javascript函数，则定义的最后一个将是运行一次。

组织来自Ajax调用的JavaScript的最佳实践

问题描述

1 个解决方案

解决方案1
1 已采纳 2010-08-15 15:30:48

组织来自Ajax调用的JavaScript的最佳实践

问题描述

1 个解决方案

解决方案1 1 已采纳 2010-08-15 15:30:48

解决方案1
1 已采纳 2010-08-15 15:30:48