使用Javascript在一个页面上的多个实例 [英] Multiple instances on one page with Javascript
问题描述
我无法弄清楚如何处理我想在页面上运行的一些javascript函数的多个实例。它是我正在开发的自定义分析项目的一部分。
I'm having trouble figuring out how to handle multiple instances of some javascript functions that I want to run on a page. It's part of a custom analytics project that I'm working on.
我有一个名为initData（）的函数;该函数使用setInterval调用另一个函数，该函数每1000毫秒向我的服务器发送一次ping。
I have a function called initData(); The function uses a setInterval to call another function that sends a ping to my server every 1000ms.
问题是我希望能够在一个页面上拥有多个此函数的实例。我目前的问题是，只要调用第二个实例，它就会覆盖第一个实例中的所有变量。
The problem is that I want to be able to have more than one instance of this function on a single page. My current problem is that as soon as the second instance is called it overwrites all the variables from the first.
解决这个问题的最佳方法是什么？有没有办法使函数分离和/或私有实例，以便它们不会相互干扰？
What's the best way to get around this? Is there a way to make the functions seperate and/or private instances so that they don't interfere with each other?
推荐答案
默认情况下，所有变量（以及函数声明）都存在于全局命名空间中。
By default all variables (and therefore also function declarations) live in the global namespace.
在javascript中引入单独命名空间的唯一方法是使用函数调用。这就是你如何做到的：
The only way to introduce a separate namespace in javascript is with a function call. This is how you do that:
(function () {
/* your stuff here */
}());
你将你的东西包装在一个匿名函数中，然后立即调用它。这样，即使名称相同，您的功能也将是独立的。
You wrap your stuff in an anonymous function, and then call it immediately. This way your functions will be separate, even with the same name.
因此，例如，如果你有这样的代码：
So, for instance, if you have code like this:
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（）{}（））; 中，那么它们将是分开的。
then one initData will overwrite the other initData. However, if you wrap each in its own (function () {}()); then they will be separate.
(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.
}
}());
请注意，这些名称不再位于全局命名空间中，因此它们也不可用在匿名函数之外使用。
Be aware though, that these names are no longer in the global namespace, so they are also not available for use outside of the anonymous function.
控制你在全局命名空间，通过一个全局对象公开你需要的东西，通常是所有大写字母。
To control how much and what you expose in the global namespace, it is custom to expose what you need through one global object, usually in all capital letters.
FOO.module1.initData();
FOO.module2.initData();
您可以通过确保FOO存在来实现此目的，如果不存在：创建它。
You would do this by making sure FOO exists, and if it doesn't: create it.
var FOO = this.FOO || {};
模块名称空间相同：
FOO.module1 = FOO.module1 || {};
然后在匿名函数内部，展示你想要的东西。
and then inside of the anonymous function, expose what you want.
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();
最后一个提示
控制器之类write取决于 module1.js 和 module2.js ，需要最后加载。使用 jQuery 的 document.ready 之类的东西可以避免这种情况，等待所有脚本加载。
A last tip
The controller like written is dependent on both module1.js and module2.js and needs to be loaded last. That can be avoided using something like jQuery's document.ready, making it wait for all scripts to load.
jQuery(document).ready(function () {
FOO.module1.initData();
FOO.module2.initData();
});
如果您还没有使用jQuery，可以使用像domReady 以避免臃肿。
If you're not already using jQuery, you can use a small script like domReady to avoid the bloat.
这篇关于使用Javascript在一个页面上的多个实例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
