使用Javascript在一个页面上创建多个实例

Question

我遇到了一个问题，不知道如何处理我想在页面上运行的一些 JavaScript 函数的多个实例。这是我正在开发的自定义分析项目的一部分。

我有一个名为 initdata() 的函数。该函数使用 setInterval 调用另一个函数，每 1000 毫秒发送 ping 到我的服务器。

问题在于，我想在单个页面上能够拥有多个此函数的实例。我的当前问题是，一旦第二个实例被调用，它就会覆盖所有来自第一个实例的变量。

有什么好的方法可以解决这个问题吗？是否有一种方法可以使函数成为独立和/或私有实例，以便它们彼此不干扰？

- sicr

---

“instance”是什么意思？我不确定我理解了。你能展示一些代码吗？ - Pekka

这似乎听起来你在使用全局变量...你把你的代码展示出来如何？ - Felix Kling

Answer 1

默认情况下，所有变量（因此也包括函数声明）都存在于全局命名空间中。

在JavaScript中引入一个单独的命名空间的唯一方法是通过函数调用。以下是如何实现：

 (function () {
     /* your stuff here */
 }());

你可以将你的代码用匿名函数包裹起来，并立即调用它。这样，即使有相同名称的函数，它们也是独立的。

例子

比如说，如果你有以下代码：

var my, local, data;

function initData() {
    // use my, local and data here.
}

如果你有其他地方:

var some, other, data;

function initData() {
    // use some, other, data here.
}

那么一个initData将覆盖另一个initData。但是，如果你将它们分别包装在自己的(function () {}());中，那么它们将是独立的。

(function () {
    var my, local, data;

    function initData() {
        // use my, local and data here.
    }
}());


(function () {
    var some, other, data;

    function initData() {
        // use some, other, data here.
    }
}());

请注意，这些名称不再在全局命名空间中，因此它们在匿名函数之外也无法使用。

一个全局对象

为了控制在全局命名空间中暴露多少和什么内容，通常会通过一个全局对象来公开所需内容，通常使用所有大写字母。

FOO.module1.initData();
FOO.module2.initData();

你需要确保FOO存在，如果不存在，则创建它。

var FOO = this.FOO || {};

对于您的模块命名空间也适用相同规则：

FOO.module1 = FOO.module1 || {};

然后在匿名函数内部，暴露你想要的内容。

完整示例

module1.js：

var FOO = this.FOO || {};
FOO.module1 = FOO.module1 || {};

(function () {
    var my, local, data;

    function initData() {
        // use my, local and data here.
    }

    FOO.module1.initData = initData;
}());

module2.js：

var FOO = this.FOO || {};
FOO.module2 = FOO.module2 || {};

(function () {
    var some, other, data;

    function initData() {
        // use some, other and data here.
    }

    FOO.module2.initData = initData;
}());

控制器.js：

FOO.module1.initData();
FOO.module2.initData();

一个最后的提示

如上所述，该控制器依赖于 module1.js 和 module2.js，需要在最后加载。可以使用类似 jQuery 的 document.ready 来避免这种情况，使其等待所有脚本加载。

jQuery(document).ready(function () {
    FOO.module1.initData();
    FOO.module2.initData();
});

如果你还没有使用jQuery，你可以使用一个小型脚本domReady来避免臃肿。

- Magnar