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

Question

I am writing an application (Asp.Net MVC) that contains a lot of reusable components. 我正在编写一个包含许多可重用组件的应用程序（Asp.Net MVC）。

I am currently loading these components with Ajax calls, using the jQuery library of course. 我目前正在使用jQuery库通过Ajax调用加载这些组件。

These components will be calling other sub-components as well, and so there are all these JavaScript coming back. 这些组件也将调用其他子组件，因此所有这些JavaScript都将返回。

So question is, where should I put the "callback" JavaScript? 所以问题是，我应该将“回调” JavaScript放在哪里？

I currently have something like this: 我目前有这样的事情：

The page: 这一页：

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

The Component: 组件：

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

The sub component: 子组件：

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

If, I leave it as it is, what's the effect of loading ToBeLoadedForEachAjaxCall() for each ajax call? 如果保持原样，则为每个ajax调用加载ToBeLoadedForEachAjaxCall（）有什么作用？ Will the broswers kill the last ToBeLoadedForEachAjaxCall() and replace with the "newer" one? 这些浏览器会杀死最后一个ToBeLoadedForEachAjaxCall（）并替换为“较新的”吗？

Thank you, 谢谢，

Answer 1

It is generally a bad idea to throw inline javascript into your markup. 将内联javascript放入标记中通常是一个坏主意。 Makes maintenance and debugging very troublesome down the road. 使得维护和调试非常麻烦。 You should be creating a common js file that contains all the JavaScript code and include it in your <HEAD> or before the </BODY> . 您应该创建一个包含所有JavaScript代码的通用js文件，并将其包含在您的<HEAD>或</BODY> 。 For example, have a js file that contains the following: 例如，拥有一个包含以下内容的js文件：

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

Eventually, you might realize that some of this code is very specific to various sections of the site. 最终，您可能会意识到其中一些代码非常特定于站点的各个部分。 You might not want to load SomeCrazyDomain.com/SomeSubComponent on each page. 您可能不希望在每个页面上加载SomeCrazyDomain.com/SomeSubComponent 。 At this point you can choose to create js files specific to different sections of the site. 此时，您可以选择创建特定于站点不同部分的js文件。

To answer your second question. 回答第二个问题。 If there are multiple javascript functions with the same name, the last one defined will be the one run. 如果有多个具有相同名称的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