前言：之前面试过很多大公司，他们的面试官大多都问了我这样一个问题：你有好好研究过jQuery的源码吗？很遗憾，我没有研究过，现在接触到了一点jQuery的设计理念，自己去写一个类似于jQuery可以调用的方法，以便更好地理解jQuery~~
关键词：jQuery，封装，命名空间，this，call()~~......
正文：
首先，让我们写两个函数来实现两个效果
在HTML中有几个li,id分别为item1-5.这两个函数实现的两个效果分别是：
1、getSiblings：熟悉jQuery的朋友都应该知道jQuery有一个API是siblings，获取当前元素同级的，除了本身的其他元素。
2、addClass:给元素添加class。
function getSiblings(node){
var allChildren = node.parentNode.children
var array = {
length:0
}
for(let i = 0;i<allChildren;i++){
if(allChildren[i] !== item3){
array[array.length] = allChildren[i];
array.length += 1;
}
}
return array
}
function addClass(node,classes){
classes.forEach((value) => node.classList.add(value))
}
好，方法现在是写完了，可是这两个function之间也没什么关系呀，如果还有更多的这种方法，和别人介绍怎么介绍的过来。所以，接下来，我们的命名空间就要上场了~~强大的命名空间，超喜欢它。
命名空间
接着上面的来,在上面的基础上，我们添加如下代码：
window.ppdom = {}
ppdom.getSiblings = getSiblings
ppdom.addClass = addClass
ppdom.getSiblings(item3)
ppdom.addclass(['a','b','c'])
上述就是命名空间。但是有一点别扭的是：下面两种写法哪种更已让人接受呢？
ppdom.getSiblings(item3)
ppdom.addclass(['a','b','c'])
or
item3.getSiblings();
item3.addClass(['a','b','c']);
当然是第二种啦，如果你的同事和你一样都喜欢用ppdom,岂不会被覆盖吗？那有什么方法让它变成第二种形式呢？
下面是第一种方法----prototype:先来看下这个小例子，会return回1吗？肯定会哒。
Node.prototype.getSiblings = function(){
return 1
}
item3.getSiblings();
Node.prototype.getSiblings = function(){
var allChildren = this.parentNode.children
var array = {
length:0
}
for(let i = 0;i<allChildren;i++){
if(allChildren[i] !== item3){
array[array.length] = allChildren[i];
array.length += 1;
}
}
return array
}
Node.prototype.getSiblings = function(classes){
classes.forEach((value) => this.classList.add(value))
}
item3.getSiblings();
item3.addClass(['a','b','c']);
注意到我们函数里有什么改变了吗？
image.png
这里的this，指向的就是当前的节点item3.
分辨this，只要记住一句话就行，
this是call()的第一个参数。
上述两个其实用call的话均可写成：
item3.getSiblings();
item3.addClass(['a','b','c']);
|
|
^
item3.getSiblings.call(item3);
item3.addClass(item3,['a','b','c']);
再磨叽一遍，大家要记牢：
this是call()的第一个参数。
这时候有人提出疑问了，那改成prototype也是非常容易被覆盖的，那怎么办呢？
方法二：
window.Node2 = function(node){
return {
getSiblings:function(){
var allChildren = node.parentNode.children
var array = {
length:0
}
for(let i = 0;i<allChildren;i++){
if(allChildren[i] !== item3){
array[array.length] = allChildren[i];
array.length += 1;
}
}
return array
},
addClass:function(){
classes.forEach((value) => node.classList.add(value))
}
}
}
var node2 = Node2(item3);
node2.getSiblings();
node2.addClass(['a','b','c']);
现在，就是见证奇迹的时刻，让我们把window.Node2里面的Node2改一个名字吧，名字如下：
window.jquery = function(node){
return {
getSiblings:function(){
var allChildren = node.parentNode.children
var array = {
length:0
}
for(let i = 0;i<allChildren;i++){
if(allChildren[i] !== item3){
array[array.length] = allChildren[i];
array.length += 1;
}
}
return array
},
addClass:function(){
classes.forEach((value) => node.classList.add(value))
}
}
}
var node2 = jquery (item3);
node2.getSiblings();
node2.addClass(['a','b','c']);
当当当~~完成！
网友评论