jQuery插件的每個實例如何擁有自己的屬性和方法？

我正在學習如何創建jQuery插件並使用模塊模式構建了一個。如果我只應用一次，它會起作用，但是，如果我多次應用，則所有人都會使用最後一個人的設置進行初始化。jQuery插件的每個實例如何擁有自己的屬性和方法？

例如，如果我第一次做$('#div1').myPlugin();，然後$('#div2').myPlugin({myProperty :'mydiv2Property'});，$('#div1') myProperty從myDefaultProperty更改爲mydiv2Property。用不同的方法初始化時會發生同樣的事情。

我在http://jsbin.com/eWePoro/1/處有一個工作（很好，幾乎可以工作！）的例子，下面列出了我的完整腳本。

如何更改此腳本，以便每次插入插件時，它只使用自己的屬性和方法？謝謝

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
     <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" /> 
     <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 = { 
        myProperty :'myDefaultProperty', 
        myMethod1 :function() { 
         console.log('myMethod1',this,this.myProperty); 
        }, 
        myMethod2 :function() { 
         console.log('myMethod2',this,this.myProperty); 
        } 
       }; 

       var methods = { 
        init : function (options) { 
         var settings = $.extend(defaults, options || {}); 
         settings.myMethod1(); 
         return this.each(function() { 
          $(this).click(function(e) { 
           settings.myMethod2(); 
          }); 
         }); 
        }, 
        destroy : function() { 
         //Anything else I should do here? 
         delete settings; 
         return this.each(function() {}); 
        } 
       }; 

       $.fn.myPlugin = 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.myPlugin'); 
        }  
       }; 

       }(jQuery) 
      ); 
      $(function(){ 
       $('#div1').myPlugin(); 
       $('#div2').myPlugin({ 
        myProperty :'mydiv2Property' 
       }); 
       $('#div3').myPlugin({ 
        myMethod1 :function() {console.log('myMethod1_new',this,this.myProperty);} 
       }); 
       $('#div4').myPlugin({ 
        myMethod2 :function() {console.log('myMethod2_new',this,this.myProperty);} 
       }); 

      }); 
     </script> 
    </head> 

    <body> 
     <div id='div1'>div1</div> 
     <div id='div2'>div2</div> 
     <div id='div3'>div3</div> 
     <div id='div4'>div4</div> 
    </body> 
</html>

來源

2013-12-18 user1032531

@zeroflagL。我認爲這是我最初使用的文檔，但是是舊版本。但不能確定，我會重新閱讀。謝謝 – user1032531

的問題是在這裏：

var settings = $.extend(defaults, options || {});

你實際上是修改defaults在這裏與新的屬性。所以下次你運行相同的代碼時，defaults會發生變異。你或許應該這樣做：

var settings = $.extend({}, defaults, options);

這將創建一個新的設置對象通過擴展之前克隆defaults每次。

DEMO：http://jsbin.com/eWePoro/2

來源

2013-12-18 18:36:57 David

大衛，你真棒！我最初從某個教程中得到了一段代碼（甚至不記得），並且從來沒有懷疑過它。謝謝！！！ – user1032531

答案很完美。如果您在我的腳本中看到其他任何缺陷，請告訴我。 – user1032531

jQuery插件的每個實例如何擁有自己的屬性和方法？

回答

相關問題