Question

I’ve got a browser addon I’ve been maintaining for 5 years, and I’d like to share some common code between the Firefox and Chrome versions.

I decided to go with the Javascript Module Pattern, and I’m running into a problem with, for example, loading browser-specific preferences, saving data, and other browser-dependent stuff.

What I’d like to do is have the shared code reference virtual, overrideable methods that could be implemented in the derived, browser-specific submodules.

Here’s a quick example of what I’ve got so far, that I’ve tried in the Firebug console, using the Tight Augmentation method from the article I referenced:

var core = (function(core)
{
    // PRIVATE METHODS
    var over = function(){ return "core"; };

    var foo = function() {
        console.log(over());
    };

    // PUBLIC METHODS
    core.over = over;
    core.foo = foo;

    return core;
}(core = core || {}));


var ff_specific = (function(base)
{
    var old_over = base.over;

    base.over = function() { return "ff_specific"; };

    return base;
}(core));

core.foo();
ff_specific.foo();

Unfortunately, both calls to foo() seem to print “core”, so I think I’ve got a fundamental misunderstanding of something.

Essentially, I’m wanting to be able to call:

get_preference(key)
set_preference(key, value)
load_data(key)
save_data(key, value)

and have each browser do their own thing. Is this possible? Is there a better way to do it?

Answer 1

In javascript functions have “lexical scope”. This means that functions create their environment – scope when they are defined, not when they are executed. That’s why you can’t substitute “over” function later:

var over = function(){ return "core"; };

var foo = function() {
    console.log(over());
};
//this closure over "over" function cannot be changed later

Furthermore you are “saying” that “over” should be private method of “core” and “ff_specific” should somehow extend “core” and change it (in this case the private method which is not intended to be overridden by design)