参照jq的方法定制自己的js工具包

最新推荐文章于 2020-03-30 17:37:53 发布

guocongcong-cc

最新推荐文章于 2020-03-30 17:37:53 发布

阅读量222

点赞数

分类专栏：前端知识零碎文章标签： js

本文链接：https://blog.csdn.net/weixin_40073115/article/details/103732483

版权

前端知识零碎专栏收录该内容

40 篇文章 1 订阅

订阅专栏

在前端开发中曾经离不开jq，随着jq的年迈逐渐离去，很多项目中已不再建议引入jq，毕竟它太万能也太重了，对于习惯了用jq的小童鞋们可以尝试在项目中自己参照jq的方法封装适合自己项目的工具库，此处分享一个几年前阅读jq源码时自己写的一个小工具，可以像jq一样去修改css和给元素绑定各类事件。

关键点：自执行匿名函数，不要在原生对象上扩展方法，采用决策树优化if-else

(
        function(global){
           function Libary(sel){
                return new Handel(sel)
           }
            function Handel (sel){
                var els = document.querySelectorAll(sel);
                this.elments = els;
            }
            Handel.prototype={
                css:function(name,value){
                    for(var i=0;i<this.elments.length;i++){
                        var el = this.elments[i];
                        el.style[name] = value;
                    }
                    return this;
                },
                eventListener:function (name,fn){
                    for(var i=0;i<this.elments.length;i++){
                        var el = this.elments[i];
                        el.removeEventListener(name,fn,false)
                        el.addEventListener(name,fn,false)
                    }
                    return this;
                }
            }
        global.$$ = global.lebary = Libary;
    })(window)

完整使用demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div>123</div>
    <div id="el2">456</div>
    <div>789</div>
</body>
<script>
    (
        function(global){
           function Libary(sel){
                return new Handel(sel)
           }
            function Handel (sel){
                var els = document.querySelectorAll(sel);
                this.elments = els;
            }
            Handel.prototype={
                css:function(name,value){
                    for(var i=0;i<this.elments.length;i++){
                        var el = this.elments[i];
                        el.style[name] = value;
                    }
                    return this;
                },
                eventListener:function (name,fn){
                    for(var i=0;i<this.elments.length;i++){
                        var el = this.elments[i];
                        el.removeEventListener(name,fn,false)
                        el.addEventListener(name,fn,false)
                    }
                    return this;
                }
            }
        global.$$ = global.lebary = Libary;
    })(window)

    $$("div").css("color","red").eventListener("click",function(el){
        alert(el.toString())
    });
    $$("div").eventListener("mouseover",function(el){
        alert("yidong")
    });
    // $$("#el2").eventListener("click",function(el){
    //     alert(el);
    // });
    
</script>
</html>

效果
在这里插入图片描述