在現有的插件添加和壓倒一切的功能

Question

下面是我的我的插件：

(function($) { 
    $.fn.myPlugin = function(options) { 
     var opt = $.extend({}, $.fn.myPlugin.defaults, options); 

     this.foo() 
     { 
      alert('test'); 
     } 


    } 
    $.fn.myPlugin.defaults = { 
    }; 
}); 

現在我想它不觸及我想現有的插件+，我想要的新功能的全功能的原始插件即延長。下面是新的東西，我需要：

首先： 新插件的名稱「myPlugin2」

二： 現有插件的「foo」的功能，應在新的插件被覆蓋與此：

function foo() { 
    alert('test2'); 
} 

三： 我需要多一個方法添加到我的新插件功能說foo2的（）{}。

你能幫我實現嗎？

Answer 1

您需要在您的默認值來定義你的默認名稱和Foo事件DECL aration：

$.fn.myPlugin.defaults = { 
    name: 'test', 
    onFoo: function() { 
      alert(this.name); 
     }, 
    onFoo2: function() { 
      // your default behaviour for foo2 
     } 
}; 

然後，當有人撥打你的插件，就可以覆蓋默認值，在這種情況下name：

$("#myControl").myPlugin({ 
    name: 'test2' 
    }); 

注意，他們並不需要重寫onFoo，因爲它會顯示帶有test2的警報。無論如何，如果他們需要重寫它做不同的事情，那麼他們應該：

$("#myControl").myPlugin({ 
    name: 'test2', 
    onFoo: function() { 
      alert('onFoo overrired'); 
      }, 
    onFoo2: function() { 
      alert('onFoo2 overrired'); 
      } 
    }); 

在你的插件，你調用foo的方法爲

(function($) { 
    $.fn.myPlugin = function(options) { 
     var opt = $.extend({}, $.fn.myPlugin.defaults, options); 

     // if onFoo is defined then call it 
     if (opt.onFoo) { 
      opt.onFoo(); 
     } 

     // if onFoo2 is defined then call it 
     if (opt.onFoo2) { 
      opt.onFoo2(); 
     } 
    } 

    $.fn.myPlugin.defaults = { 
     name: 'test', 
     onFoo: function() { 
       alert(this.name); 
       }, 
     onFoo2: function() { 
       // your default behaviour for foo2 
       } 
    }; 
}); 

你應該使用這種技術的公共方法/屬性，你想暴露給你的插件的用戶。 我沒有測試，但應該工作

編輯 您需要檢查，如果該事件被設置調用前：

// if onFoo is defined (not null) then call it 
if (opt.onFoo) { 
    opt.onFoo(); 
} 

你已經在爲onFoo和onFoo2事件，但你的插件的用戶可以選擇禁用它：

$("#myControl").myPlugin({ 
    onFoo: null 
    }); 

在這種情況下，雖然你已經定義了一個onFoo事件，你的插件的用戶決定ignor通過將其設置爲null。所以，即使你已經定義了一個事件，你永遠不知道別人會用它來做什麼，因此最好保持安全並檢查是否爲空。

再次，你需要小心你暴露給最終用戶的東西，因爲設置/取消設置的事件不應該打破你的插件

Answer 2

如果這是任何體面編碼的插件，你不應該能夠改變它的方法。它應該作出任何這並不意味着要調用一個內部函數，即：

$.fn.oldPlugin = function() { 

    var foo = function() { 
     alert('old code'); 
    }; 
}; 

有沒有辦法來調用foo或覆蓋它。

如果您不需要更改任何的方法/函數，那麼你可以使用$.extend($.fn.pluginName, {/*your methods/properties*/};

什麼這一切真的可以歸結爲是：

• 如何你想擴展插件編碼
• 如果你想覆蓋或只延長它的功能