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

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

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

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

最好的办法是什么？有没有办法使函数分离和/或私有实例，这样它们就不会相互干扰？

默认情况下，所有变量（以及函数声明）都位于全局命名空间中

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

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

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

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

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

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

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

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

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

最后的提示
像write这样的控制器依赖于
module1.js
和
module2.js
，需要最后加载。使用类似于
jQuery
的
document.ready
，让它等待所有脚本加载，可以避免这种情况

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

如果您还没有使用jQuery，可以使用一个小脚本来避免膨胀。
您所说的“实例”是什么意思？我不太明白。你能展示一些代码吗？听起来好像你使用了全局变量。。。展示你的代码怎么样？