javascript - jqueryプラグインで関数を呼び出す方法は?

Question

(function($) { 
    $.fn.top_islides = function(){
        var ajax_init = function(){
            init_islides();
            setTimeout(function(){picmove()},300);
        };
//.....
    };  
})(jQuery);

別のファイルで準備ができている文書でそれを呼び出す

$('#top_slides').top_islides();
$('#top_slides').top_islides().ajax_init();

私はそれがうまくいくはずだと思ったのですが、エラーが発生しました。何が問題なのですか?

Answer 1

次のようにします。

(function($) {
    //Assuming $.fn.top_islides is defined
    $.fn.top_islides.ajax_init = function(){
        init_islides();
        setTimeout(picmove,300);
    };
 //.....
})(jQuery);

または

(function($) { 
    $.fn.top_islides = function(){
        var ajax_init = function(){
            init_islides();
            setTimeout(picmove,300);
        };
        return {
            ajax_init: ajax_init
        };
    });
     //.....
})(jQuery);

Answer 2

以下の例のように、このようなことを試してください:-

<script type="text/javascript">


    $.someplugin = {
      CallMe : function() {
            alert("You called?");
        },
      otherstuff : function() { alert("other stuff!"); }
    };


    $.someplugin.CallMe();
    $.someplugin.otherstuff();
</script>

Answer 3

Imo、最良の解決策は、連鎖可能なプラグインシステムを維持できるため、よりクリーンなトリガーを使用することです。

プラグイン宣言でイベン​​ト ハンドラーを宣言し、外部からトリガーできます。

(function($) { 
  $.fn.top_islides = function(){
    this.on ('init_islides', function(){
        setTimeout(function(){picmove()},300);
    };
  //.....
  };  
 })(jQuery);
$( "button" ).click(function () {
  $( "p" ).trigger( "init_islides");
});

DOC はここにあります: http://api.jquery.com/on/

Answer 4

var関数内で使用すると、要素が「プライベート」になります。これは Javascript で可視性を機能させるハックな方法ですが、真のクラス構造は Javascript にはありません。関数のプロトタイプに設定するか、オブジェクトを返す必要があります

(function($) { 
  $.fn.top_islides = function(){
    var ajax_init = function(){
        init_islides();
        setTimeout(function(){picmove()},300);
    };
    return {
      'ajax_init': ajax_init
    };
  //.....
  };  
 })(jQuery);

また

(function($) { 
  $.fn.top_islides = function(){
  //.....
  };
  $.fn.top_islides.prototype.ajax_init = function(){
    init_islides();
    setTimeout(function(){picmove()},300);
  }
 })(jQuery);

ただし、あなたの場合、新しいtop_islidesオブジェクトをインスタンス化するのではなく、jQuery を介してアクセスするため、プロトタイプを使用しないため、最初のオプションが最善の策です。