Come unire due funzioni che fanno le stesse cose con variabili diverse

Question

Come unire due funzioni che fanno le stesse cose con variabili diverse

#1 da (4 voti)

2

Ho queste due funzioni Javascript che sono uguali ad eccezione delle variabili

onClickVoteUp: function (e) {
    var $target = $(e.target);
    var upvoted = this.model.get("upvoted");
    var downvoted = this.model.get("downvoted");
    this.$el.find(".active").removeClass("active");
    if(!upvoted){
        if(downvoted) {
            this.model.set("downvoted", false);
            this.model.upvote();
        }
        this.model.upvote();
        this.model.set("upvoted", true);
        $target.addClass("active");
    } else {
        this.model.set("upvoted", false);
        this.model.downvote();
    }
},
onClickVoteDown: function (e) {
    var $target = $(e.target);
    var upvoted = this.model.get("upvoted");
    var downvoted = this.model.get("downvoted");
    this.$el.find(".active").removeClass("active");
    if(!downvoted){
        if(upvoted){
            this.model.set("upvoted", false)
            this.model.downvote();
        }
        this.model.downvote();
        this.model.set("downvoted", true);
        $target.addClass("active");
    } else {
        this.model.set("downvoted", false);
        this.model.upvote();
    }
}

Sono events gestori e come puoi vedere hanno solo variabili diverse, ma gli algoritmi sono gli stessi. Come scriveresti solo una funzione per ottimizzare il codice?

javascript optimization jquery

posta steo 02.03.2015 - 11:30

fonte

1 risposta

Leggi altre domande sui tag javascript optimization jquery

Archiviazione file condivisa per diversi progetti API Web Devo includere il codice PHP in HTML o HTML in PHP?

score 4 · Accepted Answer

Non puoi scrivere solo una funzione. Dovrai comunque avere una funzione separata per ogni gestore di eventi, quindi il meglio che puoi fare è avere 3 funzioni la cui quantità totale di codice sarà inferiore a quella che hai attualmente perché non conterrà il codice duplicato. Non funzionerà più velocemente, ma sarà più piccolo.

Quindi, ciò che devi fare è estrarre la funzionalità comune di questi due gestori di eventi in una funzione "comune" separata e fare in modo che ogni gestore di eventi chiami la funzione comune passandogli parametri aggiuntivi dicendogli come vuoi che funzioni lavoro. Non ho intenzione di mostrarti codice, perché questo è "Programmers SE", non "Stackoverflow", ma ti darò la direzione generale di pensare:

Devi smettere di pensare a "upvoting" e "downvoting", e invece iniziare a pensare semplicemente a "votare" in una direzione che può essere "up" o "down". In questo modo, la direzione può diventare una variabile della tua funzione "comune".

Guardando il tuo codice vedo che ci sono alcune cose che dipendono da questa direzione, che dovrai parametrizzare in base al valore di "direction". Uno è se usare il valore letterale stringa "upvoted" o "downvoted" e l'altro è se invocare model.upvote() o model.downvote() .

Da quello che so è possibile passare un riferimento al metodo a una funzione in javascript, in modo che il gestore possa dire alla funzione comune quale metodo di model invocare, ma sarebbe davvero d'aiuto se il tuo modello fosse esposto a% metodovote(direction) invece di due metodi separati upvote() e downvote() .

Potresti anche aver bisogno di una quarta piccola funzione helper, che restituisce la direzione opposta dalla direzione che passi ad essa, in modo che se la passi "su" ritorni "giù", e se la passi "giù" restituisce "up".