实现jquery 的 removeClass 方法

第一种 纯数组操作


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>removeclasstitle>
head>
<body>
    <div class="demo test hi">div>
    <button onclick="removeClass()">Gobutton>

    <script>
        let demo = document.querySelectorAll(".demo")

        function removeClass() {
            let start = new Date().getTime()
            // 删除test的class名
            let classArr = []
            for(let i = 0, l = demo.length; i < l; i++) {
                demo[i].className.split(' ').map(function(val) {
                    if(val !== 'test') {
                        classArr.push(val)
                    }
                })
                demo[i].className = classArr.join(' ')
                classArr = []
            }
            let end = new Date().getTime()
            console.log(end - start)
        }
    script>
body>
html>

这里的思路是获取dom的className,然后转化为array操作再将结果转化为str赋值给className

第二种 正则匹配

function removeClass() {
    let start = new Date().getTime()
    // 删除test的class名
    let classArr = []
    for(let i = 0, l = demo.length; i < l; i++) {
        demo[i].className.replace('test', '').split(/\s+/g).map(function(val) {
            if(val !== 'test') {
                classArr.push(val)
            }
        })
        demo[i].className = classArr.join(' ')
        classArr = []
    }
    let end = new Date().getTime()
    console.log(end - start)
}

这里的思路与上面差不多,不过是用正则去判断要除去的className

效率

即使在操作的dom长度增加到300,两者的耗时也几乎不差。所以两者效率是一样的

你可能感兴趣的:(前端)