解析 JSON 时将 jQuery 替换为 vanilla JS，以及其他改进答案

【问题标题】：Replace jQuery with vanilla JS when parsing JSON, and other improvements解析 JSON 时将 jQuery 替换为 vanilla JS，以及其他改进
【发布时间】：2020-08-28 19:46:59
【问题描述】：

我想为这个简单的任务摆脱 jQuery，但我不知道如何使用 vanilla JS 来完成这项工作。该页面工作正常，但我认识到它是一团糟，我想改进隐形的引擎盖代码。

我是一个完整的菜鸟，我将尝试解释我所做的事情，但我需要您的帮助以尽可能简化并清理代码（仅一个函数/替代“href”中的 javascript/其他所有内容想到）。并摆脱 88kB .js 文件只是为了调用一个函数。

该网页包含两个指向本地 Icecast 流的链接。
当通过单击链接选择流时，

普通音频播放器加载对应的源URL（函数changeStream()）；
链接被高亮显示，其他所有链接都返回默认 CSS（函数 changeBg()）；
变量number设置为对应的ibg元素编号，允许标题解析；
jQuery 函数getTitle() 被执行。

补充说明：

带有“*-js”的 HTML ID 表示它们是由 javascript 函数修改的；
我可能在下面拼错了一些东西，我用更容易理解的名称重写了变量和其他部分；
摆脱 jQuery 是我的首要任务，但其他改进也很受欢迎。

提前谢谢你

网页包含的是

<!doctype html>
<html lang="en">
<head>[...]</head>
<body>
<div class="links">
  <a id="/sourceA-js" class="sourceLink"
     href="javascript:changeStream('/radio/sourceA'); changeBg('/sourceA-js'); var number=0; getTitle();">
    <span class="sourceText">Stream A</span></a>
  <a id="/sourceB-js" class="sourceLink"
     href="javascript:changeStream('/radio/sourceB'); changeBg('/sourceB-js'); var number=1; getTitle();">
    <span class="sourceText">Stream B</span></a>
</div>
<div id="currentTrackInfo">
  <p>Track: <span id="currentTrackTitle-js">Please select a radio stream</span>
  </p>
  <audio id="radio-js" class="radioPlayer" controls>
    <source src="" type="audio/mpeg">
  </audio>
</div>

<script>
  function changeBg (streamId) {
    var boxes = document.getElementsByClassName('sourceLink'),
      i = boxes.length;
    while (i--) {
      boxes[i].removeAttribute('style');
    }
    document.getElementById(streamid).setAttribute('style', 'color:grey;background-color:red;');
  }

  function changeStream (stream) {
    document.getElementById('radio-js').pause();
    document.getElementById('radio-js').setAttribute('src', stream);
    document.getElementById('radio-js').load();
    document.getElementById('radio-js').play();
  }
</script>
<script src="/static/js/jquery.js"></script>
<script>
  function getTitle () {
    jQuery.get('status-json.xsl', {}, function (response) {
      $('#currentTrackTitle-js').html(response.icestats.source[number]['title']);
      document.title = response.icestats.source[number]['title'];
    });
  }

  gettitle();
  setInterval(gettitle, 15000);
</script>
</body>
</html>

解析后的文件，status-json.xsl，包含

{
  "icestats": {
    "admin": "mail",
    "host": "domain",
    "location": "name",
    "server_id": "version",
    "server_start": "humandate",
    "server_start_iso8601": "computerdate",
    "source": [
      {
        "audio_info": "bitrate=320",
        "bitrate": 320,
        "genre": "Jazz",
        "listener_peak": 2,
        "listeners": 1,
        "listenurl": "address",
        "server_description": "streamdescription",
        "server_name": "streamname",
        "server_type": "audio/mpeg",
        "server_url": "/radio/jazz",
        "stream_start": "humandate",
        "stream_start_iso8601": "computerdate",
        "title": "author - title",
        "dummy": null
      },
      {
        "audio_info": "bitrate=320",
        "bitrate": 320,
        "genre": "Jazz",
        "listener_peak": 2,
        "listeners": 1,
        "listenurl": "address",
        "server_description": "streamdescription",
        "server_name": "streamname",
        "server_type": "audio/mpeg",
        "server_url": "/radio/jazz",
        "stream_start": "humandate",
        "stream_start_iso8601": "computerdate",
        "title": "author - title",
        "dummy": null
      }
    ]
  }
}

【问题讨论】：

这能回答你的问题吗？ Ajax request in es6 vanilla javascript
使用fetch("status-json.xsl").then(r => r.json()).then(function (response) { ... });和document.querySelector('#currentTrackTitle-js').textContent = response....;

标签： javascript jquery parsing

【解决方案1】：

这似乎是您要替换的唯一 jQuery 代码：

jQuery.get("status-json.xsl", {}, function(response) {
  $('#currentTrackTitle-js').html(response.icestats.source[number]['title']);
  document.title = response.icestats.source[number]['title'];
});

Vanilla JavaScript 等价于 jQuery.get() 是 fetch。这将从文件中读取 JSON 字符串并将其转换为 JavaScript 对象：

fetch("status-json.xsl")
  .then(response => {
    // parse JSON from 'status-json.xsl' file
    return response.json();
  })
  .then(status => {
    // perform your app logic here
  });

这个 jQuery 代码：

$('#currentTrackTitle-js').html(response.icestats.source[number]['title']);

可以用这个普通的 JavaScript 替换：

const currTitle = document.getElementById('currentTrackTitle-js');
currTitle.innerHTML = status[number]['title'];

把它们放在一起：

const currTitle = document.getElementById('currentTrackTitle-js');

fetch("status-json.xsl")
  .then(response => {
    return response.json();
  })
  .then(status => {
    currTitle.innerHTML = status.icestats.source[number]['title'];
    document.title = status.icestats.source[number]['title'];
  });

【讨论】：

不幸的是，如果我将 // handle 替换为 const 块，我会得到 TypeError: resJSON.icestats is undefined。正确到达 .xsl，状态码为 200
不幸的是现在我收到了TypeError: status.icestats is undefined
谢谢，现在可以了。有什么其他建议可以改进页面中的 javascript 扩展吗？例如从 href 中删除它，或者只有在定义了“number”时才运行 getTitle()
@Polizi8 看起来getTitle() 显示正在播放的歌曲的标题。您每 15 秒拨打一次getTitle()。每当音频输入发生变化时调用它不是更好吗？
如果曲目标题发生变化，我需要它来检索它。我做了进一步的改进：现在 getTitle 在启动 fetch 函数之前检查 number 是否未定义，我使用 addEventListener 删除了内联 js