JS 之 封装

在我们日常操作 DOM 的时候，免不了要使用很多的操作元素的函数，这些东西不但名字特别长，而且特别容易记混。再者，有很多内置的函数在低版本浏览器不能使用，如 addEventListener 在 ie7 和 ie8 就会出错，我们这时把它和 attachEvent 封装起来，就可以实现兼容处理了。

废话不多说，我总结了这么些封装的函数

`

*** debug 的时候特别好用，而且少打了 console 几个字母，效率高很多。***
var log = function() {
    console.log.apply(console, arguments)
}

var e = function(selector) {
    return document.querySelector(selector)
}

var appendHtml = function(element, html) {
    element.insertAdjacentHTML('beforeend', html)
}

var bindEvent = function(element, eventName, callback) {
    element.addEventListener(eventName, callback)
}

var toggleClass = function(element, className) {
    if (element.classList.contains(className)) {
        element.classList.remove(className)
    } else {
        element.classList.add(className)
    }
}

var bindAll = function(selector, eventName, callback) {
    var elements = document.querySelectorAll(selector)
    for (var i = 0; i < elements.length; i++) {
        var e = elements[i]
        bindEvent(e, eventName, callback)
    }
}

// find 函数可以查找所有 element 的所有子元素
var find = function(element, selector) {
    return element.querySelector(selector)
}
复制代码

`

这些搬砖的代码可以丢在一个专门我们搬砖的 js 文件中，这样，以后就可以更有效率的搬砖了，这多好。完美的不行。

下面是处理一些兼容的封装函数。

`

/**
 * 兼容性封装添加监听事件
 * @param {元素对象} obj
 * @param {事件类型} type
 * @param {执行的函数体} fn
 */
function addEvent(obj,type,fn){
    if(obj.addEventListener){
        obj.addEventListener(type,fn,bool);
    }else{
        obj.attachEvent('on'+type,fn);
    }
}    

/**
 * 兼容性封装获取第一个子元素
 * @param {元素对象} obj
 */
function getFirstElementChild(obj){
    if(obj.firstElementChild){
	    return obj.firstElementChild;
    }else{
        var nodeEle = obj.firstChild;
        //判断节点是否有值 && 判断节点的类型是不是不等于1(元素)
        while(nodeEle && nodeEle.nodeType != 1){
            //找下一个兄弟节点,赋值给自己,再去做循环比较
	    nodeEle = nodeEle.nextSibling
        }
	//直到找到元素,跳出循环,返回出函数
	return nodeEle;
    }
}
复制代码

` 下一篇打算说说事件的一些机制。 (完)

转载于:https://juejin.im/post/5bc9c2ea5188255c42585fff