手写一个简易jQuery，要考虑插件和扩展性

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

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

</body>

</html>

基础jQuery

// 手写简易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)
            })
        }
    }

插件

//  插件现在jQery的原型里
    jQuery.prototype.popName = function (name) {
        alert(name);
    }

方法重写

//  方法重写
    //先继承原方法
    class myjQuery extends jQuery {
        constructor(selector) {
            super(selector);
        }
        //扩展自己的方法
        addFunction() {
            //balabla
        }
    }

测试代码

//获取元素
const $p = new jQuery('p');
console.log($p);
//遍历
$p.each(elem => {
    console.log(elem.innerText);
});
//事件监听
$p.on('click', function (e) {
    alert(this.innerText);
})
//使用插件
$p.popName('lizheng');

获取元素并遍历

监听事件

利用插件的函数