无法访问另一个javascript文件中的变量

时间:2013-10-02 02:20:47

标签: javascript jquery

所以我将所需的每个文件链接到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);
    }
)

在我添加之后,它出现了未定义的通知。出了什么问题?谁能解释为什么它不起作用?

6 个答案:

答案 0 :(得分:8)

正如您在var notify内的notify.js中定义了$(document).ready(这是一个匿名函数而var notify范围仅限于此函数。

因此无法在$(document).ready(函数

之外访问它

要在外部访问,请不要将其包含在$(document).ready(函数

中 像这样: -

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

答案 1 :(得分:2)

就像其他人已经指出的那样:在处理DOM-Elements时只使用$().ready,因为您使用var关键字(就像您应该这样),您的变量无法访问。 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的范围和闭包的一些有趣的问答:

关于搞乱全球范围的一个好答案:

答案 2 :(得分:0)

在这种情况下,不需要将通知对象包装在dom中...因为从它的外观来看,你在创建对象时没有创建任何dom元素引用...唯一重要的是任何方法处理dom元素的invokation必须在dom准备就绪。

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

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

如果你在dom ready处理程序中声明变量,那么它就成为dom ready处理程序的局部变量...所以它不能在dom ready处理程序之外访问...

另一种解决方案是将变量添加到dom就绪句柄中的全局范围,如

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

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

答案 3 :(得分:0)

您只需要一份文件 这只会声明在脚本中自由移动的变量。

参见示例:

的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;
}

答案 4 :(得分:0)

在文档准备好之前,将加载所有JavaScripts。

script.js中创建一个引用notify对象的单独函数,然后从$(document).ready

调用该函数

答案 5 :(得分:-1)

试试这个。

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