原生js实现简单的链式操作

Vixb 发布于2019-08-20 17:36 / 1276人阅读

摘要：对象存储在中，如果想直接在对象上操作，可以正确总结一下，这里我们也只是用原生简单的实现了下链式操作，更复杂的功能，比如对象缓存，异常处理等等，都需要后续再完善处理。

在jQuery中，一个jq对象能一直连续调用各种方法，因为jQuery把这些方法挂载他自定义的一个对象中，但是使用原生的js获取的DOM对象，只能使用一次addEventLisenter方法添加事件，如果要接着添加事件，还得再调用addEventLisenter。

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"; // 正确

总结一下，这里我们也只是用原生js简单的实现了下链式操作，更复杂的功能，比如对象缓存，异常处理等等，都需要后续再完善处理。

服务器托管私有云 js实现的简单特效原生js实现 ajax原生js实现原生js实现addclass

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/83711.html

前端培训-中级阶段（6）- jQuery的事件绑定链式操作及原理（2019-07-25期）

摘要：前端最基础的就是。帮助从旧的事件方法转换，和。方法移除用绑定的事件处理程序。特定的事件处理程序可以被移除元素上提供事件名称，命名空间，处理函数。用于过滤器的触发事件的选择器元素的后代。事件触发模拟触发原生使用触发。前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS）...

Airy 2019-08-02 15:25 评论0 收藏0
前端培训-中级阶段（6）- jQuery的事件绑定链式操作及原理（2019-07-25期）

摘要：前端最基础的就是。帮助从旧的事件方法转换，和。方法移除用绑定的事件处理程序。特定的事件处理程序可以被移除元素上提供事件名称，命名空间，处理函数。用于过滤器的触发事件的选择器元素的后代。事件触发模拟触发原生使用触发。前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS）...

sutaking 2019-08-23 18:26 评论0 收藏0
仿效jQuery如何高效的写JSLite

摘要：讨论和性能的文章并不罕见。快速渲染和响应意味着更好的用户体验。附加事件处理程序的首选方法。糟糕建议高效使用子查询缓存的父元素正如前面所提到的，遍历是一项昂贵的操作。糟糕建议高效避免通用选择符将通用选择符放到后代选择符中，性能非常糟糕。讨论jQuery和javascript性能的文章并不罕见。然而，我计划根据他人对jQuery总结的一些速度方面的技巧和一些建议，来教你提升你的JSLit...

PascalXie 2019-08-21 10:24 评论0 收藏0