1

名前間隔システムを使用して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);

変数は機能せず、EGが関数セットを指すoptように関数を宣言するときのように機能しないはずなので、関数が設定にアクセスできるようにするにはどうすればよいですか異なるセレクターで実行されている jScroller の複数のインスタンスが存在する可能性があるため、ウィンドウに保存されました。thisinit:function(){.. thisinitgetOption

4

1 に答える 1

1

インスタンスごとに一意のオプション オブジェクトを作成し、それをインスタンスと共に保存する必要があります。jQuerydata()はこれに最適です。Object.create()これは、あなたが意見を持っているかもしれないCrockford'sを使用しています.

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 );
}
于 2012-07-18T18:27:31.573 に答える