Refactoring jQuery in JS-Ausgaben

Question

Ich benutze jQuery häufig, aber ich habe festgestellt, dass ich das zugrunde liegende Javascript besser verstehen muss. Ich habe den AJAX-Teil ausgearbeitet, bin aber auf den verschachtelten Funktionen festgefahren. Jede Hilfe wird sehr geschätzt.

document.onreadystatechange = function() { 
    var state = document.readyState; 

    if (state == 'interactive') { 
    $('#button').on("click", function() { 
     $.getJSON(apiurl, function(json) { 

     $.each(json.photos.photo, function(i, myresult) { 
      apiurl_size = "https//api/myresult"; 
      $.getJSON(apiurl_size, function(size) { 
      $.each(size.sizes.size, function(i, myresult_size) { 
       if (myresult_size.width == selected_size) { 
       $("#results").append('<p class="col-md-4"><a href="" ><img src="' + myresult_size.source + '"/></a></p>'); 
       } 
      }) 
      }) 
     }); 
     }); 
    }); 
    } else if (state == 'complete') { 
    document.getElementById('complete'); 
    } 
} 

Was ich wissen will:

1. wie in $('button') seit document.getElementById('button') kehrt das gesamte Element die ID-Selektor greifen, aber ich kann die .on click functionalitiy

2. brechen die .getJSON Funktion nicht erlassen heraus in eine reine JS wiederverwendbare Funktion

Answer 1

1. $("#button").on("click", cb_function) ist analog zu document.getElementById("button").addEventListener("click", cb_function). Wenn Sie einen Selektor verwenden, der mehreren Elementen entsprechen kann, ist er ähnlich, mit der Ausnahme, dass alle zurückgegebenen Elemente durchlaufen werden, um ihnen Ereignis-Listener hinzuzufügen.

2. $.getJSON(URL, cb_function) schafft eine AJAX-Anforderung an die URL, deren onreadystatechange Callback-Funktion im Wesentlichen tut:

   1. Anruf JSON.parse() auf die Antwort.
   2. Anruf cb_function mit dem Ergebnis der Analyse.

Eine einfache Version wäre wie:

function getJSON(url, cb_function) { 
    var xhr = new XMLHTTPRequest(); 
    xhr.open("GET", url); 
    xhr.onreadystatechange = function() { 
     if (xhr.readystate == 4 && xhr.status == 200) { 
      cb_function(JSON.parse(xhr.responseText)); 
     } 
    } 
    xhr.send(); 
    return xhr; 
} 

Die wirkliche $.getJSON können Ihnen Parameter an die URL liefern, und wandelt sie automatisch von einem Objekt auf den entsprechenden URL-codierten Zeichenfolge Als URL-Parameter hinzufügen. Aber keiner Ihrer Anrufe hat Datenparameter, daher sollte diese Definition für Sie funktionieren.