简易的jQuery

@(Inbox)

本文会用最简单的形式来模仿jQuery源码。

jQuery看着是什么样子的?

$("li").addClass("redColor");

$(美元符号)是jQuery标志性符号，最开头为选择器

可以分析出jQuery的基本公式为 $('').xxx，也就是名称(选择器选中的元素) + 动作。

如何模仿？

$('')显然是一个主语，代表着是谁，从这里便可以推断出这是一个选择器。

首先制作出美元符号：

window.jQuery = function (){
    //TODO 里面还有很多代码需要写
}

window.$ = jQuery

原理很简单，就是创建一个全局对象$而已

接下来便是选择器，而jQuery的选择器有几个特性

• 返回的是一个伪数组
• 参数可以传字符串也可以传标签元素

window.jQuery = function (nodeOrSelector){
    //选择元素 变成伪数组
    let nodes = {}
    if(typeof nodeOrSelector === 'string'){
        let tempNodes = document.querySelectorAll(nodeOrSelector)
        for(let i = 0;i < tempNodes.length;i++){
            nodes[i] = tempNodes[i]
        }
        nodes.length = tempNodes.length
    }else if(nodeOrSelector instanceof Node ){
        nodes[0] = nodeOrSelector
        nodes.length = 1
    }
    
    //返回伪数组
    return nodes
}

window.$ = jQuery

最后添加一些和jQuery一样的和你自己想扩展的方法，便OK了。

window.jQuery = function (nodeOrSelector){
    //选择元素 变成伪数组
    let nodes = {}
    ......//省略选择器代码
    //增加类名
    nodes.addClass = function(classes){
      for(let i = 0;i < this.length;i++){
        this[i].classList.add(classes)
      }
    }
    //为内容赋值
    nodes.setText = function(content){
      for(let i = 0;i < this.length;i++){
        this[i].textContent = content
      }
    }
    //返回伪数组
    return nodes
}

window.$ = jQuery

//使用
$("li").addClass("redColor")

总结

自此简易的jQuery就完成了，其实很多看着高大上的三方库，都可以用最简单的方法来模仿实现。

当然，在真正的框架或者库的开发中，需要添加大量防御代码，以及大量的需求兼容，所以最终优秀的类库会变得使用会越来越方便，但源码也越来越难读。
不过我始终相信越是优秀的三方库，其核心原理必定简单明了，其核心结构必定清晰灵活。