js实现$(window)

在JavaScript中实现类似jQuery的$(window)功能，可以通过原生方法或简单封装实现。以下是几种常见方法：

直接使用原生window对象

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

window.addEventListener('resize', function() {
  console.log('Window resized');
});

简单封装为$函数

若需要模拟jQuery风格，可创建如下封装：

const $ = function(selector) {
  if (selector === 'window') {
    return {
      on: (event, callback) => window.addEventListener(event, callback),
      off: (event, callback) => window.removeEventListener(event, callback),
      width: () => window.innerWidth,
      height: () => window.innerHeight
    };
  }
  // 其他选择器处理...
};

// 使用示例
$('window').on('resize', () => console.log('Resized'));

完整jQuery风格实现

更完整的实现可包含DOM元素选择：

const $ = function(selector) {
  if (selector === window || selector === 'window') {
    return {
      on: function(events, handler) {
        events.split(' ').forEach(e => window.addEventListener(e, handler));
      },
      off: function(events, handler) {
        events.split(' ').forEach(e => window.removeEventListener(e, handler));
      },
      trigger: function(event) {
        window.dispatchEvent(new Event(event));
      }
    };
  }
  // 其他选择器逻辑...
};

现代ES6模块化方案

使用类封装实现：

class JQWindow {
  static on(event, callback) {
    window.addEventListener(event, callback);
  }

  static off(event, callback) {
    window.removeEventListener(event, callback);
  }

  static get width() {
    return window.innerWidth;
  }
}

// 使用方式
JQWindow.on('scroll', () => console.log('Scrolling'));

注意事项

• 原生window对象已包含所有浏览器API，如window.innerWidth、window.scrollY等
• 事件监听优先使用addEventListener而非onresize等属性
• 移动端需考虑visualViewportAPI处理虚拟键盘等情况