基於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
    }
}