javascript - 保护全局 Javascript "API"对象

Question

我目前有一个 Web 应用程序，它运行一个基于 Javascript 的全局 API，它是这样初始化的:

var Api = {
    someVar: "test",
    someFunction: function() {
        return "foo";
    }
}

这个 API 在 Web 应用程序中的许多“小部件”之间共享，它们都应该运行这个单一的 Api实例，以便它们可以相互传递数据。

AJAX 目前用于加载这些小部件，例如在 widgets/mywidget.html 中，它被放置在，比如说，<div id='widget_<random number>'>...</div> 中。

代码的某些其他部分可能会选择向 Api 添加更多功能，目前是这样做的:

Api.myExtension = {
    myNewFunction: function() {
        return "bar";
    }
}

但是，这种用法会产生一些问题:

问题一:如果一个 Widget(这些可能由第三方提供)决定在其中隐藏一些代码，并执行类似于 Api = {} 的操作，会怎样？ ，破坏全局Api var 一切都在继续，并破坏了整个应用程序？是否可以保护这个 Api从外部被覆盖的变量？只允许“扩展”(添加新东西)，但不允许“删除/更改”。即:

Api.foo = { test: "bar" } // allowed
Api.someVar = "changing the existing someVar"; // not allowed

以下代码位于“内部”Api ，例如:

var Api = {
    Debug: {
        Messages = new Array,
        Write: function() {
            Api.Debug.Messages.push("test"); // allowed
        }
    }
}

Api.Debug.Messages.push("test 2"); // not allowed

我想到的可能解决方案:

1. 假设我们简单地使用框架来解决这个问题。 Api提供的 s 现在彼此分开。但是，加载时会产生额外的开销 Api一次又一次如果我有很多Widget正在运行，它们无法再与小部件的“主机”(框架所在的页面)通信，例如，我可能想告诉主机显示通知:Api.Notify.Show("Test") , 但它不能这样做，因为这 Api完全独立于其他实例，无法与“宿主”通信

2. 使用类似于“getter”和“setter”函数的方法来读取和写入 Api。我不确定如何实现此功能，因此欢迎提供有关如何实现此功能的任何帮助!

3. 1/2 的混合物？

Answer 1

没有好的方法可以防止“第三方”小部件覆盖全局变量。通常，将最终应用程序放在一起的人有责任确保他们使用的任何 JavaScript 都不会乱扔全局 namespace 和发生冲突。在这个方向上，您可以做的最好的事情就是给您的“Api”起一个漂亮、独特的名字。

我认为对您有很大帮助的是“揭示模式”之类的东西，它是执行您提到的“getters 和 setters”的一种方式，如果您需要，还可以添加更多。

一个简单但没用的例子如下:

var Api = (function () {
    // private variable
    var myArray = [];

    return {
        addItem: function (newItem) {
            myArray.push(newItem);
        },
        printItems: function () {
            console.log("lots if items");
        }
    };
})();

Api.addItem("Hello, world");
Api.extensionValue = 5;

我认为您应该清楚地描述共享或“单一”数据的内容，并将这些项目保密，就像我示例中的 myArray 一样。