jquery闭包无法使用DOM对象检索私有变量

Question

如果有人可以帮助我，我会遇到闭包问题并检索声明的私有变量，这是由id使用jquery选择的元素。我有一个像这样的模块：

var package = package || {};

(function() {
        if(!package.slider)
                package.slider = {};

        function Slider() {
        }

        // --------- /Public Members --------- //
        Slider.prototype = {
            init: function(){
                _setEvents();
            }
        };

        // --------- Public Members --------- //


        // --------- Private Members --------- //
        var shoePreview = $('#shoe-preview');  /*somehow this variable does NOT get recognised even though I have it in the DOM.*/

        function _setEvents(){
            $.subscribe('getAllPerspectives', function(event){ _getAllPerspectives() });
            $.subscribe('showPreview', _show);
            $.subscribe('hidePreview', _hide);
        }

        function _getAllPerspectives(){
            _getAngleShoeImage(helper.getCurrentAngle());
            $.each(constants.angles, function(key, val){
                if(val != helper.getCurrentAngle()){
                    _getAngleShoeImage(val);
                }
            });
        }

        function _getAngleShoeImage(angle){
            var shoeImage = shoePreview;
            shoeImage.html('<p>Hello World</p>');

        }


        var that = new Slider();
        package.slider = that;

    })();
$(document).ready(function(){

    $.each(package, function (key, val){
        val.init();
    });
});

现在如果您查看代码，有一个名为shoePreview的变量，我认为该模块外部的任何内容都无法访问该变量。

现在在代码中的某个地方，我将调用一些触发_getAngleShoeImage的方法，其中我有一个名为shoeImage的变量，设置为私有的shoePreview变量。

问题是，一旦我尝试使用jquery的html（）调用，它似乎无法识别shoePreview变量是什么。

我用替换var shoeImage = $（＆＃39;＃shoe-preview＆＃39;）测试了这个，然后使用所需的标记调用html（），它运行正常。

这个问题很小，但它让我疯了。我在写var shoePreview = $（＆＃39;＃shoe-preview＆＃39;）;以错误的方式或其他更多的东西。任何帮助将不胜感激。

感谢。

Answer 1

这里只有一个问题： (function(){hackhackhack()})()字面意思是 - 运行闭包，这意味着您在准备好之前尝试访问DOM，您只需要在 init之后设置var ，而不是在main中功能，

var package = package || {};

(function() {
    if(!package.slider)
            package.slider = {};

    function Slider() {
    }

    // --------- /Public Members --------- //
    Slider.prototype = {
        init: function(){
            //New function here
            _setVars();
            _setEvents();
        }
    };

    // --------- Public Members --------- //


    // --------- Private Members --------- //
    //make it accessible for other proto functions;
    var shoePreview;

    function _setVars() {
       shoePreview=$('#shoe-preview'); // now it will be set when init() run not when object proto initialised
    }
    function _setEvents(){
        $.subscribe('getAllPerspectives', function(event){ _getAllPerspectives() });
        $.subscribe('showPreview', _show);
        $.subscribe('hidePreview', _hide);
    }

    function _getAllPerspectives(){
        _getAngleShoeImage(helper.getCurrentAngle());
        $.each(constants.angles, function(key, val){
            if(val != helper.getCurrentAngle()){
                _getAngleShoeImage(val);
            }
        });
    }

    function _getAngleShoeImage(angle){
        var shoeImage = shoePreview;
        shoeImage.html('<p>Hello World</p>');

    }


    var that = new Slider();
    package.slider = that;

})();
$(document).ready(function(){

    $.each(package, function (key, val){
        val.init();
    });
});