Fork me on GitHub

我的jQuery

发表于 | 更新于: | 分类于
字数统计: 594 | 阅读时长 ≈ 2

序

这个可能是一篇长博客，打算模拟jQuery的写法已经很长时间了，也看过jQuery的源码，当时看的时候晦涩难懂，基础实在不好，近一年时间一直用框架开发，忽然看到了一条新闻：2018年7月25日，Mislav Marohnić发了一条推文，宣布GitHub.com前端已经前端已经彻底删除了jQuery。而且，还自问自答地解释（低调炫耀），删除jQuery之后也没用其他框架，而是全部依赖原生API。突然才发现，原来jQuery已经距离我也越来越遥远了，这个也算是一种缅怀吧；

模拟主要思路

模拟jquery首先看他的主要用法：

1
2
3
4
5
$("#btn1")  //获取元素
$("#btn1").click(function(){});  //绑定事件
$("#btn1").css()  //设置css样式
$("#btn1").text() //设置或返回所选元素的文本内容
$("#btn1").html() //设置或返回所选元素的内容（包括 HTML 标记）

主要思路

  • $是一个方法，参数是id，css，tagName都可以，返回值为dom元素；
  • jQuery内部隐式迭代，所以返回值是一个dom集合；
  • css，html，click都是方法，挂在到$方法的返回值；
    综上所述，所谓的$以及调用之后的样子应该是
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// 第一 $是一个函数
function $(){
    return doms  //dom集合
}
// 第二 实现所有方法在一个集合内部
var obj ={
    css:function(){},
    text:function(){},
}
//第三实现将$函数返回值继承obj，
//继承方法又很多，常用原型链继承的方法

function init(){}

init.prototype = obj;
function $(){
    return new init()  //dom集合
}
// 第四实现返回值内部为所有dom对象的操作
// 借助call和apply特殊的方法
function init(){
 [].push.apply(this, document.querySelectorAll(select))
}

实现主要逻辑代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

(function(w) {
    //为了以后能方便借用数组的各种方法，提前存到变量中，全局都是用这一个数组，节约空间

    function jQuery(select) {
        return new init(select)
    }

    //模拟jQuery中的Sizzle引擎，利用选择器获取元素
    function Sizzle(select) {
        return document.querySelectorAll(select);
    }

    function init(select) {
        [].push.apply(this, Sizzle(select));
        return this;
    }
    init.prototype = {
        css: function() {

        }
    }
    window.jQuery = window.$ = jQuery;
})(window)

写完之后基本就可以使用了，下次将方法逐个实现；