每頁有多個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. 中的onClick爲myShinyRedButton執行 '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動畫（）函數。

有幾個在線教程可以幫助。就像這樣：

• Creating a plugin
• Another tutorial

Answer 2

它看起來像你只需要一個little OO。