美文网首页
用class类手写简易jquery考虑插件和扩展性

用class类手写简易jquery考虑插件和扩展性

作者: Thesand | 来源:发表于2020-08-13 09:30 被阅读0次
    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
            this.selector = selector
        }
        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
    }
    
    // 插件
    jQuery.prototype.dialog = function (info) {
        alert(info)
    }
    
    // “造轮子”
    class myJQuery extends jQuery {
        constructor(selector) {
            super(selector)
        }
        // 扩展自己的方法
        addClass(className) {
    
        }
        style(data) {
            
        }
    }
    
    // const $p = new jQuery('p')
    // $p.get(1)
    // $p.each((elem) => console.log(elem.nodeName))
    // $p.on('click', () => alert('clicked'))
    
    
    

    相关文章

      网友评论

          本文标题:用class类手写简易jquery考虑插件和扩展性

          本文链接:https://www.haomeiwen.com/subject/nsxbdktx.html