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 中创建一个能够执行此函数的工作的对象有任何建议，然后我可以简单地实例化这个“类”的一个新对象，该对象可以执行任务示例#expand_Date_Object 中提供的新信息。

或者我应该为 jquery 编写一个插件来处理这个问题。 如果有怎么办？

1. 我可以创建一个对象并制作该对象的原型吗？
2. 我应该使用构造函数吗？
3. 如何在原型框架中处理 jquery 库？

Answer 1

您可以创建一个命名函数，利用Function.prototype.call() 将函数设置this 调用到当前单击的元素，将选择器字符串作为参数传递给函数

$(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

您似乎想要一个基于 OOP 范式的优雅代码；如果是这样，您可以利用 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 是您的目标。