关于对jQuery学习的帮助可以看方方老师的文章
jQuery都过时了，那我还学它干嘛
接下来我们自己来实现一个简版的jQuery对jQuery进行理解
一、封装两个函数
function getSiblings(node) {
var allChildren = node.parentNode.children
var siblings = {
length: 0
}
for (let i = 0; i < allChildren.length; i++) {
if (allChildren[i] !== node) {
siblings[siblings.length] = allChildren[i]
siblings.length += 1
}
}
return siblings
} // 获得节点的兄弟元素
function addClass(node, classes) {
for (let key in classes) {
var value = calsses[key]
var methodName = value ? 'add' : 'remove'
node.classList[methodName](key)
// if(value) {
// node.classList.add(key)
// } else {
// node.classList.remove(key)
// }
}
}// 给某个节点添加class
二 、命名空间
命名空间是一种设计模式，将不同的函数封装在函数库中并给函数库命名。有两个主要好处
1.是知道库的名字方便调用
2.避免覆盖全局变量，发生标识符冲突
//命名空间封装为函数库 1.知道库的名字 2.避免覆盖全局变量
window.dddom = {}
dddom.getSiblings = getSiblings
dddom.addClass = addClass
dddom.getSiblings(item3)
window.dddom = {}
dddom.getSiblings = function (node) {
var allChildren = node.parentNode.children
var siblings = {
length: 0
}
for (let i = 0; i < allChildren.length; i++) {
if (allChildren[i] !== node) {
siblings[siblings.length] = allChildren[i]
siblings.length += 1
}
}
return siblings
}
三、能不能把node放在前面 Node+this
我们在调用函数时更喜欢这种方式node.getSiblings() node.addClass()而不是getSiblings(node) addClass(node, classes) 可以通过this实现，我们可以通过function.call()来查看具体实现过程，this为function.call()的第一个参数
1.方法一 ：扩展Node接口
直接在Node.prototype上加函数
/Node + this
Node.prototype.getSiblings = function () {
var allChildren = this.parentNode.children
var siblings = {
length: 0
}
for (let i = 0; i < allChildren.length; i++) {
if (allChildren[i] !== this) {
siblings[siblings.length] = allChildren[i]
siblings.length += 1
}
}
return siblings
}
item3.getSiblings()//隐式调用this
item3.getSiblings.call(item3) //显示指定this
Node.prototype.addClass = function (classes) {
for (let key in classes) {
var value = calsses[key]
var methodName = value ? 'add' : 'remove'
this.classList[methodName](key)
}
}
item3.addClass({ a: true, b: false, c: true })
item3.addClass.call(item3, { a: true, b: false, c: true } )
虽然在Node.prototype上添加函数可以方便我们使用但是有很大的弊端，一是不同的人用相同的标识符，函数会相互覆盖，二说会对原有的 Node.prototype造成污染
2.方法二：在全局环境下创建新的接口BetterNode
这种为无侵入
比如改写为Node2
window.Node2 = function(nodeOrSelector) {
let node //操纵一个节点
if(typeof nodeOrSelector === 'string') {
node = document.querySelector(nodeOrSelector)
}else {
node = nodeOrSelector
}
return {
getSiblings: function () {
return siblings
},
addClass: function(classes) {
}
}
}
var node2 =Node2('#item3') //存的地址 node2为Node2构造的一个实例
node2.getSiblings()
node2.addClass({ a: true, b: false, c: true })
四、把Node2该个名字jQuery
window.jQuery = function(nodeOrSelector) {
let node //操纵一个节点
if(typeof nodeOrSelector === 'string') {
node = document.querySelector(nodeOrSelector)
}else {
node = nodeOrSelector
}
return {
getSiblings: function () {
var allChildren = node.parentNode.children
var siblings = {
length: 0
}
for (let i = 0; i < allChildren.length; i++) {
if (allChildren[i] !== node) {
siblings[siblings.length] = allChildren[i]
siblings.length += 1
}
}
return siblings
},
addClass: function(classes) {
for (let key in classes) {
var value = calsses[key]
var methodName = value ? 'add' : 'remove';
node.classList[methodName](key)
}
}
}
}
- jQuery就是一个升级的DOM，它接受一个元素，返回你一个新的对象，这个新的对象有新的API,
- 它们内部是怎么实现的呢？还是去调旧的DOMAPI,来打造jQuery对象的API比DOM的更好用。只不过一句话就相当于十句话，一个循环。
- 返回一个jQuery对象
- jQuery就是一个返回对象的函数
- 在实现jquery的过程中会用到闭包
五 、给个缩写alias 实现操作多个nodes
window.$ = jQuery
/
var node2 = jQuery('ul > li')
var $node2 = $('ul > li')
用$来表示jQuery,我们通常在变量名前加$表示这是由jQuery创建的对象。
实现操作多个nodes
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类型否则报错undefined
}
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.text = function(text) {
if(text === undefined) {
texts = []
for(let i = 0; i < nodes.length; i++) {
texts.push(nodes[i].textContent)
}
return texts
}else {
for(let i = 0; i < nodes.length; i++) {
nodes[i].textContent = text
}
}
}// text() 不给参数为get 给参数为set
return nodes
}
// 实例
var node2 = jQuery('ul > li')
var $node2 = $('ul > li')
$node2.addClass(['blue'])
var text = $node2.text()
$node2.text('hi')
jQuery将节点封伪数组 加几个API return出去一个jQuery对象。比如只给第一项添加class可以这样实现
node2[0].classList.add('blue') //封伪数组 加几个api return出去
一些常用的jQuery对象API
$nodes.toggleClass('red') //开关 切换
$nodes.addClass
$nodes.addClass(function(index,currentClass){
return 'c-' + index //return classes[index]
})
jQuery支持链式操作一大特点
$nodes.removeClass().addClass()//链式操作
