一境输、前言
jQuery 作為 JavaScript 函數(shù)庫，是一種特定種類的API宗侦。它的功能強大而豐富愚臀，幫助解放了DOM API。即使在如今框架盛行的時代矾利，仍然值得我們學習姑裂。
在正式學習使用 jQuery API 之前，讓我們仿造其形式試著自己封裝兩個 API 男旗。
二舶斧、實現(xiàn)目標
封裝 addClass、setText 兩個函數(shù)察皇，實現(xiàn)
① 為元素批量添加類
② 設置元素中的文本內(nèi)容
var $div = $('div')
$div.addClass('red') // 可將所有 div 的 class 添加一個 red
$div.setText('hi') // 可將所有 div 的 textContent 變?yōu)?hi
三茴厉、步驟
1. 封裝三個好用的函數(shù) getSiblings泽台、addClass、setText矾缓。
// 匹配 節(jié)點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) {
// 參數(shù) thoseClass 支持字符串和數(shù)組
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) {
// 參數(shù) thoseClass 支持字符串和數(shù)組
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. 節(jié)點node 放到前面調(diào)用
1）擴展Node接口。將函數(shù)添加到 節(jié)點原型（Node.prototype）中嗜闻，則節(jié)點node可直接調(diào)用
Node.prototype.addClass = function(thoseClass) {
// 使用 this 得到 節(jié)點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）使用新的接口样眠。創(chuàng)建一個構(gòu)造函數(shù) jQuery，返回封裝了自有API的對象
- 不止接受節(jié)點
// 匹配 節(jié)點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 這個函數(shù)中使用到了閉包翠肘。
3. 使用縮寫檐束，$ 指代 jQuery
window.$ = jQuery
var $div = $('div')
$div.addClass('red') // 可將所有 div 的 class 添加一個 red
$div.setText('hi')
- 通過上述仿造 jQuery 封裝 API 的過程，可窺見 jQuery 的本質(zhì)锯茄，是一個構(gòu)造函數(shù)接收一個節(jié)點或符合某要求的字符串（如選擇器）厢塘，然后返回給我們一個含有豐富 API 的對象常摧，通過調(diào)用 API 來操作相應的 DOM 對象吵取。
【不成文的規(guī)定】jQuery 構(gòu)造出的對象库说，其引用變量會以 $ 開頭僚纷，與普通變量區(qū)分開嫌术。
四菩咨、jQuery 只是這樣这橙？
窺探了 jQuery 本質(zhì)革为，它的強大并不僅限如此廊移，jQuery 函數(shù)庫的優(yōu)點概括：
- 兼容性方面做得很棒糕簿。
- 不止提供了便捷的 DOM 操作，還有動畫狡孔、Ajax等豐富的功能懂诗。
- jQuery 不僅使用了 prototype，還使用了 new（還未學到）苗膝。
