写油猴插件今日掘金分的记录

1. dom上出现两个同名class。

掘金的header部分有两个main-header样式。

打印header.classList只有一个main-header。

2. header在页面上滑一段距离后消失。

通过translate将其向上移动了100%高度。

父容器没有设置overflow:hidden，仅利用本身是fixed定位，高度0。

3. 掘金文章页面使用了ssr，nust。

4. 使用油猴发请求 使用GM_xmlhttpRequest发请求报错。

原因是需要指定@connect。

5. 使用DocumentFragment来批量插入子节点。

dom本身的appendChild()每次只能插入一个子节点。

fragment的append()方法可以一次插入多个子节点。

6. 写一个排序算法，实现单分值较大的往前排，全部完成的往后排

// 排序
// 单分值较大的往前排，全部完成的往后排
limitTasks.sort((a, b) => {
  // 想要换位返回 > 0，不换位 返回 < 0
  if (b.done === b.limit) return -1;
  if (a.done === a.limit) return 1;
  return b.score - a.score;
});

7. 上滑后头部会隐藏，插件也要上一置顶。

实现思路，监听header.main-header的样式变化。

function observeHeader(progressBar) {
  const header = document.querySelector('header.main-header');
  const observer = new MutationObserver(function (mutationsList) {
    console.log('mutationsList==', mutationsList);
    const [record] = mutationsList;
    if (record.attributeName !== 'class') return;
    if (header.classList.contains('visible')) {
      progressBar.classList.remove('offset')      
    } else {
      progressBar.classList.add('offset');
    }
  });
  const config = { attributes: true, childList: false, subtree: false };
  observer.observe(header, config);
}