無法訪問另一個javascript文件中的變量

Question

所以我將所需的每個文件鏈接到index.html文件中：

    <script src="jquery.js"></script>
    <script src="notify.js"></script>
    <script src="script.js"></script>

我在'notify.js'中創建了一個對象：

    var notify = {
    newNotification : function(text) {
    }
}

script.js：

alert(notify.newNotification);

當我嘗試訪問'script.js'中的'notify'對象時，它工作正常。但我想使用jquery所以我將$（document）.ready（）添加到這兩個文件中：

notify.js

    $(document).ready (
    function() {
var notify = {
    newNotification : function(text) {
    }
}
}
)

的script.js：

    $(document).ready (
    function() {
alert(notify.newNotification);
    }
)

在我添加之后，它提出了未定義的通知。出了什么問題？ 任何人都可以解釋為什么它不起作用？

Answer 1

正如您在$(document).ready(中的notify.js中定義了var notify $(document).ready(這是一個匿名函數， var notify scope僅限於此函數。

所以它不能在$(document).ready(函數

要在外部訪問，請不要將其包裝在$(document).ready( function

像這樣：-

var notify;
$(document).ready(function () {
    notify = {
        newNotification: function (text) { }
    }
});

Answer 2

就像這里已經指出的其他人一樣：只有在處理DOM-Elements時才使用$().ready並且因為你使用了var關鍵字（就像你應該的那樣）而無法訪問你的Variable。 var關鍵字將定義的變量限制為當前作用域，這是您用作DOM-Ready-Handler的匿名函數的作用域。

因此，刪除不必要的$().read將暫時解決您的問題。

但是（！）您應該將代碼封裝到閉包中以避免弄亂全局范圍並避免與第三方代碼發生可能的命名沖突。

像那樣：

notify.js

;(function ($, window, undefined) {
  var notify = {
    newNotification : function(text) {
      return text;
    }
  };
})(jQuery, this);

的script.js

;(function ($, window, undefined) {
  alert(notify.newNotification());
})(jQuery, this);

因此，現在您將遇到與以前相同的問題，您無權訪問您的對象。

當然，您可以將您的notify對象添加到全局范圍，正如Arun P Johny在他的回答中所建議的那樣，但我非常確定當時會有更多的對象需要全局訪問。 如果將它們中的每一個放在全局范圍內，則會再次開始弄亂全局范圍，因此我的建議是一個全局對象，它將保存您需要全局訪問的所有其他對象/變量。 （或者甚至更好地使用像requirejs這樣的東西

有人這樣想：

main.js

;var MyApp = {}; # Only variable in global scope

# Maybe some more initalization code here, dunno

notify.js

;(function ($, window, undefined) {
  MyApp.notify = {
    newNotification : function(text) {
      return text;
    }
  };
})(jQuery, this);

的script.js

;(function ($, window, undefined) {
  alert(MyApp.notify.newNotification());
})(jQuery, this);

關於stackoverflow的范圍和閉包的一些有趣的Q / A：

• JavaScript中的變量范圍是什么？
• JavaScript閉包如何工作？
• JavaScript閉包與匿名函數

關於搞亂全球范圍的一個很好的答案：

• 什么是“泄漏”到全球范圍？

Answer 3

在這種情況下，沒有必要將通知對象包裝在dom中...因為從它的外觀來看，你在創建對象時沒有創建任何dom元素引用...唯一重要的是任何方法調用處理dom元素必須在dom准備就緒。

var notify = {
    newNotification: function (text) {}
}

$(document).ready(function () {
    notify.newNotification()
})

如果你在dom ready處理程序中聲明變量，那么它就成為dom ready處理程序的局部變量...所以它不能在dom ready處理程序之外訪問...

另一種解決方案是將變量添加到dom ready句柄中的全局范圍中

var notify;
$(document).ready(function () {
    notify = {
        newNotification: function (text) {}
    }
})

要么

$(document).ready(function () {
    window.notify = {
        newNotification: function (text) {}
    }
})

Answer 4

您只需要一個document.ready而這只會聲明將在其腳本中自由移動的變量。

看例子：

的script.js：

$(document).ready(function(){
   // declare the variables as global
   $.varA, $.varB, $.varC;
});

notify.js：

function doNotify(){
   // your code here
   $.varA = /*your code here */
}

function otherFunc(txt){
   // your code here
   $.varB = txt;
}

Answer 5

在文檔准備好之前，將加載所有JavaScripts。

在script.js中創建一個引用notify對象的單獨函數，然后從$(document).ready調用該函數

Answer 6

嘗試這個。

var notify = {
    newNotification : function(text) {
    }