原生JS实现简单的链式操作
本文介绍如何使用原生JavaScript模拟jQuery的链式调用机制。通过封装DOM元素并返回实例对象，实现连续绑定事件及显示隐藏操作，帮助开发者理解链式调用的核心原理。
原生JS链式调用原理
在jQuery库中，jQuery对象可以连续调用多种方法，这是因为jQuery将这些方法挂载在其自定义的对象上。然而，使用原生JavaScript获取的DOM对象，通常只能单次调用addEventListener方法来添加事件。若需继续添加其他事件，必须再次调用addEventListener。
var area = document.querySelector('.area');
area.addEventListener('mouseenter', function(){
console.log( 'mouse enter' );
});
area.addEventListener('click', function(){
console.log( 'click' );
});
那么，如果希望在area元素上绑定mouseenter事件后，紧接着绑定click事件，该如何处理？我们可以参考jQuery的实现思路，尽管原生实现不如jQuery那样完善。
;(function(){
window.G = function(selector){
return new _G(selector);
}
function _G(selector){
this.elements = document.querySelector(selector);
return this;
}
_G.prototype = {
constructor : _G,
method : function(name, fn){
if(this.elements){
this.elements.addEventListener(name, fn, false);
}
return this;
}
}
})();
通过以下代码，我们可以实现一个简单的链式调用，从而为.area元素同时绑定两个事件：
G('.area').method('mouseenter', function(){
console.log( 'mouse enter' );
}).method('click', function(){
console.log( 'click' );
})
代码实现与解析
实现原理通过代码可以清晰看出：
- 输出G('.area')的结果，它返回的是一个_G类的实例对象；
- 在_G类的内部，DOM对象被存储在elements属性上，同时在prototype上实现了method方法，该方法负责给elements添加对应的事件。每次调用后，都会返回this，以便供下一次链式调用使用；
- 因此，G('.area')就可以使用method方法来添加事件了。由于每次method调用都会返回this，从而实现了事件的连续添加。
扩展方法与注意事项
上述代码仅实现了为DOM对象连续添加事件的功能。当然，我们也可以在_G.prototype中添加其他方法，但切记不要忘记在方法末尾return this：
_G.prototype = {
constructor : _G,
method : function(name, fn){
if(this.elements){
this.elements.addEventListener(name, fn, false);
}
return this;
},
show : function(){
this.elements.style.display='';
return this;
},
hide : function(){
this.elements.style.display='none';
return this;
}
}
这样，G()就可以使用show()和hide()方法了：
// 隐藏
G('.area').hide();
// 显示并且绑定click事件
G('.area').show().method('click', function(){
console.log( Date.now() );
})
需要注意的是，G('.area')返回的并非原生DOM对象，因此不能直接操作原生DOM对象上的属性与方法。例如，若想隐藏.area元素：
G('.area').style.display='none'; // 错误直接这样操作是错误的。由于DOM对象存储在elements属性中，如果想直接在DOM对象上操作，正确的做法是：
G('.area').elements.style.display='none'; // 正确总结来说，本文仅使用原生JavaScript简单实现了链式操作。更复杂的功能，例如对象缓存、异常处理等，都需要在后续进行完善和处理。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。
JS动态构建复杂嵌套JSON对象的方法
2026-11-05 15:41:52
JS负数取余为什么是负数？详解余数与模运算区别
2026-11-05 13:34:41
JS 解压出现乱码或报错怎么解决？
2026-11-05 12:32:38
JS 中 startsWith、indexOf 与正则判断字符串前缀的对比
2026-11-04 22:19:43
JS解析Excel后怎么将数据转换为JSON格式
2026-11-04 20:58:28