我對內聯 vs 包含有問題 Javascript

Question

我對 JavaScript 比較陌生，正在嘗試了解如何正確使用它。

如果我將 JavaScript 代碼包裝在匿名 function 中以避免public變量，則 JavaScript 中的函數在包含 JavaScript 的 html 中不可用。

在初始加載頁面時，JavaScript 會加載並執行，但在隨后重新加載頁面時，JavaScript 代碼不會再次通過執行過程 go。 具體來說，有一個 ajax 調用使用httprequest從 PHP 文件中獲取它，並將返回的數據傳遞給回調function ，如果我可以調用httprequest從 html 中執行 httprequest

<script type="text/javascript" ></script>

在每次頁面加載時阻止我都准備好了 - 因為我必須將整個 JavaScript 代碼注入該塊以使其在頁面加載時工作，希望有人可以教育我。

Answer 1

如果您沒有使用 javascript 框架，我強烈建議您使用它。 我使用 MooTools，但還有許多其他工具非常可靠（Prototype、YUI、jQuery 等）。 這些包括將功能附加到 DomReady 事件的方法。 問題在於：

window.onload = function(){...};

是你只能有一個 function 附加到該事件（后續分配將覆蓋這個）。

框架為此提供了更合適的方法。 例如，在 MooTools 中：

window.addEvent('domready', function(){...});

最后，還有其他方法可以避免污染全局命名空間。 僅命名您自己的代碼 (mySite.foo = function...) 將幫助您避免任何潛在的沖突。

還有一件事。 根據您的評論，我不能 100% 確定您遇到的問題是特定於頁面加載事件的。 您是說代碼也需要在 ajax 返回時執行嗎？ 如果是這種情況，請編輯您的問題。

Answer 2

我建議只做 window.onload：

<script type="text/javascript">
(function() {
    var private = "private var";
    window.onload = function() {
        console.log(private);
    }
})();
</script>

Answer 3

在最初加載頁面時，js 加載並執行，但在隨后重新加載頁面時，js 代碼不會 go 再次通過執行過程

我不確定我是否完全理解您的問題，因為 JS 應該每次都執行，無論它是包含腳本還是內聯腳本。 但我想知道您的問題是否與瀏覽器緩存有關。 緩存問題可能有兩個不同的點：

1. 您的 javascript include 正在被緩存，您正在嘗試從該 include 提供動態生成或最近編輯的 javascript。

2. 正在緩存您的 ajax 請求。

您應該能夠通過在服務器上設置響應標頭來避免緩存。
此外， 此頁面還介紹了另一種解決 ajax 請求緩存問題的方法。

Answer 4

最好不要將所有內容都包裝在匿名 function 中，只希望它被執行。 您可以將其命名為 function，並將其名稱放入 body 標記的加載處理程序中。 這應該確保它在每次加載頁面時運行。

Answer 5

取決於你想做什么，但為了避免污染全局命名空間，你可以將你的代碼附加到你關心的元素上。

例如

<div id="special">Hello World!</div>
<script>
  (function(){
    var foo = document.getElementById('special');
    foo.mySpecialMethod = function(otherID, newData){
      var bar = document.getElementById(otherID);
      bar.innerHTML = newData;
    };
    //do some ajax... set callback to call "special" method above...
    doAJAX(url, 'get', foo.mySpecialMethod);
  })();
</script>

我不確定這是否能解決您的問題，但這是處理它的一種方法。