js实现$()

实现类似 jQuery 的 $() 函数

在 JavaScript 中实现类似 jQuery 的 $() 函数，可以通过以下方式创建一个简化版本的选择器函数。这个函数能够根据不同的输入参数返回匹配的元素或创建新元素。

function $(selector, context) {
  // 如果传入的是字符串，则作为选择器处理
  if (typeof selector === 'string') {
    context = context || document;
    const elements = context.querySelectorAll(selector);
    return elements.length > 1 ? Array.from(elements) : elements[0];
  }

  // 如果传入的是函数，则在DOM加载完成后执行
  if (typeof selector === 'function') {
    if (document.readyState !== 'loading') {
      selector();
    } else {
      document.addEventListener('DOMContentLoaded', selector);
    }
    return;
  }

  // 如果传入的是DOM元素，直接返回
  if (selector instanceof HTMLElement) {
    return selector;
  }

  // 如果传入的是对象数组，返回数组
  if (Array.isArray(selector)) {
    return selector;
  }
}

功能扩展

为了更接近 jQuery 的功能，可以扩展这个基础实现：

function $(selector, context) {
  // 创建元素
  if (typeof selector === 'string' && selector.startsWith('<')) {
    const template = document.createElement('template');
    template.innerHTML = selector.trim();
    return template.content.firstChild;
  }

  // 选择器查询
  if (typeof selector === 'string') {
    context = context || document;
    const elements = context.querySelectorAll(selector);
    return elements.length > 1 ? Array.from(elements) : elements[0];
  }

  // DOM就绪回调
  if (typeof selector === 'function') {
    if (document.readyState !== 'loading') {
      selector();
    } else {
      document.addEventListener('DOMContentLoaded', selector);
    }
    return;
  }

  // 包装DOM元素
  if (selector instanceof HTMLElement) {
    return selector;
  }

  // 包装节点列表
  if (selector instanceof NodeList || Array.isArray(selector)) {
    return selector.length === 1 ? selector[0] : Array.from(selector);
  }
}

链式调用支持

要实现类似 jQuery 的链式调用，可以创建一个包装器类：

class JQWrapper {
  constructor(elements) {
    this.elements = Array.isArray(elements) ? elements : [elements];
  }

  addClass(className) {
    this.elements.forEach(el => el.classList.add(className));
    return this;
  }

  removeClass(className) {
    this.elements.forEach(el => el.classList.remove(className));
    return this;
  }

  css(property, value) {
    this.elements.forEach(el => el.style[property] = value);
    return this;
  }
}

function $(selector) {
  return new JQWrapper(selector);
}

使用示例

// 选择元素
$('#myElement').addClass('highlight').css('color', 'red');

// 创建元素
const newDiv = $('<div class="box">New element</div>');
document.body.appendChild(newDiv);

// DOM就绪回调
$(function() {
  console.log('DOM is ready');
});

这个实现提供了 jQuery 中最常用的 $() 函数功能，包括选择元素、创建元素和DOM就绪回调。可以根据需要进一步扩展功能。