自己用原生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，我们可以获得更高的灵活性和性能，但需要付出更多的开发成本。建议在复杂度较高、性能敏感的项目中采用这种方案，而在常规开发中优先使用现有的成熟库。