js实现$(window)

在JavaScript中，原生实现类似jQuery的$(window)功能可以通过以下方式完成。jQuery的$()函数主要用于DOM操作和事件绑定，而$(window)特指浏览器窗口对象，常用于监听窗口事件或获取窗口属性。

获取window对象

原生JavaScript中直接使用window对象即可，无需封装：

const win = window; // 等同于jQuery的$(window)

监听窗口事件

原生方法实现$(window).on('event', handler)：

window.addEventListener('resize', function() {
  console.log('窗口大小变化');
});

// 对应移除事件
const handler = () => console.log('滚动事件');
window.addEventListener('scroll', handler);
window.removeEventListener('scroll', handler);

常用窗口属性

获取窗口尺寸或滚动位置：

// 视口宽度
const viewportWidth = window.innerWidth; 

// 视口高度
const viewportHeight = window.innerHeight; 

// 垂直滚动位置
const scrollTop = window.pageYOffset || document.documentElement.scrollTop;

封装简化函数

若需模拟jQuery的链式调用，可封装工具函数：

function $(element) {
  return {
    on: (event, callback) => element.addEventListener(event, callback),
    off: (event, callback) => element.removeEventListener(event, callback),
    width: () => element.innerWidth,
    height: () => element.innerHeight
  };
}

// 使用示例
$(window).on('click', () => console.log('窗口被点击'));

注意事项

• 原生window对象已包含所有浏览器API，无需额外选择器。
• 滚动事件需考虑兼容性，旧版IE使用document.documentElement.scrollTop。
• 现代浏览器推荐使用window.requestAnimationFrame替代scroll/resize事件进行性能优化。