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

我想知道的：

如何在 $('button') 中获取 id 选择器，因为 document.getElementById('button') returns 整个元素，但我无法执行 .on click 功能
将 .getJSON 函数分解为纯 JS 可重用函数

Answer 1

$("#button").on("click", cb_function) 类似于 document.getElementById("button").addEventListener("click", cb_function)。如果您使用的是可以匹配多个元素的选择器，它是相似的，只是它循环遍历所有返回的元素以向所有元素添加事件侦听器。
$.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 参数。但是你的调用都没有数据参数，所以这个定义应该适合你。

在 JS 问题中重构 jQuery

Refactoring jQuery in JS issues

javascript

jquery

refactoring