jQueryとJAVASCRIPT OOP

Question

私はjqueryの機能を持っている：

$(document).ready(function(){ 
$("#expand_label_object").on("click", function(){ 
$(this).toggleClass("col-3"); 
$(this).toggleClass("col-12"); 
$("#expand_label_info").toggleClass("hidden"); 
}); 
}); 

それは単に私に所望の出力を与えることtoggleClassを使用しています。

私は、この関数を使用したいという要素がたくさんありますが、問題はプログラミングの手続き型の方法を使用しているためです。関数を実行したい各要素に対してこの関数を記述する必要があります。例：あなたが見ることができるように

$(document).ready(function(){ 
$("#expand_Date_object").on("click", function(){ 
$(this).toggleClass("col-3"); 
$(this).toggleClass("col-12"); 
$("#expand_Date_info").toggleClass("hidden"); 
}); 
}); 

は変更さ唯一の事は#expand_label_objectと#expand_label_infoでした。

誰も私はこの関数の作業を実行することができるjavascriptでオブジェクトを作成する方法についてのアドバイスを持っていますし、単にタスクを実行できるこの "クラス"の新しいオブジェクトをインスタンス化することができますexample #expand_Date_Objectで提供されている新しい情報を参照してください。

これを処理するjquery用のプラグインを作成する必要があります。 もしそうなら？

1. オブジェクトを作成し、そのオブジェクトのプロトタイプを作成できますか？
2. コンストラクタを使用する必要がありますか？
3. プロトタイプフレームワークでjqueryライブラリをどのように処理できますか？

Answer 1

あなたはあなたがOOPのパラダイムに基づいたエレガントなコードを望んでいるようだ

$(document).ready(function(){ 

    function handleClick(selector) { 
    $(this).toggleClass("col-3"); 
    $(this).toggleClass("col-12"); 
    $(selector).toggleClass("hidden"); 
    } 

    $("#expand_label_object").on("click", function() { 
    handleClick.call(this, "#expand_label_info") 
    }); 

    $("#expand_Date_object").on("click", function() { 
    handleClick.call(this, "#expand_Date_info") 
    }); 

}); 

Answer 2

を機能させる、という名前の関数を作成しFunction.prototype.call()を利用し、現在のクリックされた要素にthisを設定する関数を呼び出し、パラメータとしてセレクタ文字列を渡すことができます;もしそうなら、あなたはES6構文から利益を取ることができる：

1.ビルド抽象API：

//- -- JQuery Class 

    class $Class{ 
     constructor(selector,parent){ 
      this.selector=selector; 
      this.parent= parent; 
     } 
     get element(){ 
      return (this.parent)?$(this.selector,this.parent):$(this.selector); 
      } 
     on(event,callback){ 

       this.element.on(event,callback); 
     } 

    } 

    //Common service (contains static methods) 

     class CommonService{ 

      static toggle1(htmlElement){ 
       $(htmlElement).toggleClass("col-3"); 
       $(htmlElement).toggleClass("col-12"); 
       $("#expand_Date_info").toggleClass("hidden"); 

      } 
     } 

2.のAPI：

var exp_label=new $Class('#expand_label_object'); 
exp_label.on('click',function(){ CommonService.toggle1(this)}) 

    // the same of the other code , it will be : 
var exp_date=new $Class('#expand_Date_object'); 
exp_date.on('click',function(){ CommonService.toggle1(this)}) 

希望あなたがターゲットとこのOOPを。