「这是我参与2022首次更文挑战的第22天，活动详情查看：2022首次更文挑战」。

写在前面

前面一文已经说了，jquery 是一个划时代的优秀 javascript 工具库
为了学习它的源码，我们已经仿照 jquery 的使用，实现了输入选择器字符串，然后绑定点击事件的功能
接下来，我们继续实现其他功能

接受函数

在 jquery 中，接收的参数为函数时，该函数会在 dom 结构加载完成之后，立即被执行
因此，我么需要通过 DOMContentLoaded 事件执行时，将该函数作为回掉执行
下面是实现的代码，通过 addEventListener 给 document 注册 DOMContentLoaded 事件

class Jq {
  constructor(arg, preObj) {
    let argType = typeof arg;
    
    if (argType === "function") {
      // 接收的是函数

      // dom 结构加载完成后执行次函数
      document.addEventListener("DOMContentLoaded", arg);
    }
  }
}

接收原生 dom

我们先定义好使用方法

$(document.querySelector("button")).click(() => {
  console.log(123);
});

之前我们实现过接受选择器字符串的情况，如果输入的是原生 dom，那么我们可以省去查找元素的那一步
关键是如何判断，接受的参数为原生 dom，为了更加关注最简版本 jquery 的实现，这里就不过多关注参数的校验，一些特殊的边界情况需要暂时忽略
这里整合一下以往的代码，简单判断了一下

constructor(arg, preObj) {
    if (typeof preObj === "undefined") {
      this.preObj = [document];
    } else {
      this.preObj = preObj;
    }

    let argType = typeof arg;
    if (argType === "string") {
      // 接收的是选择器

      let eleList = document.querySelectorAll(arg);
      this.#addEleList(eleList);
    } else if (argType === "function") {
      // 接收的是函数

      // dom 结构加载完成后执行次函数
      document.addEventListener("DOMContentLoaded", arg);
    } else {
      // 接收的是原生 dom

      if (typeof arg.length === "undefined") {
        // 单个 dom
        this[0] = arg;
        this.length = 1;
      } else {
        // 多个 dom
        this.#addEleList(arg);
      }
    }
}

这里不管接受单个原生 dom 元素还是多个原生 dom 元素，统一按照数字索引进行存储，以备后用，然后用 length 属性存储元素个数

小结

至此已经实现了，my-jquery 中接收参数为选择器字符串，为函数，为原生 dom 的情况
之前的实现中，只能支持单个事件的绑定，但实际使用的场景下，可能会有需要绑定多个事件的需求
下篇文章将会接着实现绑定多个事件的情况

最后

今天的分享就到这里了，欢迎大家在评论区里面进行讨论 👏。
如果觉得文章写的不错的话，希望大家不要吝惜点赞，大家的鼓励是我分享的最大动力 🥰

从 0 开始开发 jquery 工具库（二）

写在前面

接受函数

接收原生 dom

小结

最后