自己用原生js写jquery能够达到寻找节点，调用方法的效果

一、背景与问题

在前端开发中，jQuery曾经是处理DOM操作的黄金标准，其链式调用、选择器、事件处理等特性极大提升了开发效率。然而随着现代浏览器对原生JS的支持增强，越来越多开发者开始探索用原生JS实现类似jQuery的功能。

本篇文章将深入解析如何用原生JS构建一个简易的DOM操作库，重点探讨其工作原理、实现细节和实际应用场景。我们将从底层实现原理出发，结合具体案例，分析其优缺点和性能考量。

二、基本原理

jQuery的核心功能包含三个核心模块：

选择器（Selector）
链式调用（Chaining）
方法调用（Method Invocation）

原生JS虽然没有内置的DOM选择器库，但可以通过以下方式实现类似功能：

使用document.querySelectorAll等API
自定义选择器解析逻辑
构建链式调用的返回对象
封装DOM操作方法

1. 选择器实现原理

DOM选择器需要处理多种语法，如：

按ID选择：#id
按类选择：.class
按标签选择：tag
层级选择器：parent > child
属性选择器：[attr=value]

原生JS的document.querySelectorAll可以处理大部分选择器，但需要自定义解析逻辑来支持更复杂的语法。

2. 链式调用原理

链式调用的关键在于每个方法返回当前对象，例如：

function myQuery(selector) {
  this.elements = document.querySelectorAll(selector);
  return this;
}

通过返回this对象，可以连续调用多个方法。

3. 方法调用原理

每个方法需要处理DOM元素集合，例如：

myQuery.prototype.text = function(text) {
  if (text !== undefined) {
    this.elements.forEach(el => el.textContent = text);
    return this;
  }
  return this.elements[0].textContent;
}

通过封装通用方法，实现类似jQuery的接口。

三、环境准备

# 创建项目结构
mkdir jquery-clone
cd jquery-clone
mkdir src
touch src/jquery.js

四、核心实现

1. 基础选择器实现

// src/jquery.js
class MyQuery {
  constructor(selector) {
    this.elements = document.querySelectorAll(selector);
  }

  // 链式调用方法
  get() {
    return this;
  }
}

// 模拟jQuery的$函数
const $ = (selector) => new MyQuery(selector);

关键点解释：

使用document.querySelectorAll处理选择器
构造函数返回DOM元素集合
get()方法实现链式调用
模拟jQuery的$函数

2. 链式调用示例

// 使用链式调用
$.('p')
  .get()
  .text('Hello World')
  .get();

执行流程：

创建MyQuery实例，传入p选择器
调用get()返回当前实例
调用text()方法修改文本内容
再次调用get()返回实例

3. 方法调用实现

// 增加文本处理方法
MyQuery.prototype.text = function(text) {
  if (text !== undefined) {
    this.elements.forEach(el => el.textContent = text);
    return this;
  }
  return this.elements[0].textContent;
}

关键点解释：

方法接受参数，支持读写操作
通过forEach处理多个元素
返回this实现链式调用

五、完整案例

1. 动态创建元素并绑定事件

// src/index.html
<!DOCTYPE html>
<html>
<head>
  <title>jQuery Clone Demo</title>
</head>
<body>
  <button id="create">Create Div</button>
  <div id="container"></div>

  <script src="src/jquery.js"></script>
  <script>
    $(document).ready(() => {
      $('#create')
        .on('click', () => {
          const $div = $('<div>')
            .text('New Div')
            .css('color', 'red')
            .appendTo('#container');
        });
    });
  </script>
</body>
</html>

关键点解析：

使用on()方法绑定事件
使用css()设置样式
使用appendTo()添加到容器
完整的DOM操作流程

2. 实现完整方法集合

// 增加更多方法
MyQuery.prototype.css = function(property, value) {
  if (value !== undefined) {
    this.elements.forEach(el => el.style[property] = value);
    return this;
  }
  return this.elements[0].style[property];
};

MyQuery.prototype.appendTo = function(selector) {
  this.elements.forEach(el => {
    document.querySelector(selector).appendChild(el);
  });
  return this;
};

典型用法：

$('<div>')
  .text('Hello')
  .css('background', 'yellow')
  .appendTo('#container');

六、源码解析

1. 选择器处理流程

constructor(selector) {
  this.elements = document.querySelectorAll(selector);
}

使用querySelectorAll处理复杂选择器
返回的是NodeList对象
需要处理动态变化的DOM结构

2. 链式调用机制

get() {
  return this;
}

每个方法返回当前实例
实现连续调用多个方法
保持上下文一致性

3. 方法封装策略

text(text) {
  if (text !== undefined) {
    this.elements.forEach(el => el.textContent = text);
    return this;
  }
  return this.elements[0].textContent;
}

采用函数式编程思想
支持读写操作
保持方法的可重用性

七、进阶使用

1. 支持事件委托

MyQuery.prototype.on = function(event, handler) {
  this.elements.forEach(el => {
    el.addEventListener(event, handler);
  });
  return this;
};

应用场景：

处理动态添加的元素
减少事件监听器数量

2. 增加遍历方法

MyQuery.prototype.find = function(selector) {
  const results = [];
  this.elements.forEach(el => {
    const matches = el.querySelectorAll(selector);
    results.push(...matches);
  });
  return new MyQuery(results);
};

使用示例：

$('#container')
  .find('p')
  .css('font-weight', 'bold');

3. 支持属性操作

MyQuery.prototype.attr = function(name, value) {
  if (value !== undefined) {
    this.elements.forEach(el => el.setAttribute(name, value));
    return this;
  }
  return this.elements[0].getAttribute(name);
};

应用场景：

动态修改元素属性
处理表单元素

八、性能与工程实践

1. 性能优化策略

优化点	解决方案	效果
频繁选择器	缓存结果	减少DOM遍历
事件绑定	事件委托	减少监听器数量
遍历方法	原生方法	提高性能

优化示例：

MyQuery.prototype.each = function(callback) {
  this.elements.forEach(callback);
  return this;
};

2. 异常处理机制

MyQuery.prototype.text = function(text) {
  if (!this.elements.length) {
    throw new Error('No elements found');
  }
  if (text !== undefined) {
    this.elements.forEach(el => el.textContent = text);
    return this;
  }
  return this.elements[0].textContent;
};

异常处理原则：

前置检查防止空指针
通过try/catch处理运行时错误
提供清晰的错误信息

3. 安全考量

潜在风险：

XSS注入（通过textContent）
操作不可见元素
修改关键DOM结构

安全建议：

严格验证输入内容
使用textContent代替innerHTML
限制可操作的元素类型

九、常见问题与踩坑

1. 常见错误示例

错误代码：

$.('p')
  .text('Hello')
  .get(); // 没有正确返回值

问题分析：

get()方法没有返回值
链式调用中断

解决方法：

$.('p')
  .text('Hello')
  .get(); // 正确返回实例

2. 事件绑定问题

错误代码：

$('#create').on('click', () => {
  // 未正确绑定事件
});

问题分析：

on方法未正确实现
未处理动态添加的元素

解决方法：

MyQuery.prototype.on = function(event, handler) {
  this.elements.forEach(el => {
    el.addEventListener(event, handler);
  });
  return this;
};

3. 内存泄漏风险

典型场景：

const $div = $('<div>').text('Test');
$div = null; // 未正确释放

解决方法：

使用remove()方法移除元素
避免不必要的引用

十、最佳实践

1. 推荐实践

优先使用原生方法
避免过度封装
保持方法简洁
使用ES6类结构

2. 推荐代码结构

src/
├── jquery.js      // 主库文件
├── utils.js       // 工具方法
├── dom.js         // DOM操作
├── event.js       // 事件处理
└── index.html     // 示例页面

3. 推荐开发规范

方法命名采用驼峰式
避免全局污染
使用模块化设计
注释关键逻辑

十一、总结

通过本文的深入探讨，我们实现了类似jQuery的DOM操作库，深入理解了其工作原理和实现细节。在实际开发中，这种方案适用于：

需要完全控制DOM操作的场景
要求严格性能优化的项目
需要高度定制化功能的系统

但需要注意避免使用的情况：

简单的页面操作
需要快速开发的项目
不需要复杂选择器的场景

通过合理使用原生JS，我们可以获得更高的灵活性和性能，但需要付出更多的开发成本。建议在复杂度较高、性能敏感的项目中采用这种方案，而在常规开发中优先使用现有的成熟库。

自己用原生js写jquery能够达到寻找节点，调用方法的效果。

自己用原生js写jquery能够达到寻找节点，调用方法的效果

一、背景与问题

二、基本原理

1. 选择器实现原理

2. 链式调用原理

3. 方法调用原理

三、环境准备

四、核心实现

1. 基础选择器实现

2. 链式调用示例

3. 方法调用实现

五、完整案例

1. 动态创建元素并绑定事件

2. 实现完整方法集合

六、源码解析

1. 选择器处理流程

2. 链式调用机制

3. 方法封装策略

七、进阶使用

1. 支持事件委托

2. 增加遍历方法

3. 支持属性操作

八、性能与工程实践

1. 性能优化策略

2. 异常处理机制

3. 安全考量

九、常见问题与踩坑

1. 常见错误示例

2. 事件绑定问题

3. 内存泄漏风险

十、最佳实践

1. 推荐实践

2. 推荐代码结构

3. 推荐开发规范

十一、总结

评论已关闭

推荐阅读