javascript - 使用独立脚本扩展脚本，同时保持全局空间清洁

Question

我正在努力解决这个问题。

我有一些脚本:

1. 一个简单的绘图仪，用于在 Canvas 上绘制图表。
2. 记录器，通过 XMLHttpRequest 发布和获取日志。
3. Cookie 处理程序，通用 Cookie 处理程序。
4. 用于保存和加载图像的 IndexedDB 脚本。

它们都可以工作并且可以独立使用。是独立的并保存在单独的文件中。

他们的布局如下:

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

    }

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

    return Plotter;
})();

<小时/>

现在我有一个脚本，可以将这些结合起来，此外还可以做很多其他事情。

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

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

<小时/>

我想要的设计方式是，除了 my_app 之外，我不必污染全局环境。

我不希望 MyPlotter、MyLogger 等作为全局变量，而是:

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

有办法解决这个问题吗？

本质上是用其他脚本扩展my_app，同时保持全局空间不受污染。

当一个人有两个或三个额外的全局变量时也许还可以，但当它变得像 10-20 那样多得多时，..我什至不喜欢有两个。会留在这家。

我显然必须改变一些事情，但主要的事情是继续将文件分开，以便我可以使用例如单独项目中的Logger。 使用服务器端代码为 my_app 和单独的脚本生成组合空间很容易解决，但我不想这样做。

<小时/>

编辑:

查看T.J. Crowder后的solution我想我现在会选择它的一个变体。相信也许我会使用某种库，如下所示:

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

然后在 my_app 中说:

this.Plott = new Library.Plotter();

它仍然给我留下了两个全局变量，这比我想要的多了一个(我在这里可能很愚蠢)，但它不会与一个名称耦合。更好的解决方案可能是总是说:

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

这样跨脚本就可以保持一致。 (哎呀，现在看起来太简单了。)

我知道这不是我要求的，但毕竟这可能是更好的方法。这是一个设计问题，如果我做得正确的话，我会感到很不舒服。

Answer 1

你可以这样做:

(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);

如果您想将内容组合到 my_app 中，请从在全局命名空间中将 my_app 定义为对象的脚本开始:

var my_app = {};

// or
this.my_app = {};

如果您想单独使用 Plotter，请不要这样做，它会创建全局 Plotter。