javascript - 根据最终用户的时间调用样式表的 js 代码优化

Question

以下代码有效。它很简单，但我确信会有更好和/或更优化的方法来编写它，而不使用 jquery，但我不知道有任何其他方法可以做到这一点并保持它像现在一样工作。

<script>
function getStylesheet() {
    var currentTime = new Date().getHours();
    if (5 <= currentTime&&currentTime < 11) {
        document.write("<link rel='stylesheet' href='{T_THEME_PATH}/morning.css'>");
    }
    if (11 <= currentTime&&currentTime < 16) {
     document.write("<link rel='stylesheet' href='{T_THEME_PATH}/day.css'>");
    }
    if (16 <= currentTime&&currentTime < 22) {
     document.write("<link rel='stylesheet' href='{T_THEME_PATH}/evening.css'>");
    }
    if (22 <= currentTime&&currentTime <= 24 || 0 <= currentTime&&currentTime < 5) {
     document.write("<link rel='stylesheet' href='{T_THEME_PATH}/night.css'>");
    }
}

getStylesheet();

编辑:我只是需要知道是否有更好的方法来编写我发布的js。更好的是我有哪些缺陷或不正确的编码

Answer 1

尽管主要问题是使用 document.write (通常被认为是 bad practice)，但您的方法基本上适合您正在做的事情。插入元素时。如果你想清理一下，你可以这样做，它关注的是断点而不是值的范围:

function getStylesheet() {
  const currentTime = new Date().getHours();
  const breaks = [5, 11, 16, 22, 24];
  const extensions = ['night', 'morning', 'afternoon', 'evening', 'night'];
  const match = breaks.findIndex(num => currentTime < num);

  const head = document.getElementsByTagName('head')[0];
  const sheetLink = document.createElement('link');
  sheetLink.rel = 'stylesheet';
  sheetLink.href = `T_THEME_PATH/${extensions[match]}.css`;

  head.appendChild(sheetLink);
}

getStylesheet();

这种方法假设时间格式始终为 0-24，并且要求两个数组完全相关，因此不太灵活，但您可能会喜欢使用它。它还使用模板文字来构造 href 一次，而不是多次写入。

最后一点 - 你的代码中没有 jQuery，都是普通的 javascript。