1. 自己封装了两个函数。作用分别为：获取除自己外的兄弟姐妹的结点；给自己一次性添加若干个class名字
// html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<ul>
<li id="item1">item1</li>
<li id="item2">item2</li>
<li id="item3">item3</li>
<li id="item4">item4</li>
<li id="item5">item5</li>
</ul>
</body>
</html>
// js
function getSiblings(node){
var allChildren = node.parentNode.children
var array = {length:0}
for(let i=0;i<allChildren.length;i++){
if(allChildren[i] !== node)
{
array[array.length] = allChildren[i]
array.length +=1
}
}
return array
}
function addClass(node,classes){
for(let key in classes){
var value = classes[key]
var methodName = value? 'add' : 'remove'
node.classList[methodName](key)
}
}
addClass(item2,{'a':true,'b':true,'c':false})
这时候我们可以用getSiblings()、addClass()来调用我们写的这两个函数。但这样有个弊端，可能会覆盖原有的全局函数。因此我们还可以加一个命名空间
window.YeDom = {}
YeDom.getSiblings = getSiblings
YeDom.addClasses = addClass
console.log(YeDom.getSiblings(item2))
你的名字前面统一加一个前缀就是命名空间
命名空间的一个好处，避免覆盖全局变量，因此也可以这样声明函数
window.YeDom = {}
YeDom.getSiblings = function (node){
var allChildren = node.parentNode.children
var array = {length:0}
for(let i=0;i<allChildren.length;i++){
if(allChildren[i] !== node)
{
array[array.length] = allChildren[i]
array.length +=1
}
}
return array
}
YeDom.addClasses = function (node,classes){
for(let key in classes){
var value = classes[key]
var methodName = value? 'add' : 'remove'
node.classList[methodName](key)
}
}
console.log(YeDom.getSiblings(item2))
2.我们还可以继续改进，修改Node.prototype的原型，让我们更愉快地调用
Node.prototype.getSiblings = function(){
var allChildren = this.parentNode.children
var array = {length:0}
for(let i=0;i<allChildren.length;i++){
if(allChildren[i] !== this)
{
array[array.length] = allChildren[i]
array.length +=1
}
}
return array
}
Node.prototype.addClasses = function(classes){
for(let key in classes){
var value = classes[key]
var methodName = value? 'add' : 'remove'
this.classList[methodName](key)
}
}
console.log(item4.getSiblings())
console.log(item4.addClasses({'a':true,'b':true,'c':false}))
// 等价于
console.log(item4.getSiblings.call(item4))
console.log(item4.addClasses.call(item4,{'a':true,'b':true,'c':false}))
// call的第一个参数就是this
现在我们可以直接在Node结点后面加一个.来调用我们写的这两个函数。
3.这样改动后还是存在一个弊端：要是之前就有人在Node.prototype上写了东西怎么办？这时候我们再做改进，自己写一个Node结点，我们把它称为Node2
// JS
// 我们定义一个Node2的函数，这个函数返回一个对象，对象里面的两个属性就是我们自己写的两个函数
window.Node2 = function(node){
// 这里之所以用window.Node2是因为可以让Node2全局调用
return {
getSiblings: function(){
var allChildren = node.parentNode.children
var array = {length:0}
for(let i=0;i<allChildren.length;i++){
if(allChildren[i] !== node)
{
array[array.length] = allChildren[i]
array.length +=1
}
}
return array
},
addClasses: function(classes){
for(let key in classes){
var value = classes[key]
var methodName = value? 'add' : 'remove'
node.classList[methodName](key)
}
}
}
}
var node2 = Node2(item4)
console.log(node2.getSiblings())
console.log(node2.addClasses({'a':true,'b':true,'c':false}))
4. 实际上，JQuery就是这么干的。我们上面代码中的Node2改为JQuery就是一个简陋版的JQuery。当然JQuery的功能更强大，这个简陋版的JQuery只能传一个结点，我们再修改一下，让它可以传字符串。
var JQuery = function(nodeOrstring){
var node = nodeOrstring
if(typeof nodeOrstring === 'string'){
node = document.querySelector(nodeOrstring)
}
return {
getSiblings: function(){
var allChildren = node.parentNode.children
var array = {length:0}
for(let i=0;i<allChildren.length;i++){
if(allChildren[i] !== node)
{
array[array.length] = allChildren[i]
array.length +=1
}
}
return array
},
addClasses: function(classes){
for(let key in classes){
var value = classes[key]
var methodName = value? 'add' : 'remove'
node.classList[methodName](key)
}
}
}
}
var node2 = JQuery('#item1')
console.log(node2.getSiblings())
console.log(node2.addClasses({'a':true,'b':true,'c':false}))
5.JQuery实质上就是一个构造函数。接受参数，返回一个对象，然后再调用里面的方法。
在上面的代码，我们只能对单个结点操作。我们还可以对多个结点的组合进行操作。
比如把所有li的都加上class，和把所有li
的内容都变成hi
window.JQuery = function(nodeOrSelector){
let nodes = {}
if(typeof nodeOrSelector === 'string'){
let temp = document.querySelectorAll(nodeOrSelector)
for(let i=0;i<temp.length;i++){
nodes[i] = temp[i]
}
nodes.length = temp.length
}else if(nodeOrSelector instanceof Node) {
nodes = {
0: nodeOrSelector,
length:1
}
}
nodes.addClass = function(className){
for(let i=0;i<nodes.length;i++){
nodes[i].classList.add(className)
}
}
nodes.setText = function(text){
for(let i=0;i<nodes.length;i++){
nodes[i].innerText = text
}
}
return nodes
}
window.$ = JQuery // 为了更方便调用，我们把jQuery的名字简化为$
var node2 = $('div')
node2.addClass('red')
node2.setText('hi')
- 在typeof中，数组是对象；在instanceof中，可以判断数组和对象
var o = {};
var a = [];
o instanceof Array // false
a instanceof Array // true
typeof [] // "object"
typeof null // "object"
typeof Function // "function"
总结
jQuery实质上是一个构造函数，接受一个参数，这个参数可能是节点，然后返回一个方法对象去操作节点。
网友评论