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

最新推荐文章于 2023-05-20 21:02:09 发布

iiiiiill

最新推荐文章于 2023-05-20 21:02:09 发布

阅读量320

点赞数

分类专栏：前端面试文章标签： javascript

本文链接：https://blog.youkuaiyun.com/weixin_44738381/article/details/108517549

版权

前端面试专栏收录该内容

13 篇文章

订阅专栏

本文探讨了如何手写一个简易的jQuery，重点关注如何在设计中考虑到插件机制和可扩展性。通过在jQuery原型中添加方法来实现功能，并利用JavaScript的class和继承特性来增强其扩展能力。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

jQuery

write Less，Do More

手写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;
        this.selector = selector;
        //类似于数组，实际上是对象
    }
    // 根据index得到绑定的对象
    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
const _p = new jQuery('p');
// console.log($p);
console.log(_p.get(2));; // 得到 <p>一段文字3</p>
_p.each(elem => console.log(elem.nodeName)) // 3个p
_p.on('click', () => { alert(clicked) })//弹出 clicked

考虑插件和可扩展性

在jQuery中的原型中添加方法
可扩展性即“造轮子”

插件

由于class就是prototype的语法糖，所以就是可以在class类中增加方法

// 插件
jQuery.prototype.dialog = function (info) {
alert(info)
}

可扩展性

通过继承实现扩展

// "造轮子"
class myJquery extends jQuery {
    constructor(selector) {
        super(selector)
    }
    // 扩展自己的方法
    addClass() { }
    style() { }
}