Gestori di eventi di oggetti Global vs Individual

Question

Gestori di eventi di oggetti Global vs Individual

#1 da (2 voti)

5

Ultimamente ho studiato molti esempi di javascript, sia con / senza librerie, jQuery per menzionarne uno.

Come vecchio sviluppatore di JavaScript, ho imparato presto a utilizzare javascript discreto dove si aggiungevano eventi di clic del mouse a un gestore globale utilizzando document.onclick = mylib.document_onclick;

Quindi, taggando qualsiasi elemento con un attributo / proprietà / expando personalizzato, sono stato in grado di gestire tutti i tipi di funzioni in un modo molto semplice.

//  HTML

<div class='menulink logout' data-mc='logout'> Logout </div>
<a class='menulink' data-mc='ajax' data-target='main-content-div' href='page/'>Start page 1</a>
<a class='menulink' data-mc='ajax' data-target='main-content-div' href='page/'>Start page 2</a>


// JS

document_onclick: function (e) {
    e = getEvObj(e);                             // custom method to get event object
    var evSrcTag = getSrcObj(e);                 // custom method to get source element

    //mouseclick
    if (evSrcTag.getAttribute('data-mc') != undefined) {
        switch (evSrcTag.getAttribute('data-mc')) {

            case 'logout':
                if (!confirm(myconfig.msg['asklogout'])) {
                    return cancelEv(e);          // custom method to cancel the event
                }
                break;

            case 'ajax':
                //process ajax request as javascript is available, cancel default event (href)

            //case ......
        }
    }
},

Oggi vedo molte soluzioni in cui l'evento è associato / collegato direttamente a un elemento specifico.

Sembra che diventi una lunga lista di gestori da aggiungere, insieme a singole funzioni e nomi di classe legati / aggiunti.

//  HTML
<a id="anchor1" href="#">create link dynamically</a>
<a id="anchor2" href="#">create link dynamically</a>
<a id="anchor3" href="#">create link dynamically</a>


//  JS
$(function(){

    $("#anchor1").click( function() {
        $("#anchor1").append('<a class="myclass" href="page/test1">test1</a>');
    });

    $("#anchor2").click( function() {
        $("#anchor2").append('<a class="myclass" href="page/test2">test2</a>');
    });

    $("#anchor3").click( function() {
        $("#anchor3").append('<a class="myclass" href="page/test3">test3</a>');
    });

});

Riferirsi al modo in cui impostare i gestori, è un approccio migliore dell'altro, e se sì, quale è e perché?

javascript event-programming

posta LGSon 05.03.2014 - 16:58

fonte

1 risposta

Leggi altre domande sui tag javascript event-programming

Strati e livelli di SOAP Quando dovrei usare ZeroMQ e quando dovrei usare Akka?

score 2 · Accepted Answer

Il problema con il tuo approccio è che stai sostituendo il meccanismo di spedizione del browser con il tuo meccanismo di dispacciamento. L'invio del browser non è così male da essere sostituito, ed è sicuramente meglio del tuo:

Il meccanismo del browser è nativo per il browser e quindi più veloce dell'implementazione in linguaggio interpretato (JavaScript).
Il tuo meccanismo utilizza una grande istruzione switch, che lo rende anche più lento.
Per aggiungere altri gestori al tuo meccanismo, devi modificare la funzione di dispacciamento gigante. Per aggiungere gestori al meccanismo del browser devi semplicemente impostare gli attributi degli elementi, che puoi eseguire da qualsiasi luogo appropriato, molto meglio di una singola funzione gigantesca.

L'esempio che hai dato, anche se sembra essere molto popolare al giorno d'oggi, non è buono, dal momento che crea enormi quantità di codice duplicato. Semplicemente non riesco a vedere il vantaggio della ricerca di elementi con il loro ID univoco per collegare i gestori a loro sopra la scrittura del gestore direttamente nel codice HTML dell'elemento (la chiamata di funzione! Non l'implementazione!).

Un altro approccio popolare consiste nell'utilizzare l'attributo class anziché id , che ritengo sia ancora peggiore. Perché passare attraverso tutti i problemi di separare la logica (JS) dalla struttura del documento (HTML), solo per accoppiarlo con lo stile (CSS)?

Quello che faccio di solito è usare la comoda sintassi di JQuery di search-by-css-selector e attaching-anonymous-function-as-event-handler per "estendere HTML" - simile a quello che fai ma senza un gestore gloabl, ma con gestori separati per ogni tipo di azione:

//  HTML

<div class='menulink logout' data-mc='logout'> Logout </div>
<a class='menulink' data-mc='ajax' data-target='main-content-div' href='page/'>Start page 1</a>
<a class='menulink' data-mc='ajax' data-target='main-content-div' href='page/'>Start page 2</a>


// JS

$(function(){
        $('[data-mc=logout]').click(function(){
                if (!confirm(myconfig.msg['asklogout'])) {
                    return false;
                }
        });

        $('[data-mc=ajax]').click(function(){
                var target=$(this).data('target'); //retrieve data-target of the clicked tag
                return false;
        });
});

In questo modo, posso creare gestori separati invece della tua gigantesca dichiarazione switch , ma proprio come te posso usare l'attributo 'elements' per assegnare dinamicamente i gestori agli elementi.