【文章评论】动态标题的妙用

main.js

(function () {
  "use strict";
  const originalTitle = document.title;
  let timeoutId;
  function handleVisibilityChange() {
    clearTimeout(timeoutId);
    document.title = document.hidden
      ? "别走太远了啊喂..."
      : "好耶，回来啦！ヾ(•ω•`)o";
    !document.hidden &&
      (timeoutId = setTimeout(() => (document.title = originalTitle), 2000));
  }
  function beforeUnloadListener() {
    document.removeEventListener("visibilitychange", handleVisibilityChange);
  }
  document.addEventListener("visibilitychange", handleVisibilityChange);
  window.addEventListener("beforeunload", beforeUnloadListener);
})();

写好的评论（字数超了）.md

代码写得很棒啦！这里我用一些可能更加现代的技术调整一下代码：

(function () {
  "use strict";
  const originalTitle = document.title;
  let timeoutId;
  function handleVisibilityChange() {
    clearTimeout(timeoutId);
    document.title = document.hidden
      ? "别走太远了啊喂..."
      : "好耶，回来啦！ヾ(•ω•`)o";
    !document.hidden &&
      (timeoutId = setTimeout(() => (document.title = originalTitle), 2000));
  }
  function beforeUnloadListener() {
    document.removeEventListener("visibilitychange", handleVisibilityChange);
  }
  document.addEventListener("visibilitychange", handleVisibilityChange);
  window.addEventListener("beforeunload", beforeUnloadListener);
})();

在这里我用一个立即执行的匿名函数也就是 IIFE（Immediately Invoked Function Expression）包裹整个代码，在页面完全加载后再执行代码，同时可以避免变量全局污染啦！在下面我使用了三元运算符简化冗长的 if...else 结构。虽然代码可读性不那么高 （其实是降低可替代性） 0.0

---

出处：为博客增加点乐趣：用 JS 改变网页标题