2018-08-22

实现JQuery之API

1.需求分析
window.jQuery = ???
window.div = div.addClass('red') // 可将所有 div 的 class 添加一个 red
$div.setText('hi') // 可将所有 div 的 textContent 变为 hi
2.思路分析
思路：

参数判断函数，找到节点，判断参数形式

addClass函数编写，实现查找节点并添加样式

setText 函数编写，实现查找节点并设置内容

将以上函数封装

3.具体方法
3.1 findNodesOrSelector 函数，寻找节点
如果typeof nodeOrSelector是string,那么 作为选择器,我们就用document.querySelectorAll来获取所有的元素,返回一个伪数组,然后遍历这个数组把每个value放到nodes里.

如果nodeOrSelector instanceof 是node 那么将nodeOrSelector放到nodes里作为nodes[0]

function findNodesOrSelector(nodeOrSelector){
let nodes ={}
//判断传进来的参数是否为 节点还是字符串
if(typeof nodeOrSelector ==='string' ){ //当传入得到参数为字符串
let temp = document.querySelectorAll(nodeOrSelector) //伪数组
for(let i=0;i nodes[i] = temp[i]
}
nodes.length = temp.length
} else if(nodeOrSelector instanceof Node){ //当传入得到参数为节点时
nodes = {
0:nodeOrSelector,
length:1
}
}
return nodes
}
3.2 addClass 函数编写，实现查找节点并添加样式
因为给找到的节点添加样式，所以要传入一个参数；

同时，对已经找到的节点一般情况下不是只有一个，那么我们添加样式的时候也是不止给一个节点添加样式，因此，需要对每个节点分别添加，就要依次对节点进行遍历。

function addClass(classes){
classes.forEach((value)=>{ //使用箭头函数，第一个参数是this即classes
for(let i=0;i nodes[i].addClassList.add(value)
}
})
}
3.3 setText 函数编写，实现查找节点并设置内容
和上面的方法一样，先找到需要改变的节点，对它依次遍历后再设置其内容

同时，传入一个参数，即需要改变之后的参数

function setText(text){
for(let i=0;i nodes[i].textContext = text
}
}
4.封装
window.jQuery = function(nodeOrSelector){
let nodes={}
//判断传进来的参数是否为 节点还是字符串
if(typeof nodeOrSelector ==='string' ){
let temp = document.querySelectorAll(nodeOrSelector) //伪数组
for(let i=0;i nodes[i] = temp[i]
}
nodes.length = temp.length
} else if(nodeOrSelector instanceof Node){ //当传入得到参数为节点
nodes = {
0:nodeOrSelector,
length:1
}
}
​
nodes.addClass = function (classes){
classes.forEach((value)=>{
for(let i=0;i < nodes.length;i++){
nodes[i].classList.add(value)
}
})
}
​
nodes.setText = function(text){
for(let i =0;i nodes[i].textContent = text
}
}
​
return nodes
}