使用standalones扩展脚本，同时保持全球空间清洁

Question

I'm struggling with how solve this.

I have some scripts:

1. A simple plotter, for painting graphs on canvas.
2. A logger, post and get logs by XMLHttpRequest.
3. A cookie-handler, general cookie handler.
4. A IndexedDB script for saving and loading images.

They all work and can be used independently. Are self-contained and are kept in separate files.

They have a layout like:

var Plotter = (function () {
    'use strict';
    function Plotter (opt) {

    }

    Plotter.prototype.fun1 () {}
    Plotter.prototype.fun2 () {}

    return Plotter;
})();

---

Now I have a script where I combine these and in addition do a lot of other stuff.

var my_app = function () {
    this.init = function () {

    }
    this.fun2 = function () {
        this.plotter = new Plotter(opt);
        ...
    }
    this.fun3 = function () { }
};

---

What I would like is to design this in such a way that I do not have to pollute the global environment with nothing but my_app .

I do not want MyPlotter , MyLogger etc as global variables, but as:

my_app = function () {
    var Plot = Plotter;
    ...
    this.fun2 = function () {
        this.plotter = new Plot(opt);
    }
}

Is there a way to solve this?

In essence extend my_app with the other scripts whilst at the same time keeping the global space unpolluted.

It is perhaps OK when one have two or three extra globals, but not when it becomes much more as in 10-20,.. I do not even like to have two. Would stay at the one.

I obviously have to change things, but a main thing is to continue to keep the files separate such that I can use eg Logger in a separate project. It is easy solved with serverside code to generate a combined space for my_app and the separate scripts, but would rather like to not do it this way.

---

Edit:

After looking at TJ Crowder 's solution I guess I go for a variant of that for now. Believe perhaps I'm going to use a library of sorts, as in:

if ('Library' in global) {
    global.Library.Plotter = Plotter;
} else {
    global.Plotter = Plotter;
}

And then in my_app say:

this.Plott = new Library.Plotter();

It still leaves me with two globals, which is one more then I'd like, (I'm perhaps being stupid here), but then it would not be coupled to one name. An even better solution would perhaps be to always say:

if ('Library' in global) {
    global.Library.Plotter = Plotter;
} else {
    global.Library = {Plotter:Plotter};
}

This way it would be consistent across scripts. (Ouch, it looks so stupidly simple now.)

I know It is not what I asked, but it is perhaps a better way to do it after all. It is a design issue, and I am far from comfortable on if I'm doing it right.

Answer 1

You can do it like this:

(function (global) {
    'use strict';
    function Plotter (opt) {

    }

    Plotter.prototype.fun1 () {}
    Plotter.prototype.fun2 () {}

    if ('my_app' in global) {
        global.my_app.Plotter = Plotter;
    }
    else {
        global.Plotter = Plotter;
    }
})(this);

If you want to combine things into my_app , start off with a script that defines my_app in the global namespace as an object:

var my_app = {};

// or
this.my_app = {};

If you want to use Plotter on its own, don't, and it will create the Plotter global.