每页多个 Javascript 小工具

Question

我正在用 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)。两个例子是：

1. myShinyRedButton 的 onClick 执行“myGG.submitForm()”，并且

2. 要做“动画”，我有以下代码行：

   this.intervalID = setInterval("myGG.pageData(1)", this.options.animate);

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

Answer 1

你可能想看看创建一个 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

Answer 2

看起来您只需要一个little OO。