每页有多个Javascript小工具

我正在用Javascript和jQuery编写一个内部小工具。我以面向对象的方式编写了它，使用了一个名为ggObj的顶级对象，并通过ggObj.prototype指定了方法

要使用my gadget，请包含myGadget.js文件，并在页面中调用函数makeMyGadget（）。我的JS文件如下所示：

var myGG ; 

function ggObj = {  // lots of stuff here }
ggObj.prototype = { // more stuff here }

var makeMyGadget = function() {

   myGG = new ggObj();
   myGG.initialize(); 
   myGG.print(); // write HTML for my gadget to the 
                 // browser, a la a HERE DOC
   myGG.doOtherFancyStuff();
}

到目前为止，它运行良好

我的问题是，这个小工具并没有像我希望的那样封装。现在，每页只能有一个小工具（myGG）。更糟糕的是，在我的代码中，我不得不引用特定对象实例（myGG）。这方面的两个例子是：

onClick for myShinyRedButton执行“myGG.submitForm（）”，然后

要制作“动画”，我有以下代码行：

this.intervalID=setInterval（“myGG.pageData（1）”，this.options.animate）

---

我需要做哪些更改才能正确封装我的代码，以便一个页面上可以存在多个小工具？

您可能想看看如何创建jQuery插件

$.fn.MYPLUGINNAME = function() {
  return this.each(function() {
  //your code to manipulate the element here
  //you can use this to refer to a specific instance of an element
  //if you apply the plugin to multiple elements on the page.
 });
}

然后可以将MYPLUGINNAME添加到页面上的任何元素

 $('a').MYPLUGINNAME();

因此，要制作动画等，现在可以使用内置的jQuery animation（）函数

网上有几个教程可以帮助你。像这样：

---

看起来您只需要一个。我希望使用原生JS（非jQuery）方法，但我会尝试一下。谢谢你的主意。我的“动画”正在列表中翻页，因此jQuery的animate（）对此没有帮助。