js 简单的公用封装函数调用 （优化代码）

在写网页的时候会，页面会有多个标签获取，这时我们为了节省代码优化数据，就会做一个公用的封装函数来放在公用的文件里面调用。

1.获取多个标签

调用方法

  let liLs = getElAll(".chTab>.chTab_list>.chTab_single")

// 封装一个专门获取标签多个的方法
function getElAll(tagName) {
    return document.querySelectorAll(tagName)
}

2.获取单个标签

调用方法

let liTs = getEl(".chTab>.chTab_title>ul>li")

// 封装一个专门获取标签单个的方法
function getEl(tagName) {
    return document.querySelector(tagName)
}

3 .在写交互效果的时候我们也会用到多个相同的事件也可以写一个如 选项卡，点击事件，移入移出事件

allTitle, allList 获取到的标签

 titleClassName, listClassName  需要添加的类名

num = 0 默认为0 执行第一个点击事件

调用 方法checkTab(spans, chSingles, "active", "show",2)

// 封装一个大家都可以使用的选项卡函数
function checkTab(allTitle, allList, titleClassName, listClassName, num = 0) {
    if (num == 0) {
        for (let a = 0; a < allTitle.length; a++) {
              //点击事件
            allTitle[a].onclick = function () {
                for (let b = 0; b < allTitle.length; b++) {
                    //清除类名
                    allTitle[b].classList.remove(titleClassName)
                    allList[b].classList.remove(listClassName)
                }
                 //添加类名
                this.classList.add(titleClassName)
                allList[a].classList.add(listClassName)
            }

        }
    } else {
        for (let a = 0; a < allTitle.length; a++) {
                //移入事件
            allTitle[a].onmouseover = function () {
                for (let b = 0; b < allTitle.length; b++) {
                    allTitle[b].classList.remove(titleClassName)
                    allList[b].classList.remove(listClassName)
                }
                this.classList.add(titleClassName)
                allList[a].classList.add(listClassName)
            }

        }
    }

}