javascript - 每页有多个JavaScript小工具

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

要使用我的小工具，请包含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）。其中的两个示例是：


myShinyRedButton的onClick执行'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（）函数。

有一些在线教程可以提供帮助。像这样：


Creating a plugin
Another tutorial

关于javascript - 每页有多个JavaScript小工具，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/1875693/