jQuery的原生实现

虽然jQuery没用多少,但是这个牛逼的库可是有很多可以学习的地方。所以我要做的就是尽量用原生JS实现jQuery里的功能。

toggle trigger 这类是我比较感兴趣其内部实现原理的。

如以下的ES5代码的简单实现:

<style type="text/css">  
    div.testClass{  
        background-color:gray;  
    }  
</style>  
<script type="text/javascript">  
function hasClass(obj, cls) {  
    return obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));  
}  
function addClass(obj, cls) {  
    if (!this.hasClass(obj, cls)) obj.className += " " + cls;  
}  
function removeClass(obj, cls) {  
    if (hasClass(obj, cls)) {  
        var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');  
        obj.className = obj.className.replace(reg, ' ');  
    }  
}   
function toggleClass(obj,cls){  
    if(hasClass(obj,cls)){  
        removeClass(obj, cls);  
    }else{  
        addClass(obj, cls);  
    }  
}  
function toggleClassTest(){  
    var obj = document. getElementById('test');  
    toggleClass(obj,"testClass");  
}  
</script>  
 </head> 
<body>  
    <div id = "test" style = "width:250px;height:100px;">  
        sssssssssssss  
    </div>  
    <input type = "button" value = "toggleClassTest" onclick = "toggleClassTest();" />  
</body>