Javascript module pattern and global variable

Question

Seems simple enough, but I cannot get it to work:

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

I call _imagePreview.load() first, then _imagePreview.rotate(), but I can't seem to get the correct value for canvas.

The rotate method is being called from a click event, after the selects a file and it is drawn into the canvas, so rotate will never be executed before load. Example:

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

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

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

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

score 1 · Accepted Answer · answered May 16 '15 at 01:54

1

The problem is that you are calling _imagePreview() multiple times. Each call creates a new set of load and rotate functions with their own canvas variable.

Call _imagePreview once, store the result call load and rotate from that object.

answered May 16 '15 at 01:54

Felix Kling

795,719
175
1,089
1,143

garryp · Answer 2 · 2015-05-15T23:03:22.190

0

That Javascript isn't even valid. Are you getting errors (you will be)? The returned object should look something like this (note the extra enclosing curly braces).

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

If you want to access rotate from load following the sort of approach you are using you might do this:

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

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

return {
    load: _load,
    rotate: _rotate
};

edited May 15 '15 at 23:03

answered May 15 '15 at 22:29

garryp

5,508
1
29
41

Didn't want to paste ALL the code in, just the pertinent. Based on your snippet, how can I access variable set in `load` from `rotate`? – Mike Purcell May 15 '15 at 22:40
See my edit. You could also make `load` and `rotate` anonymous functions. There are probably many other approaches you could take too. – garryp May 15 '15 at 23:05

score 0 · Answer 3 · answered May 15 '15 at 22:49

You simply create the private variables first, then return an object that has functions that use those private variables.

_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 module pattern and global variable

3 Answers3