组织从Ajax调用返回的JavaScript的最佳实践

时间:2010-08-13 20:40:45

标签: javascript ajax

我正在编写一个包含大量可重用组件的应用程序(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()的效果是什么? broswers会杀死最后一个ToBeLoadedForEachAjaxCall()并替换为“newer”吗?

谢谢,

1 个答案:

答案 0 :(得分:1)

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

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

最终,您可能会发现某些代码非常特定于网站的各个部分。您可能不想在每个页面上加载SomeCrazyDomain.com/SomeSubComponent。此时,您可以选择创建特定于站点不同部分的js文件。

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