Question

I have written some javascript that I would to encapsulate in a closure so I can use it elsewhere. I would like do do this similar to the way jQuery has done it. I would like to be able to pass in an id to my closure and invoke some functions on it, while setting some options. Similar to this:

<script type="text/javascript">
    _snr("#canvas").draw({
        imageSrc : someImage.png
    });
</script>

I have read a lot of different posts on how to use a closure to do this but am still struggling with the concept. Here is where I left off:

_snr = {};
(function (_snr) {

    function merge(root){
        for ( var i = 1; i < arguments.length; i++ )
            for ( var key in arguments[i] )
                root[key] = arguments[i][key];
        return root;
    }

    _snr.draw = function (options) {

        var defaults = {
            canvasId : 'canvas',
            imageSrc : 'images/someimage.png'
        }

        var options = merge(defaults, options)

        return this.each(function() {
            //More functions here
        });
    };

    _snr.erase = function () {};

})(_snr);

When ever I try to call the draw function like the first code section above, I get the following error, ‘_snr is not a function’. Where am I going wrong here?

EDIT
Here is what I ended up doing:

function _snr(id) {

    // About object is returned if there is no 'id' parameter
    var about = {
        Version: 0.2,
        Author: "ferics2",
        Created: "Summer 2011",
        Updated: "3 September 2012"
    };

    if (id) {

        if (window === this) {
            return new _snr(id);
        }

        this.e = document.getElementById(id);
        return this;
    } else {
        // No 'id' parameter was given, return the 'about' object
        return about;
    }
};

_snr.prototype = (function(){

    var merge = function(root) {
        for ( var i = 1; i < arguments.length; i++) {
            for ( var key in arguments[i] ) {
                root[key] = arguments[i][key];
            }
        }
        return root;
    };

    return {
        draw: function(options) {

            var defaults = {
                canvasId : 'canvas',
                imageSrc : 'images/someimage.png'
            };

            options = merge(defaults, options);

            return this;
        },

        erase: function() {
            return this;
        }
    };
})();

I can now call:

<script type="text/javascript">
    _snr("#canvas").draw({
        imageSrc : someImage.png
    });
</script>

Answer 1

Because you declared _snr as an object and not a function. Functions can have properties and methods, so there’s various ways to achieve what you want, for example one of them would be say…

_snr = function(tag) {
this.tag = tag;
}

_snr.foo = function() {
//Code goes here
}

You can also pass the outer context into a closure to hide your variables from accidentally polluting the global namespace, so like…

(function(global) {
var _snr = function(tag) {
this.tag = tag;
}

_snr.foo = function() {
//Code goes here
}

//export the function to the window context:
global._snr = _snr;
})(window);

window._snr('#tag').foo('wat');

Happy coding.