Question

我搜索了很多，但我仍然不确定，这是做我想要的最好的方法。我正在编写一个jQuery插件，它已经有效但现在我想改进我的代码，因为我在写这篇文章的时候已经知道了更多的功能。

作为基础，我从官方jQuery页面http://docs.jquery.com/Plugins/Authoring（插件选项）中获取代码

我不会在这里使用我自己的代码，因为来自jQuery的代码已经足够我的问题

(function( $ ){

  var methods = {
    init : function( options ) { 
      var defaults = {
        value1: '',
        value2: ''
       };
       var options = $.extend(defaults, options);
       return this.each(function(){
         value3 = $(this).parent();
       });
    },
    log : function( ) {
      console.log(value3);
      console.log(defaults.value1);
    }
  };

  $.fn.my_plugin = function( method ) {

    // Method calling logic
    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.tooltip' );
    }    

  };

})( jQuery );

这就是我的插件的结构。它现在刚被剥离;）现在我想做这样的事情：

$('#element1').my_plugin({value1 : 1, value2 : 2});
$('#element2').my_plugin({value1 : 3, value2 : 4});

现在我想在控制台中记录这些值（不完全是我想要的实际内容，但对于我的问题，它已经足够了）

此外，我想使用这样的功能

$('#element1').my_plugin('log');
$('#element2').my_plugin('log');

这是我的第一个问题。当我在日志函数中时，如何从init函数中获取变量？最好的方法是什么？

我尝试将值设置为全局，如下所示：

(function( $ ){
  var defaults = {
    value1: '',
    value2: ''
  };
  var methods = {
    init : function( options ) { 
       return this.each(function(){
         value3 = $(this).parent();
       });
    },
    log : function( ) {
      console.log(value3);
      console.log(defaults.value1);
    }
  };

但如果我这样做并使用$('#element1').my_plugin('log');，我只会从第二个初始化$('#element2').my_plugin({value1 : 3, value2 : 4});获得默认值

所以这是我的第二个问题：我如何为每个init使用特定变量？

我希望它清楚，我想知道什么。我还在学习jQuery并且尽我所能并且搜索了很多如何解决我的问题。我想使用这个结构，因为它是来自jquery的官方结构，我喜欢做正确的事情：P

很想在这里看到一些答案:) 谢谢你的帮助，
儒略

如果有人加入了一个基本的插件结构 - 这就是我现在使用的插件:)

(function( $ ){

  var methods = {
    init : function( options ) {
        console.log('init');
      var defaults = {
        value1: '',
        value2: ''
      };
      var options = $.extend(defaults, options);        
      return this.each(function(){
                var $this = $(this);
        var data = $this.data('test');
        var parent = $this.parent();
        var element = $this;

        if (!data) {
            var data = {};
            $.each(options, function(key, value) {
                data[key] = value;
            });
            data["parent"] = parent;
            data["element"] = element;
                    $this.data('test', data);
        }

        $this.test('log');

       });
    },

    log : function() {
        console.log('log');
        return this.each(function(){
            var $this = $(this);
        var data = $this.data('test');
        console.log(data);
      });
    }
  };

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

Answer 1

使用$ .data，如果你想保持“这个”干净。

如何以正确（完美）的方式处理jquery插件中的变量？

1 个答案: