如何將實用方法添加到jQuery插件？

我通常使用下面的設計模式來創建jQuery插件（http://jsbin.com/vegevido/1/）。如何將實用方法添加到jQuery插件？

對於這一個，我希望添加一個實用方法，它不會像普通的jQuery插件那樣應用於元素，但可以由父腳本使用。

如下圖所示，我添加了由父腳本使用$('#elem').makeRed('multiply',5,3)訪問的實用程序方法multiply。

這是我應該如何實現這個？看起來像使用myPlugin.multiple(5,3)這樣的方法訪問此方法會更好，因爲它與#elem無關。

感謝

<!DOCTYPE html> 
<html> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
     <title>Testing</title> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js" type="text/javascript"></script> 
     <style type="text/css"> 
     </style> 
     <script type="text/javascript"> 
      (function($){ 
       var defaults = {}; 

       var methods = { 
        init : function (options) { 
         var settings = $.extend({}, defaults, options); 
         return this.each(function() { 
          $(this).css('color', 'red'); 
         }); 
        }, 
        makeBlue : function() { 
         $(this).css('color', 'blue'); 
        }, 
        multiply : function (x,y) { 
         return x*y; 
        }, 
        destroy : function() { 
         return this.each(function() {}); 
        } 
       }; 

       $.fn.makeRed = function(method) { 
        if (methods[method]) { 
         return methods[method].apply(this, Array.prototype.slice.call(arguments, 1)); 
        } else if (typeof method === 'object' || ! method) { 
         return methods.init.apply(this, arguments); 
        } else { 
         $.error('Method ' + method + ' does not exist on jQuery.makeRed'); 
        }  
       }; 

       }(jQuery)); 
      $(function(){ 
       var myPlugin=$('#elem').makeRed(); 
       $('#makeBlue').click(function() {$('#elem').makeRed('makeBlue');}); 
       $('#multiply').click(function() { 
        console.log(myPlugin); 
        alert($('#elem').makeRed('multiply',5,3)); 
       }); 
      }); 
     </script> 
    </head> 

    <body> 

     <div id="elem">Some Text</div> 

     <button id="makeBlue">makeBlue</button> 
     <button id="multiply">multiply</button> 

    </body> 
</html>

來源

2014-02-21 user1032531

一個常見的模式是將其添加到插件定義，就像

$.makeRed = { 
    multiply: function (x, y) { 
     return x * y; 
    } 
}

演示：Fiddle

這是jQuery用戶界面如何暴露實用方法，如$.datepicker.formatDate(format, date, settings)

來源

2014-02-21 15:54:48

謝謝Arun，第一種方法效果很好。嘗試第二種「更清潔」的方式。這個劇本去哪裏？它怎麼叫？ – user1032531

@ user1032531結帳小提琴 –

小提琴不使用'$ .makeRed = {multiply：function（x，y）{return x * y;}}'，還是我錯過了什麼？ – user1032531

如何將實用方法添加到jQuery插件？

回答

相關問題