手写简易 jQuery 考虑插件和扩展性

首先准备一个基本的 dom

<p>文字1</p>
<p>文字2</p>
<p>文字3</p>

大神手写简易 jQuery

//基本的操作
class jQuery {
    constructor(selector) {
        const result = document.querySelectorAll(selector)
        const length = result.length
        for (let i = 0; i < length; i++) {
            this[i] = result[i]
        }
        this.length = length
    }
    get(index) {
        return this[index]
    }
    each(fn) {
        for (let i = 0; i < this.length; i++) {
            const elem = this[i]
            fn(elem)
        }
    }
    on(type, fn) {
        return this.each(elem => {
            elem.addEventListener(type, fn, false)
        })
    }
}

可以这样来运行

const $p = new jQuery('p')
console.log($p.get(1))  //<p>​文字2​</p>​
$p.on('click', () => alert('clicked')) // clicked

下面来考虑下插件和扩展性，那就可以这样写完事

//插件
jQuery.prototype.dialog = function (info) {
    alert(info)
}
$p.dialog('info') // info
//扩展‘造轮子’
class myJQuery extends jQuery {
    constructor(selector) {
        super(selector)
    }
    //扩展自己方法
    addClass(className) {
    }
    style(data) {
    }
}