Übergeben Sie die Javascript-Funktion als data-*-Attribut und führen Sie sie aus

Wir kennen solche Syntaxen wie unten, wenn wir a definieren value zum onClick Attribut:

<button type="submit" onclick="alert('hi');"></button>
<button type="submit" onclick="doWork"></button> <!-- This one doesn't work -->
<button type="submit" onclick="doWork()"></button>
<button type="submit" onclick="doWork('Mike', 2)"></button>

Was mich interessiert, ist, einen Brauch zu definieren data-attribute und führen Sie den Wert wie folgt aus:

<button type="submit" data-callback="alert('hi');"      class="marker"></button>
<button type="submit" data-callback="doWork"            class="marker"></button>
<button type="submit" data-callback="doWork()"          class="marker"></button>
<button type="submit" data-callback="doWork('Mike', 2)" class="marker"></button>

<script type="text/javascript">
    jQuery("body").on("click","button.marker", function(e) {
        var callback = jQuery(e.currentTarget).data("callback");

        // Now I need to execute the callback no matter of the format
        // 1. Execute as function's body
        // 2. Or by function 'name'
        // 3. Or by function 'name' with 0 parameters
        // 4. Or by function 'name' with n parameters
    })

    function doWork(name, nr){
        var personName = name || "Unnamed";
        var personNr = nr || 0;
        alert("Name is: " + personName + " Nr: " + personNr);
    }
</script>

Ich habe das Beispiel eingefügt jsBin

Wie kann dasselbe Verhalten mit benutzerdefinierten Datenattributen erreicht werden?

Eine Möglichkeit ist die Verwendung bewerten()

jQuery(".container").on("click", "button.marker", function (e) {
    var callback = jQuery(e.currentTarget).data("callback");

    var x = eval(callback)
    if (typeof x == 'function') {
        x()
    }
});

Demo: Geige

Hinweis: Stellen Sie sicher, dass es in Ihrer Umgebung sicher ist, dh es besteht keine Möglichkeit der Skriptinjektion aufgrund schlechter Eingaben von Benutzern

• Warum ist die Verwendung der JavaScript-Bewertungsfunktion eine schlechte Idee?
• Wann ist eval() von JavaScript nicht böse?
• eval() ist nicht böse, nur missverstanden
• Eval ist böse, Teil Eins

Ich denke, eine bessere Idee wäre, die Ereignisse dynamisch zu binden und sie auszulösen. Wenn Sie möchten, dass sie nur durch anderen Code bekannt sind, können Sie benutzerdefinierte Ereignisse verwenden.

<button type="submit" class="marker marker1"></button>
<button type="submit" class="marker marker2"></button>
<button type="submit" class="marker marker3"></button>
<button type="submit" class="marker marker4"></button>

<script>
    var $markers = $('.marker');
    $markers.filter('.marker1').bind('customCallback', function(){ alert("hi"); });
    $markers.filter('.marker2').bind('customCallback', function(){ doWork(); });
</script>

Dann könnten Ihre anderen Komponenten sie mit $(selector).trigger(‘customCallback’); aufrufen.

Einfach mit:

 $("body").on("click","button.marker", function(e) {
     eval($(this).data("callback"));
 })

Wenn Sie wirklich Funktionen (mit oder ohne Parameter) von einer Sache zur anderen übergeben wollten, ohne sie als Ereignisse zu binden, könnten Sie dies auf diese Weise tun (ich begann mit der Antwort von @Taplar).

<button type="submit" class="marker marker1"></button>
<button type="submit" class="marker marker2"></button>
<button type="submit" class="marker marker3"></button>
<button type="submit" class="marker marker4"></button>

<script>
  var $markers = $('.marker');
  $markers.filter('.marker1').get(0).customCallback =  doWork;
  $markers.filter('.marker2').get(0).customCallback = function(){ 
    doWork(arg0,arg1); 
  };
</script>

Dann könnten Sie in Ihrer anderen Komponente wie folgt darauf zugreifen:

<script>
  $('.marker').each(function(){
    var  thisFunction = $(this).get(0).customCallback;
    //do something useful with thisFunction
  });
</script>

Sie können eine Funktion einfach als Datenattribut binden

const ele = $('button');

ele.data('onClick', evt => {
    alert('bye');
})

ele.click(evt => {
    const ele = $(evt.target);
    ele.data('onClick')(evt);
})

Ein anderer Weg ist die Verwendung window[func](args).

Ähnlich wie eval()aber Sie müssen den Funktionsnamen und das Argument separat im HTML-Attribut speichern.

Hier ist ein kurzes Beispiel …
CodePen

<button type="submit" data-func="Angel" data-args="use me instead of evil()" class="marker">TEST</button>

<script type="text/javascript">

    //=== The Listener =====
    $(".marker").on("click",function(){

        // Get the function name and arguments
        let func = $(this).attr("data-func");
        let args = $(this).attr("data-args");

        // Call the function
        window[func](args);
    })


    //=== The Function =====
    function Angel(msg){
        alert(arguments.callee.name + " said : " + msg);
    }
</script>