Javascript模块模式和全局变量

看起来很简单，但我无法让它工作：

// 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（），但似乎无法为画布获取正确的值

在选择文件并将其绘制到画布中后，将从单击事件调用rotate方法，因此在加载之前将永远不会执行

rotate

。例如：

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

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

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

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

---

那个Javascript甚至都是无效的。您是否（将）遇到错误？返回的对象应该是这样的（注意额外的封闭大括号）

如果要按照所使用的方法访问rotate from load，可以执行以下操作：

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

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

return {
    load: _load,
    rotate: _rotate
};

---

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

_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!

---

问题是您多次调用

\u imagePreview（）

。每次调用都会创建一组新的

load

和

rotate

函数，这些函数都有自己的

canvas

变量

---

调用

\u imagePreview

一次，从该对象存储结果调用

加载

和

旋转

。

不想粘贴所有代码，只想粘贴相关的代码。根据您的代码片段，如何从

旋转
访问
加载
中设置的变量？请参见我的编辑。您还可以使用
load
和
rotate
匿名函数。你也可以采取很多其他的方法。
_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!