javascript - 在 JS 问题中重构 jQuery

Question

我经常使用 jQuery，但我意识到我需要更好地理解底层的 Javascript。我已经解决了 AJAX 部分，但仍停留在嵌套函数上。非常感谢任何帮助。

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');
  }
}

我想知道的是:

1. 如何在 $('button') 中获取 id 选择器，因为 document.getElementById('button') 返回整个元素，但我无法执行.on click 功能

2. 将.getJSON函数分解为纯JS可重用函数

Answer 1

1. $("#button").on("click", cb_function) 类似于 document.getElementById("button").addEventListener("click", cb_function)。如果您使用的选择器可以匹配多个元素，那么它是类似的，只不过它循环遍历所有返回的元素以向所有元素添加事件监听器。

2. $.getJSON(URL, cb_function) 创建一个针对 URL 的 AJAX 请求，其 onreadystatechange 回调函数的作用主要是:

   1. 对响应调用 JSON.parse()。
   2. 使用解析结果调用 cb_function。

一个简单的版本是这样的:

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;
}

真正的 $.getJSON 允许您向 URL 提供参数，并且它会自动从对象转换为适当的 URL 编码字符串以添加为 URL 参数。但是您的两个调用都没有数据参数，因此这个定义应该适合您。