每日思考（2020/02/15）

Posted 2021-03-09 ericzlin

题目概览

• 对target="_blank"的理解
• 非标准的字体如何实现
• 写个还剩下多少天过年的倒计时

题目解答

对target="_blank"的理解

• 理解：在调用window下的open方法创建一个新窗口的同时，可以获得一个创建窗口的opener句柄，通过target="_blank"点开的窗口活着标签页，子窗口也能捕获opener句柄，通过这个句柄，子窗口可以访问到父窗口的一些属性，虽然很有限，但是却可以修改父窗口的页面地址，让父窗口显示指定的页面

• 安全性问题防范

  • 如果需要限制window.opener的访问行为，我们只需要在原始页面每个使用了target="_blank"的链接中加上一个rel="noopener"属性
  • 但是，火狐并不支持这个属性值，火狐浏览器里需要写成rel="noreferrer"，所以我们可以将两个属性值合并写成rel="noopener noreferrer"来完整覆盖。
  • nofollow是html页面中a标签的属性值。这个标签的意义是告诉搜索引擎"不要追踪此网页上的链接或不要追踪此特定链接

  <a href="https://www.baidu.com" target="_blank" rel="noopener noreferrer nofollow">内容</a>

非标准的字体如何实现

• 用图片代替
• web fonts在线字库，如Google Webfonts，Typekit 等等
• 注意：现在是知识付费时代，包括音乐、电影、书籍、软件等慢慢也开始收费，设计师的原创字体也开始要收费，所以要注意字体侵权问题，作为设计师和开发人员可以选择符合自己整体风格的免费字体，要在使用之前看清楚各方面条款和协议，达成共识。

写个还剩下多少天过年的倒计时

const countDown = (range = "day") => {
    const nowDate = new Date();
    const currentYear = nowDate.getFullYear();
    const nextYear = new Date(currentYear + 1, 1, 1);

    const rangeBase = {
        minute: 1000 * 60,
        hour: 1000 * 60 * 60,
        day: 1000 * 60 * 60 * 24,
        week: 1000 * 60 * 60 * 24 * 7,
        month: 1000 * 60 * 60 * 24 * 30
    };

    return Math.floor(
        (nextYear.valueOf() - nowDate.valueOf()) /
        (rangeBase[range] || rangeBase.day)
    );
};

console.log(countDown("hour"));
console.log(countDown());
console.log(countDown("week"));
console.log(countDown("month"));