从jQuery文档准备中访问变量

Question

我有一个这样简单的东西:

function init() {
    var $something = 'something';
}
jQuery(document).ready(function($) {
   init();
   alert($something);
}

我认为这将工作，但它没有，控制台说$something没有定义。有什么问题吗?很多谢谢!

Answer 1

$something是在函数'init'的作用域中定义的，所以你只能从该函数中原样访问它。如果您想要返回一个值，您可以像这样返回它:

function init() {
    var $something = 'something';
    return $something;
}
jQuery(document).ready(function($) {
   var $something = init();
   alert($something);
}

请注意，这两个变量具有相同的名称(通常不是一个好主意)。它们都在各自的作用域中定义，因此它们是完全不同的变量。

另一种模式可能是包装整个内容并使用该作用域，如下所示:

(function () {
    var $something;
    function init() {
        $something = 'something';
    }
    jQuery(document).ready(function($) {
        init();
        alert($something);
    }
})();

这样你有一个单独的变量，但你避免污染全局命名空间。

编辑:

对于你的评论，可以这样写:

var newscope = function () {
    var $something;
    function init() {
        $something = 'something';
    }
    jQuery(document).ready(function($) {
        init();
        alert($something);
    }
}
newscope();

但是我已经定义了这个函数，并且基本上在同一时间调用它，而不必给它一个名字

Answer 2

这是一个范围问题。

$something是在init()函数范围内定义的，因此，当init()函数完成时，它将被处理。

Answer 3

用var声明的变量对于声明它们的闭包来说是局部的。正如您所发现的，这意味着，因此，在闭包之外，它们是不可访问的。

有很多种方法，每种方法都意味着不同的设计模式。这里有一个你可以使用的模式:

({
    init: function() {
        this.something = 'hello';
        jQuery(function() { this.dom_ready(); }.bind(this));
    },
    dom_ready: function() {
        //DOM code here
        alert(this.something); //hello
    }
}).init();

这里我声明了一个对象或命名空间的几个方法。因为它们属于这个对象，并且在这个对象的上下文中被调用，所以它们之间通过属性而不是变量进行通信。

变量因此被降级为只在声明它们的闭包内(而不是在闭包外)有用。

此模式的一个优点是可以将需要等待DOM准备好的代码与不需要等待DOM准备好的代码分开。这是通过使用专用的dom_ready方法实现的。