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

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的document.ready,使得它等待所有的脚本加载.

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

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