浏览器观察器与跨标签页通信

window.addEventListener('scroll', () => {
  document.querySelectorAll('img[data-src]').forEach((img) => {
    const rect = img.getBoundingClientRect();   // 每次滚动对每张图强制布局
    if (rect.top < window.innerHeight) img.src = img.dataset.src;
  });
});

// 元素进入/离开视口触发
const ob = new IntersectionObserver((entries) => {
  entries.forEach((e) => {
    if (e.isIntersecting) console.log('可见', e.target);
  });
}, { threshold: 0.5 });
ob.observe(document.querySelector('.box'));

// 停止观察单个或全部
ob.unobserve(el);
ob.disconnect();

// 图片懒加载：仅在图片进入视口前 100px 时加载
const lazyImages = document.querySelectorAll('img[data-src]');

const imageObserver = new IntersectionObserver(
  (entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        const img = entry.target;
        img.src = img.dataset.src;         // data-src 里的真实地址赋给 src，触发加载
        img.removeAttribute('data-src');   // 标记已处理
        // 加载完成后停止观察，避免重复触发与内存泄漏
        imageObserver.unobserve(img);
      }
    });
  },
  {
    rootMargin: '100px', // 提前 100px 开始加载：用户滚到之前图已在路上
    threshold: 0.01,
  }
);

lazyImages.forEach((img) => imageObserver.observe(img));

// 无限滚动：监听底部哨兵元素
const sentinel = document.getElementById('sentinel');

const scrollObserver = new IntersectionObserver(
  (entries) => {
    if (entries[0].isIntersecting) {
      loadMoreData();
    }
  },
  { rootMargin: '200px' }
);

scrollObserver.observe(sentinel);

let page = 1;
let loading = false;

async function loadMoreData() {
  if (loading) return;              // 在途请求未回来：忽略重复触发
  loading = true;

  const response = await fetch(`/api/items?page=${page}`);
  const data = await response.json();

  if (data.items.length > 0) {
    appendItems(data.items);
    page++;
  } else {
    // 没有更多数据，断开观察
    scrollObserver.disconnect();
  }

  loading = false;
}

function isVisible(el, options = {}) {
  return new Promise((resolve, reject) => {
    if (!(el instanceof Element)) {
      reject(new TypeError('isVisible 需要一个 DOM 元素'));
      return;
    }
    const ob = new IntersectionObserver((entries) => {
      if (entries.some((e) => e.isIntersecting)) {
        ob.unobserve(el);
        ob.disconnect();
        resolve(true);
      }
    }, { threshold: 0, ...options });
    ob.observe(el);
  });
}

// 子节点/属性变化回调
const ob = new MutationObserver((muts) => {
  muts.forEach((m) => console.log(m.type, m.target));
});
ob.observe(document.body, {
  childList: true,     // 子节点变动（增删）
  subtree: true,       // 含后代节点
  attributes: true,    // 属性变动
  characterData: true, // 文本变动
});

function watchForm(formEl, onDirty) {
  let dirty = false;

  const ob = new MutationObserver((muts) => {
    if (muts.length === 0 || dirty) return;
    dirty = true;                 // 一脏永脏：置过标记就不再回调
    ob.disconnect();              // 观察任务已完成，立即收摊
    onDirty();
  });

  ob.observe(formEl, {
    attributes: true,             // 用户控件常以 aria-* 或 class 标记选中态
    attributeFilter: ['value', 'class', 'aria-checked', 'aria-selected'],
    childList: true,              // 富文本/标签输入会增删节点
    subtree: true,
    characterData: true,
  });

  return {
    isDirty() { return dirty; },
    markClean() {                 // 保存成功后重新武装观察
      dirty = false;
      ob.disconnect();
      ob.observe(formEl, {
        attributes: true,
        attributeFilter: ['value', 'class', 'aria-checked', 'aria-selected'],
        childList: true,
        subtree: true,
        characterData: true,
      });
    },
    stop() { ob.disconnect(); },
  };
}

const guard = watchForm(document.querySelector('#editor-form'), () => {
  window.onbeforeunload = () => '改动尚未保存，确定离开？';
});

// 元素尺寸变化回调
const ob = new ResizeObserver((entries) => {
  entries.forEach((e) => console.log(e.contentRect.width));
});
ob.observe(document.querySelector('.box'));

const chart = document.querySelector('.chart');

const ro = new ResizeObserver((entries) => {
  for (const entry of entries) {
    const { width, height } = entry.contentRect;
    // 按新尺寸重绘：echarts 的 resize()、canvas 的重设宽高等
    redrawChart(entry.target, width, height);
  }
});

ro.observe(chart);

// 组件卸载时务必 disconnect，避免内存泄漏
// ro.disconnect();

// 需 HTTPS 与用户手势
await navigator.clipboard.writeText('复制内容');
const text = await navigator.clipboard.readText();

// 复制文本到剪贴板：Clipboard API 优先，execCommand 降级
async function copyToClipboard(text) {
  try {
    await navigator.clipboard.writeText(text);
    return true;
  } catch (err) {
    // 降级方案：隐藏 textarea + execCommand
    const textarea = document.createElement('textarea');
    textarea.value = text;
    textarea.style.position = 'fixed';
    textarea.style.opacity = '0';
    document.body.appendChild(textarea);
    textarea.select();
    const ok = document.execCommand('copy');   // 已废弃但仍是唯一的同步降级
    document.body.removeChild(textarea);
    return ok;
  }
}

// 读取剪贴板：需要用户手势触发，且需要权限
async function readClipboard() {
  try {
    return await navigator.clipboard.readText();
  } catch (err) {
    console.error('读取剪贴板失败（多半是权限拒绝）:', err);
    return null;
  }
}

// 同源多标签页通信
const ch = new BroadcastChannel('evt');
ch.postMessage({ hello: 1 });
ch.onmessage = (e) => console.log(e.data);
ch.close();

// auth-sync.js：每个标签页都加载这份代码
const authChannel = new BroadcastChannel('auth_sync');

// 收到广播：跟着执行相同的动作
authChannel.onmessage = (event) => {
  const { type, userId } = event.data;
  if (type === 'logout') {
    clearLocalSession(userId);        // 清 token、用户缓存
    redirectTo('/login');             // 跳登录页
  }
  if (type === 'login') {
    refreshHeader(event.data.user);   // 顶栏从游客态切成用户态
  }
};

// 登录/登出动作发生处：广播给其他标签页
function logout(userId) {
  clearLocalSession(userId);
  authChannel.postMessage({ type: 'logout', userId, at: Date.now() });
  redirectTo('/login');               // 自己跳，别的标签页收到消息后也跳
}

/**
 * 多标签页状态同步：BroadcastChannel 优先，storage 事件降级
 */
class TabSync {
  constructor(channelName) {
    this.channelName = channelName;
    this.handlers = new Set();
    this.channel = null;
    this.init();
  }

  init() {
    // 优先使用 BroadcastChannel
    if ('BroadcastChannel' in window) {
      this.channel = new BroadcastChannel(this.channelName);
      this.channel.onmessage = (e) => this.dispatch(e.data);
    } else {
      // 降级到 storage 事件
      window.addEventListener('storage', (e) => {
        if (e.key === this.channelName && e.newValue) {
          this.dispatch(JSON.parse(e.newValue));
        }
      });
    }
  }

  dispatch(message) {
    this.handlers.forEach((handler) => {
      try {
        handler(message);
      } catch (e) {
        console.error('handler 执行失败:', e);
      }
    });
  }

  on(handler) {
    this.handlers.add(handler);
    return () => this.handlers.delete(handler);   // 返回取消订阅函数
  }

  send(message) {
    if (this.channel) {
      this.channel.postMessage(message);
    } else {
      // 降级：通过 storage 事件触发（当前标签页不会收到自己的 storage 事件）
      localStorage.setItem(this.channelName, JSON.stringify(message));
      localStorage.removeItem(this.channelName);
    }
  }

  close() {
    if (this.channel) this.channel.close();
    this.handlers.clear();
  }
}

const lazyImages = document.querySelectorAll('img[data-src]');
const imageObserver = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (!entry.isIntersecting) return;
    const img = entry.target;
    img.addEventListener('error', () => {
      if (img.dataset.fallback && img.src !== img.dataset.fallback) {
        img.src = img.dataset.fallback;      // 换备用源重试一次
      } else {
        img.src = '/img/placeholder.png';    // 兜底占位图
        imageObserver.unobserve(img);
      }
    }, { once: true });
    img.src = img.dataset.src;
    img.removeAttribute('data-src');
    imageObserver.unobserve(img);
  });
}, { rootMargin: '100px', threshold: 0.01 });
lazyImages.forEach((img) => imageObserver.observe(img));

// 反模式：组件卸载后未 disconnect
let observer;
function setupObserver() {
  observer = new IntersectionObserver(callback);
  document.querySelectorAll('.item').forEach((el) => observer.observe(el));
}

function destroyComponent() {
  // 忘记调用 observer.disconnect()
  // 元素被移除，但 observer 仍持有引用，导致泄漏
}

// 正确做法
function destroyComponent() {
  observer.disconnect();
}

// 反模式：单页应用路由切换时未关闭 channel
function setupPage() {
  const channel = new BroadcastChannel('data');
  channel.onmessage = (e) => handleMessage(e.data);
  // 路由切换后 channel 仍存在，监听器累积
}

function observeItems() {
  const observer = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        fetch(`/api/item/${entry.target.id}`)
          .then((r) => r.json())
          .then((data) => {
            entry.target.innerHTML = renderHTML(data);
          });
      }
    });
  });
  document.querySelectorAll('.item').forEach((el) => observer.observe(el));
}