实施例

Question

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

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

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

解决这个问题的最佳方法是什么？有没有办法使函数分离和/或私有实例，以便它们不会相互干扰？

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

最后一个提示

写入的控制器依赖于module1.js和module2.js，需要最后加载。使用jQuery的{{1}}之类的东西可以避免这种情况，等待所有脚本加载。

document.ready

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

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

1 个答案:

实施例

一个全局

完整示例

最后一个提示