学了点技术，我要开始装X了（四）-阿里云开发者社区

第十三式：让浏览器告诉大家你正在浏览不正经网站

上班滑水摸鱼，同事来了赶紧切换浏览器界面？何不直接让同事以为你在浏览某些“正经”网站？

以下代码，当切换浏览器 tab，使得页面不可见时，会更改不可见页面的 title 和 icon 显示效果，可以直接复制以下代码在控制台尝试。

let interval = null;
(function () {
  // 获取icon所在link，rel*="icon"是为了兼容rel="shortcut icon"的情况
  const Link = document.querySelector('link[rel*="icon"]');
  const sourceTitile = document.title;
  const sourceLink = Link.href;
  document.addEventListener('visibilitychange', function () {
    if (document.hidden) {
      // 让title文字动起来，更加醒目
      interval = setInterval(scroll, 1000);
      // 修改title，这里也可以直接写文字，之所以用编码后的嘛，🤔，是因为不想让你一眼看出代码里下了毒...
      document.title = decodeURI(
        '%E6%82%A8%E6%AD%A3%E5%9C%A8%E6%B5%8F%E8%A7%88%E9%BB%84%E8%89%B2%E7%BD%91%E7%AB%99...'
      );
      Link.href =
        'https://king-hcj.github.io/images/posts/zhuangbility100/nh.gif?raw=true';
      Link.type = 'image/gif';
    } else {
      clearInterval(interval);
      document.title = sourceTitile;
      Link.href = sourceLink;
    }
  });
})();
function scroll() {
  // 让title文字动起来，更加醒目
  const titleInfo = document.title;
  const firstInfo = titleInfo.charAt(0);
  const lastInfo = titleInfo.substring(1, titleInfo.length);
  document.title = lastInfo + firstInfo;
}

效果图：

第十四式：带有 Id 属性的元素，会创建全局变量

关于 HTML 中的 Id 属性，想必您已经再熟悉不过了：

id 属性规定 HTML 元素的唯一的 id；

id 在 HTML 文档中必须是唯一的；

id 属性可用作链接锚（link anchor），通过 JavaScript（HTML DOM）或通过 CSS 为带有指定 id 的元素改变或添加样式。

对于 DOM 树中具有 ID 的给定 HTML 元素，可以使用其 ID 作为变量名来检索 div。所以，下面的console.log(foo)会打印出 id 为 foo 的这个 div DOM 元素：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
  </head>
  <body>
    <div id="foo"></div>
    <script type="text/javascript">
      console.log(foo); // 会输出id为foo的div 这个 DOM元素
    </script>
  </body>
</html>

如果您不信，那就此时打开您的网站看看：

那么，这是否也意味着可以在这些浏览器中使用它来替代 getElementById 方法呢？实际项目中最好还是老老实实该怎么写就怎么写，毕竟如果这样，大概率你会被后来的接手者或者同事问候的 😄 ～

Do DOM tree elements with ids become global variables?^[39]

第十五式：利用 a 标签解析 url

很多时候我们有从一个 URL 中提取域名，查询关键字，变量参数值等的需要，而万万没想到可以让浏览器方便地帮我们完成这一任务而不用我们写正则去抓取。方法是在 JS 代码里先创建一个 a 标签然后将需要解析的 URL 赋值给 a 的 href 属性，然后就得到了一切我们想要的了。

var a = document.createElement('a');
a.href = 'https://juejin.cn/user/2796746682939054/posts';
console.log(a.host);

利用这一原理，稍微扩展一下，就得到了一个更加健壮的解析 URL 各部分的通用方法了，下面提供一个网上常见的封装示例。

function urlParse(url, key) {
  var a = document.createElement('a');
  a.href = url;
  var result = {
    href: url,
    protocol: a.protocol.replace(':', ''),
    port: a.port,
    query: a.search,
    params: (function () {
      var ret = {},
        centArr,
        seg = a.search.replace(/^\?/, '').replace(/^\?/, '').split('&');
      for (i = 0, len = seg.length; i < len; i++) {
        if (!seg[i]) {
          continue;
        }
        centArr = seg[i].split('=');
        ret[centArr[0]] = centArr[1];
      }
      return ret;
    })(),
    hash: a.hash,
    file: (a.pathname.match(/\/([^\/?#]+)$/i) || [, ''])[1],
    path: a.pathname.replace(/^([^\/])/, '/$1'),
    relative: (a.href.match(/tps?:\/\/[^\/]+(.+)/) || [, ''])[1],
    segments: a.pathname.replace(/^\//, '').split('/'),
  };
  a = null;
  return key ? result[key] : result;
}

H5 有新的 API URL 也可以快速的处理一个链接，相对更加简洁。

var url = new URL('https://www.baidu.com/')
url.hash
...

这些鲜为人知的前端冷知识，你都 GET 了吗？

第十六式：一个可以在浏览器运行 Node.js 的神器

在最新的 Google I/O 主题演讲中 stackblitz 向大家介绍了他们与 Next.js 和 Google 团队合作开发的在线 IDE WebContainers：

几年前，我们意识到网络正朝着一个关键的拐点发展。WebAssembly 的出现让我们可以有能力编写基于 WebAssembly 的操作系统，这个操作系统的功能强大到可以完全在浏览器中运行 Node.js。我们设计了一个比本地环境更快，更安全和一致的高级开发环境，可以实现无缝代码协作，而不需要设置本地环境，两年后的今天，他终于诞生了！

官网声称`StackBlitz.com`^[40]是这个星球上最快、最安全的开发环境，它的 logo 也是一个闪电的标识：

WebContainers 允许你创建一个完整的 Node.js环境，它可以在毫秒内启动，并且可以实现一键联机和链接共享。这个环境具有 VS Code 强大的编辑功能，完整的终端，还有 npm 等功能。它也完全在你的浏览器中运行，这带来了一些关键的好处：

比本地环境快。构建速度比 yarn/npm 快 20％，包安装速度可以快 5 倍。

支持在浏览器中调试 Node.js。与 Chrome DevTools 的无缝集成可实现本机后端调试，无需安装扩展。

默认安全。所有代码执行都发生在浏览器的安全沙箱中，而不是在远程 VM 或本地二进制文件上。

同样，这些环境不需要在远程服务器上运行。而是每个环境都完全包含在你的 Web 浏览器中。没错：Node.js 运行时本身是第一次在浏览器内部本机运行。你可以在`StackBlitz.com`^[41] 上自己尝试一下，下面是我截取的页面截图：

推荐一个神器！可以在浏览器运行 Node.js

在线 IDE WebContainers 体验地址^[42]

第十七式：一起富强民主、文明、和谐、自由、平等？

别人写文章都妙笔生花，我上个网，我上个网，鼠标点过的地方都“富强、民主、文明、和谐、自由、平等”，我骄傲了吗？

复制以下代码到控制台执行，然后，开始点击你的页面吧～ 😎

(function () {
  var playWords = [
      '富强',
      '民主',
      '文明',
      '和谐',
      '自由',
      '平等',
      '公正',
      '法制',
      '爱国',
      '敬业',
      '诚信',
      '友善',
    ], // 点击展示的词库
    colors = ['#ff4545', '#3eff00'], // 颜色库
    wordIdx = Math.floor(Math.random() * playWords.length); // 随机取词下标
  document.body.addEventListener('click', function (e) {
    // 监听点击事件
    if (e.target.tagName == 'A') {
      // a标签
      return;
    }
    var x = e.pageX,
      y = e.pageY, // 获取点击位置
      span = document.createElement('span'); // 创建展示playWords的span
    span.textContent = playWords[wordIdx];
    wordIdx = (wordIdx + 1) % playWords.length;
    color = colors[Math.floor(Math.random() * colors.length)]; // 随机取色
    span.style.cssText = [
      'z-index: 9999; position: absolute; top: ',
      y - 20,
      'px; left: ',
      x,
      'px; font-weight: bold; color: ',
      color,
    ].join('');
    document.body.appendChild(span);
    renderWords(span);
  });
  function renderWords(el) {
    var i = 0,
      top = parseInt(el.style.top);
    var playTimer = setInterval(function () {
      if (i > 180) {
        clearInterval(playTimer);
        el.parentNode.removeChild(el);
      } else {
        i += 3;
        el.style.top = top - i + 'px';
        el.style.opacity = (180 - i) / 180;
      }
    }, 16.7);
  }
})();