封装函数到实现简化版jQuery

封装函数到实现简化版jQuery不仅可以使代码更简洁，而且可以提高代码的可重用性。在本文中，我们将向您展示如何使用封装函数来实现简化版的jQuery。

首先，我们需要创建一个名为$的函数，这个函数将作为简化版jQuery的入口。

function $(selector) {
  // 根据选择器获取元素
  let elements = document.querySelectorAll(selector);

  // 将元素包装成一个伪数组
  const pseudoArray = Array.from(elements);

  // 扩展伪数组，使其具有jQuery的功能
  extend(pseudoArray);

  // 返回伪数组
  return pseudoArray;
}

接下来，我们需要扩展伪数组，使其具有jQuery的功能。我们可以使用extend()函数来做到这一点。

function extend(pseudoArray) {
  // 扩展伪数组，使其具有jQuery的功能

  // 添加`each()`方法
  pseudoArray.each = function(callback) {
    for (let i = 0; i < this.length; i++) {
      callback.call(this[i], i, this[i]);
    }
  };

  // 添加`find()`方法
  pseudoArray.find = function(selector) {
    let elements = [];
    for (let i = 0; i < this.length; i++) {
      elements = elements.concat(Array.from(this[i].querySelectorAll(selector)));
    }

    // 将元素包装成一个伪数组
    const pseudoArray = Array.from(elements);

    // 扩展伪数组，使其具有jQuery的功能
    extend(pseudoArray);

    // 返回伪数组
    return pseudoArray;
  };

  // 添加`attr()`方法
  pseudoArray.attr = function(name, value) {
    if (value === undefined) {
      return this[0].getAttribute(name);
    } else {
      for (let i = 0; i < this.length; i++) {
        this[i].setAttribute(name, value);
      }
      return this;
    }
  };

  // 添加`css()`方法
  pseudoArray.css = function(name, value) {
    if (value === undefined) {
      return window.getComputedStyle(this[0])[name];
    } else {
      for (let i = 0; i < this.length; i++) {
        this[i].style[name] = value;
      }
      return this;
    }
  };

  // 添加`on()`方法
  pseudoArray.on = function(event, callback) {
    for (let i = 0; i < this.length; i++) {
      this[i].addEventListener(event, callback);
    }
    return this;
  };
}

现在，我们就可以使用$函数来操作DOM元素了。例如，我们可以使用以下代码来获取ID为item3的元素的兄弟元素。

$(`#item3`).siblings();

我们也可以使用以下代码来遍历所有的孩子节点，如果不是item3，那么就存到array伪数组中。

const array = [];
$(`#item3`).parent().children().each(function(i, el) {
  if (el.id !== `item3`) {
    array.push(el);
  }
});