Question

看起来很简单，但我无法让它发挥作用：

// Demonstrative only, how can I access canvas from rotate?
_imagePreview = function()
{
    var canvas = '';

    return {

        load: function() {

            fileReader.onload = function(e) {

                image = new Image();

                image.onload = function() {

                    // Empty string (expected)
                    console.log(this.canvas);

                    canvas = $('#myCanvas')[0];

                    // Canvas object (expected)
                    console.log(this.canvas);

                    return true;
                }

            }

           image.src = e.target.result;            
        }

        fileReader.readAsDataURL(file);
    },

    rotate: function() {

        // Undefined (unexpected)
        console.log(canvas);
    }
}

我首先调用_imagePreview.load（），然后调用_imagePreview.rotate（），但我似乎无法获得画布的正确值。

从click事件调用rotate方法，在选择文件并将其绘制到画布后，rotate将永远不会在load之前执行。例如：

$("#rotate-clockwise").click(function() {

    _imagePreview().rotate('+', 90);
});

$("#rotate-counter-clockwise").click(function() {

    _imagePreview().rotate('-', 90);
});

Answer 1

问题是您多次致电_imagePreview()。每次调用都会使用自己的load变量创建一组新的rotate和canvas函数。

致电_imagePreview 一次，保存该对象的结果通话load和rotate。

Answer 2

Javascript甚至无效。你得到错误（你会）？返回的对象应该看起来像这样（注意额外的括号花括号）。

return {
    load: function() {
        // ...
    },
    rotate: function() {
        // ...
    }
};

如果您希望按照您正在使用的方法从负载访问旋转，则可以执行以下操作：

var _rotate = function() {
    // ... do rotation
};

var _load = function() {
    _rotate();
   // ... do some other stuff ...
};

return {
    load: _load,
    rotate: _rotate
};

Answer 3

您只需先创建私有变量，然后返回一个具有使用这些私有变量的函数的对象。

_imagePreview = function() {
    var canvas = 'I am a canvas!';

    return {
        load: function() {
            canvas = 'I am a loaded canvas!';
        },
        rotate: function() {
            console.log(canvas);
        }
    };
}

_imagePreview().rotate();
// I am a canvas!

var preview = _imagePreview();
preview.load();
preview.rotate()
// I am a loaded canvas!

Javascript模块模式和全局变量

3 个答案: