一、前言
jQuery 作为 JavaScript 函数库，是一种特定种类的API。它的功能强大而丰富，帮助解放了DOM API。即使在如今框架盛行的时代，仍然值得我们学习。
在正式学习使用 jQuery API 之前，让我们仿造其形式试着自己封装两个 API 。
二、实现目标
封装 addClass、setText 两个函数，实现
① 为元素批量添加类
② 设置元素中的文本内容
var $div = $('div')
$div.addClass('red') // 可将所有 div 的 class 添加一个 red
$div.setText('hi') // 可将所有 div 的 textContent 变为 hi
三、步骤
1. 封装三个好用的函数 getSiblings、addClass、setText。
// 匹配 节点node
function getSiblings(node) {
var allChildren = node.parentNode.children
var arr = { length: 0 }
for (let i in allChildren) {
if (allChildren[i] != node) {
arr[arr.length] = allChildren[i]
arr.length += 1
}
}
return arr
}
function addClass(node, thoseClass) {
// 参数 thoseClass 支持字符串和数组
if(typeof thoseClass === 'string') {
node.classList.add(thoseClass)
}else if(Array.isArray(thoseClass)) {
thoseClass.forEach( value => node.classList.add(value) )
}
}
function setText(node, content) {
node.textContent = content
}
console.log( getSiblings(node) )
addClass(node, ['red', 'big', 'center'])
setText(node, 'hi')
使用命名空间，如库YUI
xinDom = {
addClass: function(node, thoseClass) {
// 参数 thoseClass 支持字符串和数组
if(typeof thoseClass === 'string') {
node.classList.add(thoseClass)
}else if(Array.isArray(thoseClass)) {
thoseClass.forEach( value => node.classList.add(value) )
}
},
setText: function (node, content) {
node.textContent = content
}
}
xinDom.addClass(node, ['red', 'big', 'center'])
xinDom.setText(node, 'hi')
2. 节点node 放到前面调用
1）扩展Node接口。将函数添加到 节点原型（Node.prototype）中，则节点node可直接调用
Node.prototype.addClass = function(thoseClass) {
// 使用 this 得到 节点node
if(typeof thoseClass === 'string') {
this.classList.add(thoseClass)
}else if(Array.isArray(thoseClass)) {
thoseClass.forEach( value => this.classList.add(value) )
}
}
Node.prototype.setText = function(content) {
this.textContent = content
}
node.addClass.call(node, 'red') // 或 node.addClass('red')
node.setText.call(node, 'hi') // 或 node.setText('hi')
- 这种方式可能因重名导致互相覆盖，从而扰乱了已有的原型。因此使用第 2）种方法。
2）使用新的接口。创建一个构造函数 jQuery，返回封装了自有API的对象
- 不止接受节点
// 匹配 节点node 或 选择器
window.jQuery = function(nodeOrSelector) {
var nodes = {}
if(typeof nodeOrSelector === 'string') {
var tmp = document.querySelectorAll(nodeOrSelector)
nodes.length = tmp.length
for(var i=0; i<tmp.length; i++) {
nodes[i] = tmp[i]
}
}else if(nodeOrSelector instanceof Node) {
nodes = {
0: nodeOrSelector,
length: 1
}
}
return {
elements: nodes,
addClass: function(thoseClass) {
if(typeof thoseClass === 'string') {
for(var i=0; i<nodes.length; i++) {
nodes[i].classList.add(thoseClass)
}
}else if(Array.isArray(thoseClass)) {
for(var i=0; i<nodes.length; i++) {
thoseClass.forEach( value => nodes[i].classList.add(value) )
}
}
},
setText: function(content) {
for(var i=0; i<nodes.length; i++) {
nodes[i].textContent = content
}
}
}
}
jQuery('div').setText('hi')
- jQuery 这个函数中使用到了闭包。
3. 使用缩写，$ 指代 jQuery
window.$ = jQuery
var $div = $('div')
$div.addClass('red') // 可将所有 div 的 class 添加一个 red
$div.setText('hi')
- 通过上述仿造 jQuery 封装 API 的过程，可窥见 jQuery 的本质，是一个构造函数接收一个节点或符合某要求的字符串（如选择器），然后返回给我们一个含有丰富 API 的对象，通过调用 API 来操作相应的 DOM 对象。
【不成文的规定】jQuery 构造出的对象，其引用变量会以 $ 开头，与普通变量区分开。
四、jQuery 只是这样？
窥探了 jQuery 本质，它的强大并不仅限如此，jQuery 函数库的优点概括：
- 兼容性方面做得很棒。
- 不止提供了便捷的 DOM 操作，还有动画、Ajax等丰富的功能。
- jQuery 不仅使用了 prototype，还使用了 new（还未学到）。
