3

私はプラグインを次のように書くことに慣れています：

;(function($){jQuery.fn.myPlugin=function(options){
    var defaults={
        'property':value
    },
    o=$.extend({},defaults,options||{});

   // INSERT AND CACHE ELEMENTS
   var $Element=$('<div></div>');
   $Element.appendTo($('body'));

function funFunction(){
  // I have access to $Element!
 $Element.hide(500);
};

this.each(function(i){
     var $this=$(this);
});
return this;
});};})(jQuery);

完璧ではないことはわかっています。そのため、名前空間、より良いプラグイン構造/パターンを適切に学習しようとしています。残念ながら、私が読んだ過去数冊の本は、jQuery プラグイン オーサリング チュートリアルを一語一句参照していたため、あまり役に立ちませんでした。チュートリアルはすべてを分割しているようで、組み合わせの良い例を示していないため、混乱しています. チュートリアルでは、名前空間の例を示しています。

jQuery プラグインの名前空間のチュートリアル

(function( $ ){
  var methods = {
    init : function( options ) { 
    },
    show : function( ) {
    },
    hide : function( ) { 
    },
    update : function( content ) { 
    }
  };

  $.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 );
// calls the init method
$('div').tooltip();

私は構造と名前空間付きオブジェクトにアクセスする方法を理解していますが、名前空間を除いたデフォルト/オプションの他の例を示しています...したがって、適切に名前空間があり、デフォルト/オプションを持ち、プラグイン全体で使用するために挿入する HTML 要素は、次のように考えました。

正しいコンボ？

;(function($,window,document,undefined){
var myPlugin={
    // METHODS
    init:function(options){

    },
    buildElements:function(){ 
        var $Elements=$('<div id="myElem"></div>')
                    .appendTo($('body'));
       }
};

$.fn.myPlugin=function(method,options){
    var defaults={

    },
    options=$.extend({},defaults,options||{});

    myPlugin.buildElements();

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

  1. 明らかに、myElem をビルド/挿入すると、そのメソッド内でのみ使用可能になり、他のメソッド内では使用できなくなります....間違った場所にビルドしていますか?

  2. デフォルト/拡張は正しい場所にありますか?

  3. プラグインの外部からメソッドにアクセスしたくない場合、メソッド ロジック セクションは必要ですか?

  4. .prototype と .fn を使用する利点はありますか?

誰にでも、みんなに、どうもありがとう！:)

4

1 に答える 1

7

「ツールチップ」の例のプラグインをより注意深く見てください。本当に素晴らしいパターンです。

それはあなたが必要とするすべての名前空間を行い、すでにあなたが慣れ親しんでいるタイプです.少なくとも下部の一般化された「スーパーバイザー」ブロックは-つまり、この部分です：

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

methodsは単純な JavaScript 用語で言えばプライベート変数ですが、そのプロパティはスーパーバイザーによって非常に巧妙で型破りな方法でプラグインのメソッドとして公開されます。

デフォルト/オプションのコードを init メソッドの外に移動しようとしないでください。これはすべてを横にねじ込みます！実証済みの信頼できるパターンに従えば、すべて問題ありません。

編集：

パターンの他の側面にも必ず従ってください。

  • jQuery オブジェクトの連鎖性を維持するにreturn this.each(function(){...})は、特定の結果を返さないすべてのメソッドで構造を使用します。
  • (一般に) init では、.data('pluninName', {...})初期化時に確立され、後で他のプラグイン メソッドによってアクセス/変更/拡張する必要があるデータに対応するオブジェクトを確立します。

methodsこのパターンは、プラグイン自体 (オブジェクトを含む) に対して単一のクロージャーのみを提供します。クロージャーの名前空間は要素固有のデータ (初期化オプションを含む) には使用できないため、 を使用する必要があります.data('pluninName', ...)。

これらは単なる規則ではなく、パターンを意図したとおりに機能させるための絶対的な鍵です。

于 2012-09-28T02:18:29.127 に答える