基于ES6的tinyJquery

原文地址：Bougie的博客

jQuery作为曾经Web前端的必备利器，随着MVVM框架的兴起，如今已稍显没落。但它操作DOM的便利性无出其右。我用ES6写了一个基于class简化版的jQuery，仅做个ES6学习记录。包含基础DOM操作，支持链式操作，仅供日常使用。当然，它不支持IE。

内容

构造器(constructor)

构造一个tinyJquery对象。功能：基于基本选择器构造，包括id、class、tagName；基于原生DOM构造，将原生DOM对象转化为tinyJquery对象。为支持批量操作，tinyJquery构造器应包含复数的DOM。

class tinyJquery {
    constructor(name) {
        if (typeof name == 'string') {
            // 选择器
            this.dom = document.querySelectorAll(name)
        } else if (name.constructor.name == 'NodeList'){
            // 链式
            this.dom = name
        } else {
            // 原生DOM转tinyJquery
            this.dom = [name]
        }
    }
}

使用$函数构建tinyJquery对象

function $(name) {
    return new tinyJquery(name)
}

方法(后续会渐渐完善)

event操作

class tinyJquery {
    constructor(name) {
        if (typeof name == 'string') {
            // 选择器
            this.dom = document.querySelectorAll(name)
        } else if (name.constructor.name == 'NodeList'){
            // 链式
            this.dom = name
        } else {
            // 原生DOM转tinyJquery
            this.dom = [name]
        }
    }
    // addEventListener
    on(eventName, fn, bubble = false) {
        this.dom.forEach(i => {
            i.addEventListener(eventName, fn, !bubble)
        })
        return new this.constructor(this.dom)
    }
    // removeEventListener
    un(eventName, fn, bubble = false) {
        this.dom.forEach(i => {
            i.removeEventListener(eventName, fn, !bubble)
        })
        return new this.constructor(this.dom)
    }
}

class操作

class tinyJquery {
    constructor(name) {
        if (typeof name == 'string') {
            // 选择器
            this.dom = document.querySelectorAll(name)
        } else if (name.constructor.name == 'NodeList'){
            // 链式
            this.dom = name
        } else {
            // 原生DOM转tinyJquery
            this.dom = [name]
        }
    }
    // addClass
    ac(className) {
        this.dom.forEach(i => {
            i.classList.add(className)
        })
        return new this.constructor(this.dom)
    }
    // removeClass
    rc(className) {
        this.dom.forEach(i => {
            i.classList.remove(className)
        })
        return new this.constructor(this.dom)
    }
    // toggleClass
    tc(className) {
        this.dom.forEach(i => {
            i.classList.toggle(className)
        })
        return new this.constructor(this.dom)
    }
    // containClass
    cc(className) {
        let flag = false
        this.dom.forEach(i => {
            if(i.classList.contains(className)) flag = true
        })
        return flag
    }
}

属性操作

class tinyJquery {
    constructor(name) {
        if (typeof name == 'string') {
            // 选择器
            this.dom = document.querySelectorAll(name)
        } else if (name.constructor.name == 'NodeList'){
            // 链式
            this.dom = name
        } else {
            // 原生DOM转tinyJquery
            this.dom = [name]
        }
    }
    // set inline style
    css(obj) {
        this.dom.forEach(v => {
            Object.keys(obj).forEach(i => {
                v.style[i] = obj[i]
            })
        })
        return new this.constructor(this.dom)
    }
    // get or set attribute
    attr(key, val) {
        if(key && !val) {
            return this.dom[0].getAttribute(key)
        } else {
            this.dom.forEach(i => {
                i.setAttribute(key, val)
            })
            return new this.constructor(this.dom)
        }
    }
}

内容操作

class tinyJquery {
    constructor(name) {
        if (typeof name == 'string') {
            // 选择器
            this.dom = document.querySelectorAll(name)
        } else if (name.constructor.name == 'NodeList'){
            // 链式
            this.dom = name
        } else {
            // 原生DOM转tinyJquery
            this.dom = [name]
        }
    }
    // get or set input value
    val(val) {
        if(val) {
            this.dom[0].value = val
            return new this.constructor(this.dom)
        } else {
            return this.dom[0].value
        }
    }
    // get or set dom innerHtml
    html(val) {
        if(val) {
            this.dom.forEach(i => {
                i.innerHTML = val
            })
            return new this.constructor(this.dom)
        } else {
            return this.dom[0].innerHTML
        }
    }
}

表单操作

class tinyJquery {
    constructor(name) {
        if (typeof name == 'string') {
            // 选择器
            this.dom = document.querySelectorAll(name)
        } else if (name.constructor.name == 'NodeList'){
            // 链式
            this.dom = name
        } else {
            // 原生DOM转tinyJquery
            this.dom = [name]
        }
    }
    // get JSONData
    serializeObject() {
        let dom = this.dom[0], obj = {}
        dom.querySelectorAll('input, textarea').forEach(i => {
            obj[i.getAttribute('name')] = i.value
        })
        return obj
    }
    // get FormData
    serializeForm() {
        let dom = this.dom[0], form = new FormData()
        dom.querySelectorAll('input, textarea').forEach(i => {
            form.append(i.getAttribute('name'), i.value)
        })
        return form
    }
}