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（）的效果是什么？ broswers会杀死最后一个ToBeLoadedForEachAjaxCall（）并替换为“newer”吗？

谢谢，

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 个答案: