System 浏览器系统工具

安装与引入

<script src="https://cloud.m775.net/js/system.js"></script>

npm i @gentbo/system

import '@gentbo/system';

基本使用

通过 GB.System() 选择需要的功能并直接调用。每个方法只完成一项操作，彼此之间没有依赖关系。

GB.System().ready(() => {
  console.log('DOM 已经可以操作');
});

GB.System().menu(() => {
  console.log('右键菜单已禁用');
});

API 速查

响应式 rem 适配

resize(width = 750, size = 16) 以设计稿宽度为基准，根据当前页面宽度调整根元素 font-size。在 750px 宽的设计稿中，调用默认配置后 1rem 对应 100px，设计稿上的 32px 可写成 0.32rem。

GB.System().ready(() => {
  GB.System().resize(750, 16);
});

该方法会立即计算一次，并通过独立的 resize 监听器在窗口尺寸变化时重新计算。重复调用会替换 System 自己注册的旧监听器，不会覆盖业务代码的 window.onresize。

禁用右键菜单

menu(callback) 在 document.body 上监听 contextmenu 并阻止浏览器默认菜单，回调会收到原生事件对象。重复调用时会替换 System 之前注册的右键监听器。

GB.System().ready(() => {
  GB.System().menu(event => {
    console.log('用户触发了右键操作');
  });
});

该设置作用于整个 body。只需要局部禁用时，应直接对目标元素使用原生事件监听。

DOM 就绪

ready(callback) 用于在 DOM 可以安全访问后运行代码。如果页面仍在解析，则等待 DOMContentLoaded；如果 DOM 已经就绪，则通过零延迟任务异步执行，保证调用时序一致。

GB.System().ready(() => {
  const app = document.querySelector('#app');
  app.removeAttribute('hidden');
});

页面加载完成

complete(callback) 监听窗口的 load 事件，适合等待样式、图片和其他页面资源加载完成后再执行操作。

GB.System().complete(() => {
  document.body.classList.add('loaded');
});

如果调用时页面已经加载完成，回调会通过零延迟任务异步执行；否则等待下一次 load 事件，并且只执行一次。

资源加载进度

progress(callback, url?) 通过 XMLHttpRequest 重新请求资源。未传入 URL 时请求当前页面地址；传入 URL 时请求指定资源。

const request = GB.System().progress((complete, ratio, error) => {
  if (error) {
    console.error('加载失败：', error.type, error.status);
    return;
  }

  const percent = Math.round(ratio * 100);
  console.log(`${percent}%`);

  if (complete) {
    console.log('资源加载完成');
  }
}, '/assets/package.zip');

// 如有需要，可主动取消
// request.abort();

只有响应提供可计算的内容长度时才会收到过程进度。该方法会产生一次额外的 GET 下载，并将响应作为 Blob 接收，不适合仅为展示进度而重复请求大型资源。跨域地址还需要服务端允许 CORS。

使用边界