实现一个jQuery的API功能有:
- 给获取到的元素增加class
- 给获取到的元素设置文本
实现思路:
- 大视角:根据js执行的声明语句,判断出window.jQuery本质其实是一个函数,封装要实现上面功能的函数,这个函数需要接受参数,要返回一个对象,同时带有addClass属性和setText属性。下面是分步实现。
- 在window.jQuery函数中声明一个对象nodes,这个对象中有两个属性,这两个属性的value都是函数,分别实现上面的两个功能。
- 简单的做法:当调用函数jQuery的时候,根据传入的实参,直接提供一个解决办法,缺点:不实用,只能针对一种情况,遇到其他情况,需要重新改代码
- 实用的做法:当调用函数jQuery()的时候,在函数中判断传递的参数是字符串还是节点,然后对不同的数据类型做出不同的处理,如果传递的参数是字符串的话,则一定要加上
nodes.length = temp.length;
,为了之后可以遍历伪数组;如果传递的节点是字符串的话,则返回一个伪数组。 - 在对象nodes中用添加不同的属性(函数)实现不同的功能。
- nodes.addClass添加了一个判断传进来的参数是字符串还是数组,采取不同的处理方法。
- 调用jQuery函数会返回对象nodes,从而可以在函数外面调用函数里面的对象中的方法
课后习题:
补全下面的代码
window.jQuery = ???
window.$ = jQuery
var $div = $('div')
$div.addClass('red') // 可将所有 div 的 class 添加一个 red
$div.setText('hi') // 可将所有 div 的 textContent 变为 hi
实现代码:
window.jQuery = function(nodeOrSelector){
var nodes = {};
if(typeof nodeOrSelector === 'string'){
let temp = document.querySelectorAll(nodeOrSelector);
// console.log(temp);
for(let i=0;i<temp.length;i++){
nodes[i] = temp[i];
}
// console.log(nodes)
nodes.length = temp.length;
}else if(nodeOrSelector instanceof Node){
nodes={
0:nodeOrSelector,
length : 1
}
// console.log(nodes)
}
nodes.addClass = function(classes){
//判断传进来的参数是字符串还是数组
if(typeof classes === 'string'){
for(let i=0;i<nodes.length;i++){
nodes[i].classList.add(classes);
}
console.log("lalalal")
}else if(classes instanceof Array){
classes.forEach(value =>{
for(let i=0;i<nodes.length;i++){
nodes[i].classList.add(value);
}
})
}
}
nodes.setText = function(value){
for(let i=0;i<nodes.length;i++){
nodes[i].textContent = 'hi';
}
}
return nodes
}
window.$ = jQuery
var $div = $('div')
$div.addClass(['yellow','green','blue']) //可将所有 div 的 class 添加数组里面的元素
$div.addClass('red') // 可将所有 div 的 class 添加一个 red
$div.setText('hi') // 可将所有 div 的 textContent 变为 hi
注:
上面实现思路的文字有点多,一方面,对于我来说,梳理一下思路,方面之后回来复习一下,另一方面,也能够给别人做一个参考的例子,可以学习到不少的东西。有点自夸,O(∩_∩)O哈哈~!!!