0

私は JavaScript プラグインについてさらに学習を進めており、興味のあるプラグインを見つけました。私は足を汚して、このことをどのように変更できるか見てみたい.

(function( $ ){
  var methods = {
    init : function( options ) { 

     return this.each(function(){ 
     var $this = $(this),
         data = $this.data('tooltip'),
         tooltip = $('<div />', {
           text : $this.attr('title')
         });

     // If the plugin hasn't been initialized yet
     if ( ! data ) {

     console.log('still working..'  );
       /*
         Do more setup stuff here
       */

       $(this).data('tooltip', {
           target : $this,
           tooltip : tooltip
       });

     }
   });

},
show : function( ) {
  console.log('this is the show');
},
hide : function( ) { 
  // GOOD
},
update : function( content ) {
  console.log('this is the update');    
  // !!! 
    }
  };

  $.fn.tooltip = 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 );

わかりました 4 つの質問があります... 1.このプラグインをどのように初期化しますか? ランダムな div 要素 $('#mtest').tooltip(); を実行しようとすると、コンソール ログに「まだ動作中..」と表示され続けます。

2 init: はプライベートな var メソッドの中にあります。つまり、このプラグインの外から init: にアクセスすることはできませんか? 右？オプションを返しているように見えるので、初期化ロジックをどこに配置しますか...?

3. コードのこの部分について混乱しています...

 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' );
}

私はそれがすべてのメソッドを返すことを知っていますが...

3a. なぜ書き込みメソッド [メソッド] // は [メソッド] が配列のように見えるのか、配列が表示されないため、混乱しているように見えます。これはメソッドの集まりです...

3b. 他に何をチェックしていますか？または、なぜエラーが発生するのでしょうか?

このプラグインを完全に理解するのに役立つアドバイスをありがとう!

4

1 に答える 1

1

最初の質問で何を言いたいのかわかりません。しかし、他の質問はかなり簡単に解決できます。

まず、3 について説明します。

あなたが持っているコードと、jQuery がドキュメントで提供しているものは、あなたとあなたのメソッドの間の一種の「ゲッター」にすぎません。すべてのメソッドで名前空間をクラスター化する代わりに、メソッドをオブジェクト タイトルに配置しますmethods(コードの最初のブロックの 2 行目でインスタンス化されます)。

あなたが尋ねているjQuery提供のコードを見ると、あなたが思っていたようにメソッドを返していません。オブジェクトのキーのメソッドを呼び出します。最初の if ステートメントは、文字列変数を使用してプラグイン (この場合はツールチップ) を呼び出すと、メソッド オブジェクトでそのインデックスを検索し、関数を呼び出すことを示しています。methods

2番目のelse ifブロックは、オブジェクトをパラメーターとして渡すか、パラメーターなしで渡すと、initメソッドが呼び出されることを示しています。これは、プラグイン用のカスタム ビルドの getter/initializer のようなものです。

さて、2 番目の質問に答えるために、ツールチッププラグインを次のように呼び出してinitメソッドにアクセスできます。

1) パラメータなし

2) オブジェクト パラメータ (通常は などのオプション{"someOption":true,"anotherOption":400})

3) 文字列「init」$('#id').tooltip('init')

このようにして、 showおよびhideメソッドにアクセスすることもできます...

$('#id).tooltip('hide')...など。

詳細については、jQuery のドキュメントを参照してください。これは私が素人の言葉で表現しただけです。

于 2012-09-19T17:20:08.403 に答える