【JS面试题】手写简易JQuery考虑插件和扩展性

class的原型本质：

1. 原型和原型链的图示
2. 属性和方法的执行规则

核心代码演示：

class jQuery {
    constructor(selector) {
        //查询dom元素
        const result = document.querySelectorAll(selector)
        const length = result.length
        for(let i = 0;i<length;i++) {
            this[i] = result[i]
        }
        this.length = length
        this.selector = selector
    }
    //返回第几个dom元素
    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)
        })
    }
    //扩展很多DOM--API
}

// const $p = new jQuery('p')
// $p.get(1)
// $p.each((elem) => console.log(elem.nodeName))
// $p.on('click', () => alert('clicked')

插件：


扩展性：