javascript - JQuery 对象似乎没有在模块中分配值

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

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

Esailija 的眼睛比我好得多。Foo.Controller被设置为IIFE的结果。由于该函数不返回任何内容，因此将其设置为undefined. 也许您想返回一个具有您的init功能的对象？$page在这种情况下，您可以通过设置inside of来避免整个问题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");