組織來自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