如何使用插件方法創建Jquery插件並維護鏈連接性？

Question

我想創建一個Jquery插件，它保持鏈接性並具有Jquery Plugins/Authoring中指定的公共方法。其複雜性在於它試圖維護某些我想要公共方法使用的變量。

這是我的jsfiddle：http://jsfiddle.net/badmash69/9cqcj/2/

javascript code : 

(function($){ 

    var methods = { 
    init : function(options) { 
     this.options = options; 
    } 
    , add_that: function (elem) { 

     $(this).append(elem); 
     return (this); 
    } 
    , show_parent: function(){ 
     // this is a simple test to see if the plugin vars are accessible 
     alert("parent id=" + $(this).parentId) 
    }    
    , add_this: function (elem) { 
     return methods.add_that.apply(this,elem); 
    } 
    }; 

    $.fn.test = function (method) { 
     var args = method; 
     var argss = Array.prototype.slice.call(args, 1);  


     return this.each(function(){ 

      var $this = $(this); 
      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.test'); 
    }   


      var element = $(this); 
      var parentId= element.parent().attr("id") 

     });  


    }; 

})(jQuery); 

$('#test').test('add_this',$('<div>Hello World d</div>')); 

$('#test').test('show_parent'); 
​ 

HTML代碼

<div id="holder"> 
<div id="test"></div> 
</div> 

我無法弄清楚什麼，我摻雜錯在這裏。 我該如何使它工作？我非常感謝任何幫助。

Answer 1

看看這個演示：http://jsfiddle.net/9cqcj/11/

當他們建議，爲了保持數據的話，最好使用.data：

 return this.each(function(){   
      var $this = $(this); 
      $this.data("parentId",$this.parent().attr("id")); 
.... 

（假設你在一組需要的每個元素的parentId的）

另外，您在調用方法時遇到問題：

return this.each(function(){ 

      var $this = $(this); 
      if (methods[method]) { 
     return methods[ method ].apply(this, Array.prototype.slice.call(arguments, 1)); 

最後一行，arguments - 使用傳遞給函數的參數.each。爲了獲得原始參數，在調用方法之前將它們保存到變量中：

$.fn.test = function (method) { 
     var args = arguments;  
     return this.each(function(){   
      var $this = $(this); 
      $this.data("parentId",$this.parent().attr("id")); 
      if (methods[method]) { 
     return methods[ method ].apply(this, Array.prototype.slice.call(args , 1)); 

在最後一行中將參數替換爲args。

此外，當您使用.apply，第二個參數應該是一個數組：

return methods.add_that.apply(this, [elem]); 

如果是這樣的：

return methods.add_that.apply(this, elem); 

你可以得到意想不到的問題。例如，嘗試用簡單的字符串"test"替換elem，看看你將在控制檯中得到什麼。或者，如果您將傳遞jQuery對象，您將在調用的方法中獲得DOM對象

Answer 2

，我這樣做的方法是使用$。數據，你可以有特定的對象本地變量，「公共」 /「私有」的方法，等在這裏不用在我怎麼會做一個小例子，它

(function($){ 
     var myTestMethods = function() { 
      // local variables 
      var last_added; 

      // local "private" methods 
      var init=function(options) { 
       this.options = options; 
       last_added = null; 
       return this; 
      }; 

      var add_that=function(elem) { 
       last_added = elem; 
       this.append(elem); 
       return this; 
      }; 

      var show_parent=function() { 
       alert("parent id=" + this.parent().attr('id')); 
      } 

      return { // this are your obj "public" methods 
       // notice we are not listing add_that method, therefore this method will be a "private" method 
      init : init, 
      show_parent: show_parent, // you can publish a private method 
      get_last_added: function(){ 
       return last_added; // you can access local variables 
      }, 
      add_this: function (elem) { 
       return add_that.apply(this, elem); // you can also run local methods 
      } 
      } 
     }; 

     $.fn.test = function (method) { 
      var obj_data = this.data('myTestData'); 
     if (typeof(obj_data) != "undefined") { 
      if (obj_data[method]) { 
      return obj_data[method].apply(this, Array.prototype.slice.call(arguments, 1)); 
      }else { 
      $.error('Method ' + method + ' does not exist on jQuery.test'); 
      } 
     } else { 
      if (typeof(method) === 'object' || ! method) { 
      obj_data = myTestMethods(); 
      this.data('myTestData', obj_data); 
      return obj_data.init.apply(this, arguments); 
      } 
     } 
     }; 

    })(jQuery); 

    $('#test').test(); //init 

    $('#test').test('add_this',$('<div>Hello World d</div>')); 
    $('#test').test('show_parent'); 

此代碼有小測試，所以可能會有小錯誤，但這會告訴你如何做你想做的事情的基本想法。