0

如果有人可以帮助我，我在闭包和检索声明的私有变量时遇到问题，该变量是 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 = $('#shoe-preview') 对此进行了测试，然后使用所需的标记调用 html() 并且它工作正常。

这个问题很小，但它让我发疯。我在写 var shoePreview = $('#shoe-preview'); 以错误的方式或有更多的东西。任何帮助将不胜感激。

谢谢。

4

1 回答 1

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();
    });
});
于 2012-11-18T03:26:24.937 回答