返回

小巧自如的jQuery封装之进化之路

前端

从封装函数到实现简易版自用 jQuery (二）

从封装函数到实现简易版自用jQuery (二）

在上一篇文章中，我们介绍了如何实现基本功能和封装成自己的库。这篇文章着重讲对自己 API 功能的拓展，使其更强大。以下基于第一篇文章，在本次练习中要用到的代码，以 addClass( ) 为例进行拓展。

function addClass(element, className) {
  if (element.classList) {
    element.classList.add(className);
  } else {
    element.className += ' ' + className;
  }
}

如果传参不是选择器，直接赋值给 className 的话，显然没有效果。那么我们对其进行改进。

function addClass(element, className) {
  if (typeof element === 'string') {
    element = document.querySelectorAll(element);
  }
  if (element.length) {
    for (var i = 0; i < element.length; i++) {
      if (element[i].classList) {
        element[i].classList.add(className);
      } else {
        element[i].className += ' ' + className;
      }
    }
  } else {
    if (element.classList) {
      element.classList.add(className);
    } else {
      element.className += ' ' + className;
    }
  }
}

这段代码实现了以下功能：

  1. 如果传参不是选择器，直接赋值给 className 的话，显然没有效果。
  2. 首先判断 element 是否是字符串，如果是，则将其转换为由该选择器选择的所有元素的数组。
  3. 如果 element 是一个数组，则遍历数组中的每个元素，并为其添加 className。
  4. 如果 element 不是一个数组，则直接为其添加 className。

这样，我们就对 addClass( ) 函数进行了拓展，使其更加强大。

除了上述拓展之外，我们还可以对 jQuery 库的其他函数进行拓展，使其更加符合我们的需求。例如，我们可以为 jQuery 库添加一个 ajax( ) 函数，使其能够发送 AJAX 请求。

总之，我们可以通过对 jQuery 库进行拓展，使其更加强大，以满足我们的需求。

除了以上介绍的拓展之外，我们还可以对 jQuery 库进行其他的拓展，使其更加符合我们的需求。例如，我们可以为 jQuery 库添加一个插件机制，使其能够轻松地添加新的功能。

jQuery 库是一个非常强大的工具，我们可以通过对它进行拓展，使其更加符合我们的需求。希望这篇文章能够对你有所帮助。