Question

我正在尝试使用名称间距系统创建一个jQuery插件，所以这是我所拥有的一个小例子

(function($){
var jScrollerMethods = {
    init:function(config){
        this.settings = $.extend({
            'option':'value'
        }, config);
    },
    getOption:function(){
        return this.settings.option;
    }
}

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

$(".selector").jScroller({'option':'newValue'});
var opt = $(".selector").jScroller("getOption");

}）（jQuery的）;

opt变量不起作用，它不应该像声明this指向函数EG到init:function(){.. this指向的函数那样起作用函数设置为init所以如何使getOption函数可以访问设置，但这些不能保存到窗口，因为可能有多个jScroller实例在运行不同的选择器，我只是似乎找到或弄明白

Answer 1

您需要为每个实例创建唯一的选项对象，并且需要将其与实例一起存储。 jQuery data()非常适合这个。这使用了你可能有意见的Crockford Object.create()。

if (typeof Object.create !== 'function') {
  /* 
     Function: create

     create a new instance of an object using an existing object as its prototype

     Parameters:
        o - the object serving as the new prototype

     Returns:
        a new object
  */         
  Object.create = function (o) {
     function F() {}
     F.prototype = o;
     return new F();
  };

}

然后在你的init函数中添加如下内容：

return this.each(function() {            
    var self = this,
    $this = $(this),
    data = $this.data('jScroll'),
    opts = Object.create(options);

    if (!data) {
        $this.data('jScroll', {
          options: opts, // this is the options object that you'll access later
          element: this // you may not need this
        });
    }
});

并且您的getOptions方法执行此操作：

var data = this.data('jScroll');
if (data.options[options]) { return data.options[options] };

我在调用init之前进行设置合并：

} else if ( typeof call === 'object' || ! call ) {
    if (call) { $.extend(settings, call) } // this expects a settings variable defined with defaults
    return jScrollerMethods.init.apply( this, call );
}

jQuery插件名称间距和访问设置参数

1 个答案: