jQuery是一套跨浏览器的JavaScript库，简化HTML与JavaScript之间的操作。由约翰·雷西格（John Resig）在2006年1月的BarCamp NYC上发布第一个版本。目前是由Dave Methvin领导的开发团队进行开发。全球前10,000个访问最高的网站中，有65%使用了jQuery，是目前最受欢迎的JavaScript库 --维基百科
今天我们来用原生的JS的API模拟一个简单的jQuery的API的创建过程，从中体会出jQuery的实质。
我们要构造的API
window.$ = jQuery
var $div = $('div')
$div.addClass('red') // 可将所有 div 的 class 添加一个 red
$div.setText('hi') // 可将所有 div 的 textContent 变为 hi
分析一下需求
- 我们需要给一个字符串作为参数时，能够通过这个字符串选定元素。附加一个条件，当不是字符串时，查看参数是不是节点，且是不是在我们的页面中，如果是节点且在页面中就选定他。
- 给某个选定的元素添加class，具体是什么class根据参数的值确定。
- 给选定的元素重置内部文字，具体文字内容根据参数确定。
完成需求1
HTML的书写如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>text</title>
</head>
<body>
<div id="div">div1</div>
<div id="div">div2</div>
<div id="div">div3</div>
<div id="div">div4</div>
<div id="div">div5</div>
</body>
</html>
JS
window.jQuery = function(){} //全局对象构造函数
window.$ = jQuery
var $div = $('div')
$div.addClass('red') // 可将所有 div 的 class 添加一个 red
$div.setText('hi') // 可将所有 div 的 textContent 变为 hi
这样$就可以代表jQuery.
var $div = $('div')就表示声明一个$div的变量，并将jQuery的函数调用起来，传进去一个参数'div'字符串。现在我们只需要写出一个函数能够通过字符串找到相应的元素。
window.jQuery = function (nodeOrSelector){
let node2 = {}
if(typeof nodeOrSelector === 'string'){
let temp = document.querySelectorAll(nodeOrSelector)
for(let i=0;i<temp.length;i++){node2[i] = temp[i]}
node2.length = temp.length
}else if (nodeOrSelector instanceof Node){
node2 = {'0':nodeOrSelector, 'length':1}
}
return node2
}
因为我们必定会有一个参数，所以构造函数时就设置为nodeOrSelector（节点或者选择器），当参数类型是字符串时，声明一个临时的变量temp储存通过document.querySelectorAll(nodeOrSelector)选择的一个伪数组。遍历这个伪数组，将所有的值传给声明的空对象node2。
当然我们传的参数也可能不是字符串，那么我们默认为是节点处理，nodeOrSelector instanceof Node然后与上文一致，也生成一个伪数组。最后返回node2。
这样我们就完成了，通过传一个字符串或者节点的方式，用jQuery来找到元素，并生成了伪数组。
需求2：addClass（）
现在我们要在被选择的那几个元素上添加class
window.jQuery = function (nodeOrSelector){
let node2 = {}
if(typeof nodeOrSelector === 'string'){
let temp = document.querySelectorAll(nodeOrSelector)
for(let i=0;i<temp.length;i++){node2[i] = temp[i]}
node2.length = temp.length
}else if (nodeOrSelector instanceof Node){
node2 = {'0':nodeOrSelector, 'length':1}
}
/***/
node2.addClass = function(classes){
for(i=0;i<node2.length;i++){
node2[i].classList.add(classes)
}
}
/***/
return node2
}
生成一个函数，然后遍历我们得到的伪数组，逐个加上classes这个参数。将这个函数变成node2的属性，添加进对象中。
需求3：setText()
用参数置换掉元素原有的文字
window.jQuery = function (nodeOrSelector){
let node2 = {}
if(typeof nodeOrSelector === 'string'){
let temp = document.querySelectorAll(nodeOrSelector)
for(let i=0;i<temp.length;i++){node2[i] = temp[i]}
node2.length = temp.length
}else if (nodeOrSelector instanceof Node){
node2 = {'0':nodeOrSelector, 'length':1}
}
node2.addClass = function(classes){
for(i=0;i<node2.length;i++){
node2[i].classList.add(classes)
}
}
/***/
node2.setText = function(text){
for(i=0;i<node2.length;i++){
node2[i].textContent = text
}
}
/***/
return node2
}
老套路，生成一个函数，然后遍历我们得到的伪数组，逐个置换掉文字，然后将函数赋值给setText这个属性，添加进node2中。最后展示如图：
总结
jQuery实际上是一个构造函数，接受一个参数，这个参数可以是是节点或者选择器，然后返回一个方法去操作被选择的节点。
网友评论