@(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就完成了，其实很多看着高大上的三方库，都可以用最简单的方法来模仿实现。
当然，在真正的框架或者库的开发中，需要添加大量防御代码，以及大量的需求兼容，所以最终优秀的类库会变得使用会越来越方便，但源码也越来越难读。
不过我始终相信越是优秀的三方库，其核心原理必定简单明了，其核心结构必定清晰灵活。
