基于ES6的tinyJquery

• 作者：Bougie
• 创建于：2018-04-09
• 更新于：2023-03-09

• 前端
• ES6/7/8/9

jQuery 作为曾经 Web 前端的必备利器，随着 MVVM 框架的兴起，如今已稍显没落。但它操作 DOM 的便利性无出其右。我用 ES6 写了一个基于 class 简化版的 jQuery，包含基础 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' || Array.isArray(name)) {
      this.dom = name
    } else {
      this.dom = [name]
    }
  }
}

使用$函数构建 tinyJquery 对象

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

方法(后续会渐渐完善)

event 操作

// addEventListener
on(eventName, fn, bubble = false) {
    this.dom.forEach(i => {
        i.addEventListener(eventName, fn, !bubble)
    })
    return this
}
// removeEventListener
un(eventName, fn, bubble = false) {
    this.dom.forEach(i => {
        i.removeEventListener(eventName, fn, !bubble)
    })
    return this
}

class 操作

// addClass
ac(className) {
    this.dom.forEach(i => {
        i.classList.add(className)
    })
    return this
}
// removeClass
rc(className) {
    this.dom.forEach(i => {
        i.classList.remove(className)
    })
    return this
}
// toggleClass
tc(className) {
    this.dom.forEach(i => {
        i.classList.toggle(className)
    })
    return this
}
// containClass
cc(className) {
    let flag = false
    this.dom.forEach(i => {
        if(i.classList.contains(className)) flag = true
    })
    return flag
}

属性操作

// set inline style
css(obj) {
    this.dom.forEach(v => {
        Object.keys(obj).forEach(i => {
            v.style[i] = obj[i]
        })
    })
    return this
}
// get or set input value
val(val) {
    if(val) {
        this.dom[0].value = val
        return $(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 $(this.dom)
    } else {
        return this.dom[0].innerHTML
    }
}
// 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 this
    }
}

表单操作

// 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
}

2018-04-16 更新

Dom 获取

// parent
parent() {
    return $(this.dom[0].parentNode)
}
// siblings
siblings() {
    let dom = this.dom[0]
    var a = [];
    var p = dom.parentNode.children;
    for (var i = 0, pl = p.length; i < pl; i++) {
        if (p[i] !== dom) a.push(p[i]);
    }
    // console.log(Array.isArray(a))
    return $(a)
}

遍历

// each
each(callback) {
    // this.dom.forEach(i => {
    //     // callback.bind(i)()
    //     callback.call(i, null)
    // })
    this.dom.forEach(i => {
        callback($(i))
    })
}

< 用vue写一个仿简书的轮播图 Koa项目搭建过程 >