2016-11-23 1 views
0

プラグインインタフェースを使用してメンタルブロックを実行しました。 jQueryセレクタでインスタンス化されたときに選択範囲を反復し、選択された要素のそれぞれに対して新しいオブジェクト/インスタンスをインスタンス化するプラグインがあるとします。プラグインの特定のインスタンシエーションに対する文字列識別子メソッドの呼び出し

<p class='p1'> This is just a simple test paragraph </p> 
<p class='p2'> And here is another to show variety! </p> 

そして、これはプラグインがインスタンス化されている方法である:これは我々が仕事をしなければならない、HTMLと仮定すると

$('p').pluginName(); 

は今、これらのpタグの両方が、プラグインのinitに渡されたが、それぞれが独自のプラグインインスタンスを受け取ります。確かに私はより具体的な識別子としてクラスを使用することができますが、ここで私と一緒にロールバックします。

$('p').pluginName('set', 'some_style'); 

しかし、私は唯一のそれはのは言わせclass p2に適用したい、提供するために、どのような方法があります:私は今、そうのようなことができます、それはAPIだとして何かをするプラグインを呼び出すために、文字列の識別子を使用していたと仮定すると、特定のインスタンスに関する情報を持つ上記のメソッド呼び出し。または、私はそれがより可能性が高いと感じるように、私は具体化する必要がありますインスタンス化とメソッドの呼び出しは、私が効果的にしたいインスタンスに取得するには?

小規模ながら、インスタンス化するときに1つのプラグイン呼び出しから2つに移動すると、それほど悪くないので、私は尋ねます。しかし、このプラグインが動作する何百もの要素があったらどうなるでしょうか?私はそれを避けることができれば、それらのインスタンスに簡単に呼び出す能力を保持するために、潜在的なユーザーにすべての要素をインスタンス化する必要がないようにしたい。

いくつかの他の情報...

すべての要素は、その要素/インスタンスだけでなく、いくつかの状態のものを基準に固有のIDを保持するためにdata-cl-uid属性に関連付けられています。それを超えて、それはグループ化の仕組みとしても機能するので、同じIDを持つ2つのインスタンスは、どちらか一方に何かが適用されると、両方に影響を受けます。私のデザインがコーナーに支えられているように感じますが、私は経験豊富なプラグインデザイナーではありません。

これは、プラグイン自体を処理するコードと、それに渡されるものに基づいてプラグインが実行するコードです。文字列識別子を使用してインスタンスまたはインスタンスのグループを呼び出すとどうなりますか?

$.fn[pluginName] = function (option) { 
    var args = arguments; 

    if (typeof option === 'object' || !option) { 
     this.each(function() { 
     if(!$.data(this, 'plugin_'+pluginName)) 
      $.data(this, 'plugin_'+pluginName, new Clicklight(this, option, args[1])); 
     else { 
      console.log('ERROR: Cannot create a duplicate object for ',this); 
      return false; 
     } 
     }); 

    } else if (typeof option === 'string' && option in pubAPI) { 
     this.each(function() { 
     var instance = $.data(this, 'plugin_'+ pluginName); 

     if (instance instanceof Clicklight && typeof instance[option] === 'function') 
      instance[option].apply(instance, Array.prototype.slice.call(args, 1)); 
     else { 
      console.log('ERROR: Internal error from \''+option+ '\''); 
      return false; 
     } 
     }); 

    } else 
     console.log('ERROR: No method found with name \''+option+ '\''); 

    return this; 
    } 

うまくいけば、問題がどこにあるかを示すために必要なすべてのコードと問題を解決するのに十分な情報です。その他の情報私は編集して嬉しいです。

答えて

0

さらに多くのことを考えた後、問題の解決策を見つけました。私は基本的にユーザーとインスタンス間のメディエータとして機能するコントローラオブジェクトを構築することに決めました。すべての$(SELECTOR).plugin()が実行されるたびに、そのインスタンスに対して1つのコントローラが作成され、そのセレクタ内のすべての要素が子になり、指定されたインスタンスでコントローラによって呼び出されます。これは、APIが必須のIDを配置することを要求していることと相まって、実際のインスタンス化プロセスは依然として非常に単純でありながら、単一のコード行でもあることができます。私はすべてのバグを解消し、私が好きなようにしたらコードで編集します。

関連する問題