javascript - 我如何用更少的 Javascript 行来表达这一点？

Question

我正在使用一些 JS 来计算自上次发布以来的时间(即“2 小时前发布”):

function ago(date) {
function render(n, unit) {
    return n + " " + unit + ((n == 1) ? "" : "s") + " ago";
}

var seconds = Math.floor((new Date() - date) / 1000);

var interval = Math.floor(seconds / (60 * 60 * 24 * 30 * 365));
if (Math.floor(seconds / (60 * 60 * 24 * 30 * 365)) >= 1) {
    return render(interval, "year");
}
interval = Math.floor(seconds / (60 * 60 * 24 * 30));
if (interval >= 1) {
    return render(interval, "month");
}
interval = Math.floor(seconds / (60 * 60 * 24));
if (interval >= 1) {
    return render(interval, "day");
}
interval = Math.floor(seconds / (60 * 60));
if (interval >= 1) {
    return render(interval, "hour");
}
interval = Math.floor(seconds / 60);
if (interval >= 1) {
    return render(interval, "minute");
}
interval = Math.floor(seconds);
return render(interval, "second");
}

然后将其包含在索引页面上，在每个帖子旁边:

var date = 
Date.parse(document.getElementById("postedon").getAttribute("datetime"));
document.getElementById("postedago").innerHTML = ago(date);

这是 HTML:

<time id="{{ post.postedon }}" datetime="{{ post.date | date_to_xmlschema }}">
<span id="{{ post.postedago }}"></span>
</time>

请注意，我正在使用 Liquid & YAML(使用 Jekyll)在每个帖子的 frontmatter 中设置元素的 ID 和属性:

---
date: 2018-1-4 02:00:00 +0100
postedago: postedago-post1
postedon: postedon-post2
---

问题是我必须像这样手动设置每个帖子的 JS 代码:

var date = 
Date.parse(document.getElementById("postedon").getAttribute("datetime"));
document.getElementById("postedago").innerHTML = ago(date);

var date = 
Date.parse(document.getElementById("postedon2").getAttribute("datetime"));
document.getElementById("postedago2").innerHTML = ago(date);

var date = 
Date.parse(document.getElementById("postedon3").getAttribute("datetime"));
document.getElementById("postedago3").innerHTML = ago(date);

否则它不会显示所有帖子的时间，只显示一个。

我尝试将 JS 中的元素 id 设置为 front matter 参数，但它不起作用(本质上是让 Jekyll 替换 JS 文件中的 liquid 标签):

var date = 
Date.parse(document.getElementById("{{ post.postedon }}").getAttribute("datetime"));
document.getElementById("{{ post.postedago }}").innerHTML = ago(date);

我尝试在 js 文件的顶部添加前面的破折号，但它仍然不起作用(如 SO 此处所引用:Reach Jekyll Variables With JavaScript and Pass it Throught DOM Manipulation)

---
---
//rest of your JavaScript

也许还有其他我没想到的方法？

感谢您花时间阅读本文，非常感谢您的帮助!

PS:引用timeago 脚本在每个帖子页面上的实现(不在包含所有帖子的索引页面上):https://hejnoah.com/posts/timeago.html

Answer 1

您应该为您的 HTML 元素提供一个 class 属性，以便您可以使用 getElementsByClassName() 在一个循环中迭代所有这些元素。

HTML:

<time class="postedon" id="{{ post.postedon }}" datetime="{{ post.date | date_to_xmlschema }}">
    <span class="postedago" id="{{ post.postedago }}"></span>
</time>

JS:

const timeElems = document.getElementsByClassName('postedon');

for (let i = 0, len = timeElems.length; i < len; i++) {
  let date = Date.parse(timeElems[i].getAttribute("datetime"));
  timeElems[i].firstElementChild.innerHTML = ago(date);
}

现在您不必为每个帖子手动编写 JS。您可以类似地使用 getElementsByTagName('time') 假设这是您使用该标签的唯一地方。