Question

 var Foo = Foo || {};

Foo.Controller = (function ($) {
    var $page = $("#bar");
    var init = function () {
            console.log($page); // outputs: []
            console.log($.isEmptyObject($page)); // outputs: false
        }
    var public = {
        init: init
    }
    return public;
})(jQuery);
$("#FooPage").bind("pageinit", function () {
    Foo.Controller.init();
});

为什么$ page似乎没有赋值？我正在使用JQuery Mobile，而pageinit是移动等效于文档就绪。

Answer 1

$page未在pageinit上分配，它会立即分配。试试这个：

var init = function () {
    console.log($page); // outputs: []
    console.log($('#bar'); // TELL US IF THIS LOGS THE RIGHT THING!
    console.log($.isEmptyObject($page)); // outputs: false
};

EDIT（Esailija指出了另一个问题）：

Esailija的眼睛好于我。Foo.Controller被设置为IIFE的结果。由于该函数不返回任何内容，因此将其设置为undefined。也许你想要返回一个具有init功能的对象？在这种情况下，您可以通过在$page内设置init来避免整个问题。

var Foo = Foo || {};

Foo.Controller = (function($) {
    var init = function () {
        var $page = $("#bar");
        console.log($page); // outputs: []  <-- not anymore (if #bar is really on the page)
        console.log($.isEmptyObject($page)); // outputs: false
    };
    return {init:init};
})(jQuery);
$("#FooPage").bind("pageinit", function () {
    Foo.Controller.init();
});

Answer 2

即使您将调用推迟到.init，立即调用的（应该是）创建init函数的函数表达式定义var $page = $("#bar");在页面加载之前。

JQuery对象似乎没有在模块中赋值

2 个答案: