草根也能快速出头？JavaScript 198行代码构建你的专属 JS 类库！

前端

2023-11-18 02:33:58

用 JavaScript 构建自己的类库：198 行代码

面向对象编程的优势

JavaScript 作为一种强大的语言，支持面向对象编程，它提供了模块化、代码重用和增强灵活性等优势。通过将代码组织成类和对象，我们可以创建可扩展且可维护的应用程序。

用 JavaScript 创建类库

本教程将指导你用原生 JavaScript 编写一个轻量级的类库，类似于 jQuery，只需 198 行代码。我们将深入探讨面向对象编程的基础知识，并创建我们自己的类和方法，涵盖选择元素、属性操作、HTML 内容管理和事件处理等核心功能。

类库的核心 API

$()

这是一个函数，用于选择元素。通过传入 CSS 选择器，你可以轻松地选择页面上的特定元素。

代码示例：

$("div") // 选择所有 div 元素

attr()

此方法可用于设置或获取元素的属性。它接受两个参数：要设置的属性名称和要分配的值（可选）。

代码示例：

$(".my-element").attr("id", "new-id") // 设置元素的 id 属性

html()

此方法可用于设置或获取元素的 HTML 内容。它接受一个参数，即要设置的 HTML 代码（可选）。

代码示例：

$(".my-element").html("New HTML content") // 设置元素的 HTML 内容

on()

此方法用于给元素绑定事件。它接受两个参数：要绑定的事件名称和回调函数。

代码示例：

$(".my-element").on("click", function() {
  // 点击元素时触发的函数
})

完整源码

下面是类库的完整源码，你可以直接复制和使用：

function $(selector) {
  return document.querySelectorAll(selector);
}

$.prototype.attr = function(name, value) {
  if (value) {
    this.forEach(function(element) {
      element.setAttribute(name, value);
    });
  } else {
    return this[0].getAttribute(name);
  }
};

$.prototype.html = function(html) {
  if (html) {
    this.forEach(function(element) {
      element.innerHTML = html;
    });
  } else {
    return this[0].innerHTML;
  }
};

$.prototype.on = function(event, callback) {
  this.forEach(function(element) {
    element.addEventListener(event, callback);
  });
};

使用示例

// 选择元素并设置属性
$("div").attr("id", "my-div");

// 获取元素的 HTML 内容
let htmlContent = $("p").html();

// 给元素绑定点击事件
$("button").on("click", function() {
  alert("Button clicked!");
});