Erstellen von Funktionen in JQuery, um das erneute Schreiben desselben Codes zu vermeiden

Question

Ich verwende derzeit eine Twitch-API, die Informationen zu einem bestimmten Kanal empfängt und diese dann dem HTML-Dokument voranstellt. Der Code, mit dem die Informationen vorangestellt werden, wird immer wieder verwendet. Ich frage mich, wie genau Sie eine Funktion erstellen, die Wiederholungen vermeiden und im gesamten Dokument aufgerufen werden kann? Ich kann

function addThis(){ 

     $("#follower-Info").prepend("<div class ='row'>" + "<div class = 'col-md-4'>" + "<img src='" + logo + "'>" + "</div>" + "<div class='col-md-4'>" + name +"</div>"+ "<div class ='col-md-4'>" + status + "</div></div>") 

    } 

Und dann:

Die codepen sind hier zu finden:

$("#follower-Info").prepend("<div class ='row'>" + "<div class = 'col-md-4'>" + "<img src='" + logo + "'>" + "</div>" + "<div class='col-md-4'>" + name +"</div>"+ "<div class ='col-md-4'>" + status + "</div></div>") 

wäre so etwas wie dieses Werk: http://codepen.io/sibraza/pen/AXRRvq

Hier ist die JQuery-Code, das ist immer wieder verwendet wird könnte nach jeder $ .getJSON-Anfrage addThis() aufrufen.

Answer 1

Es würde funktionieren, aber Sie müssen name, logo und status als Parameter für die Funktion übergeben. Sie können auch die redundante String-Verkettung entfernen:

function addThis(name, logo, status) { 
    $("#follower-Info").prepend('<div class="row"><div class="col-md-4"><img src="' + logo + '"></div><div class="col-md-4">' + name + '</div><div class="col-md-4">' + status + '</div></div>'); 
} 

Dann können Sie es aus Ihrer $.getJSON Handler aufrufen:

addThis('Foo', 'bar.jpg', 'online');