Question

我正在用Javascript和jQuery编写一个内部小工具。我以面向对象的方式编写了一个名为top-level的对象，例如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）。其中两个例子是：

onClick for myShinyRedButton执行'myGG.submitForm（）'和
要做“动画”，我有以下代码行：

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（）函数。

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

Answer 2

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

每页多个Javascript小工具

2 个答案: