Ist es eine gute Übung, einen Ereignis-Listener innerhalb einer Funktion hinzuzufügen, die Parameter enthält?

Question

Ich möchte nur wissen, ob es eine gute Übung ist, einen Click-Event-Listener in einer Funktion wie im folgenden Beispiel zu haben. (Versuchen Sie nicht zu verstehen, was der Code tut, ich wollte nur ein Beispiel für eine Situation zeigen, wo ein Click-Ereignis in einer Funktion)

function someFn(classClickedBtn, popupId) { 

      $(classClickedBtn).click(function(e) { 
       e.preventDefault(); 
       var active = "active"; 
       var mainClass = ".dialogBox"; 

        if ($(popupId).hasClass(active)) { 

         $(popupId).removeClass(active); 

        }else{ 

         for (var i = 0; i< $(mainClass).length; i++) { 
         if ($(mainClass).hasClass("active")) { 
         $(mainClass).removeClass("active"); } } 

         $(popupId).addClass(active); 

        } 

      }); 

     } 


     someFn(".btn1", "#popup"); 

     someFn(".btn2", "#popup"); 

Answer 1

Wenn Ihr Zweck ist es, einen Event-Handler für ‚Klick anbringen 'event of' triggerBtnClass ', nur wenn etwas deine Funktion vorher aufruft, also ja.

Answer 2

Ich bin in Ordnung mit dem Aufruf des Zuhörers aus Ihrer Funktion. Sie können sich die Dinge ein wenig erleichtern, indem Sie die Funktion einmal mit allen enthaltenen Argumenten aufrufen. Sehen Sie sich den Refaktorcode unten an. Ich verwende ein Objektliteral, um die Funktionsargumente zu speichern und die Funktion einmal aufzurufen, wobei das Objekt als einzelner Parameter übergeben wird.

function someFn(fn_data) { 
 
    $(fn_data.btns).on("click", function(e) { 
 
    var active = "active"; 
 
    var mainClass = $(".dialogBox"); 
 
    var popup = $(fn_data.popupId); 
 
    
 
    e.preventDefault(); 
 
    
 
    if (popup.hasClass(active)) { 
 
     popup.removeClass(active); 
 
    } else { 
 
    
 
     for (var i = 0; i < mainClass.length; i++) { 
 
     if (mainClass.hasClass("active")) { 
 
      mainClass.removeClass("active"); 
 
     } 
 
     } 
 

 
     popup.addClass(active); 
 
    } 
 
    }); 
 
} 
 

 
someFn({ 
 
    btns: ".btn1, .btn2", 
 
    popupId: "#popup" 
 
});

#popup { 
 
    margin-top: 1em; 
 
} 
 

 
#popup.active:after { 
 
    content: 'Popup active!'; 
 
} 
 

 
#popup:after { 
 
    content: 'Popup not active!'; 
 
    color: #555; 
 
    display: block; 
 
    height: 20px; 
 
    white-space: nowrap; 
 
    margin-top: 10px; 
 
    border: 1px solid orange; 
 
    padding: 0.5em 1em; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button class="btn1">button 1</button> 
 
<button class="btn2">button 2</button> 
 
<div id="popup">popup goes here</div>