javascript - 使用 Javascript 在一个页面上显示多个实例

Question

我无法弄清楚如何处理我想在页面上运行的某些 javascript 函数的多个实例。这是我正在进行的自定义分析项目的一部分。

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

问题是我希望能够在单个页面上拥有此功能的多个实例。我当前的问题是，一旦调用第二个实例，它就会覆盖第一个实例中的所有变量。

解决这个问题的最佳方法是什么？有没有办法让函数成为独立的和/或私有(private)的实例，这样它们就不会相互干扰？

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

controller.js:

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

最后一个提示

所写的 Controller 依赖于 module1.js 和 module2.js 并且需要最后加载。这可以通过使用 jQuery 的 document.ready 来避免，让它等待所有脚本加载。

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

如果您还没有使用 jQuery，您可以使用像 domReady 这样的小脚本以避免膨胀。