在前端开发中曾经离不开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>
效果
