重构 jQuery in JS 问题

Refactoring jQuery in JS issues

本文关键字：问题 JS in jQuery 重构      更新时间：2023-09-26

我经常使用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可重用函数

  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 参数。但是您的两个调用都没有数据参数，因此此定义应该适合您。

相关文章：