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

写在前面

jquery 一个高效的，精简的且功能丰富的 javascript 工具库
在 web 应用发展的过程中，jquery 起到了不可或缺的推动作用
尽管在当下框架流行的时代，jquery 不再那么适用，但是 jquery 源码中的一些编码技巧，仍然值得我们学习
学习一个库代码源代码的的最好方式，就是实现一个最小版本的库，因此本文将一步一步实现一个最小 jquery

最小 jquery

下面是 my-jquery.js

class Jq {
  // ...
}

function $(arg) {
  return new Jq(arg);
}

下面是使用示例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./my-jq.js"></script>
  </head>
  <body>
    <h1>my Jq demo</h1>
    <button>🔘</button>
    <hr />
    <div class="btn">div 模拟 btn</div>
    <div class="btn">div 模拟 btn2</div>
  </body>

  <script>
    $(".btn").click(() => {
      console.log(123);
    });
  </script>
</html>

导入 my-jquery 后，执行 $ 函数，输入相应的参数，即可完成对应的功能需求

输入选择器

选择器能选择一个元素或多个元素的情况

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

my-jquery.js 的实现如下

class Jq {
  constructor(arg, preObj) {
    let argType = typeof arg;
    
    if (argType === "string") {
      let eleList = document.querySelectorAll(arg);
      this.#addEleList(eleList);
    }
  }

  #addEleList(eleList) {
    eleList.forEach((ele, index) => {
      this[index] = ele;
    });
    this.length = eleList.length;
  }

  click(fn) {
    for (let i = 0; i < this.length; i++) {
      this[i].addEventListener("click", fn);
    }
  }
}

使用 typeof 操作符得到输入的参数的类型，如果类型是字符串，则判断为选择器
通过 querySelecterAll api 获取所有被选择的 dom 元素集合
然后用 forEach 遍历上一步得到的 NodeList，依次挂载到 JQ 对象上，以备后用
然后实现我们的 click 函数
- 该函数接受一个 callback 回掉函数
- 然后通过 addEventListener 给 dom 元素注册一个 click 事件，并接收的 callback 回掉函数关联到 dom 元素的 click 事件
- 这样当 dom 元素被点击时，就会调用预先传入的回掉函数，以实现事件绑定的效果

小结

今天的文章只是简单实现了一个，接受选择器参数，然后绑定点击事件的最简版本的 jquery
后面篇文章将会继续实现，接收原生 dom 元素来绑定事件的情况、接收参数为函数的情况、多个元素绑定多个事件的情况...

最后

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

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

写在前面

最小 jquery

输入选择器

小结

最后