今天要模仿jQuery來實(shí)現(xiàn)兩個(gè)API，他們的功能是：
- 為選中的標(biāo)簽添加某個(gè) class
- 將選中的標(biāo)簽的value替換為某個(gè)text
首先，順著這個(gè)思路，寫了以下代碼：
html+css如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
.red {
color: red;
}
</style>
</head>
<body>
<ul>
<li>標(biāo)簽1</li>
<li>標(biāo)簽2</li>
<li>標(biāo)簽3</li>
<li>標(biāo)簽4</li>
<li>標(biāo)簽5</li>
</ul>
</body>
</html>
一. 想到哪寫到哪
js代碼如下：
//給所有l(wèi)i添加類名red
let liTags = document.querySelectorAll('ul > li')
for(let i = 0;i<liTags.length;i++){
liTags[i].classList.add('red')
}
//把所有l(wèi)i的內(nèi)容替換為hello
for(let i = 0;i<liTags.length;i++){
liTags[i].textContent = 'hello'
}
二. 封裝為函數(shù)
上面的代碼復(fù)用性很低，所以我們把他封裝為函數(shù)，每次使用時(shí)調(diào)用就好
//給所有l(wèi)i添加類名red
function addClass(selector,classes){
let nodes = document.querySelectorAll(selector)
for(let key in classes){
let value = classes[key]
if(value){
for(let i = 0;i<nodes.length;i++){
nodes[i].classList.add(key)
}
}else {
for(let i = 0;i<nodes.length;i++){
nodes[i].classList.remove(key)
}
}
}
}
//把所有l(wèi)i的內(nèi)容替換為hello
function setText(selector,text){
let nodes = document.querySelectorAll(selector)
for(let i = 0;i<nodes.length;i++){
nodes[i].textContent = text
}
}
let classes = {'red':true,'green':true,'blue':false}
addClass.call(undefined,'ul>li',classes)
setText.call(undefined,'ul>li','hello')
三. 添加命名空間
當(dāng)我們自己添加的函數(shù)越來越多時(shí)，會(huì)不小心把很多全局變量都給覆蓋了，所以需要命名空間
window.myDom = {
setClass: function(selector,classes){
let nodes = document.querySelectorAll(selector)
for(let key in classes){
let value = classes[key]
if(value){
for(let i = 0;i<nodes.length;i++){
nodes[i].classList.add(key)
}
}else {
for(let i = 0;i<nodes.length;i++){
nodes[i].classList.remove(key)
}
}
}
},
setText: function(selector,text){
let nodes = document.querySelectorAll(selector)
for(let i = 0;i<nodes.length;i++){
nodes[i].textContent = text
}
}
}
myDom = window.myDom
let classes = {'red':true,'green':true,'blue':false}
myDom.setClass.call(undefined,'ul>li',classes)
myDom.setText.call(undefined,'ul>li','hello')
四. 修改NodeList.prototype
NodeList.prototype.setClass = function(classes){
for(let key in classes){
let value = classes[key]
if(value){
for(let i = 0;i<this.length;i++){
this[i].classList.add(key)
}
}else {
for(let i = 0;i<this.length;i++){
this[i].classList.remove(key)
}
}
}
}
NodeList.prototype.setText = function(text){
for(let i = 0;i<this.length;i++){
this[i].textContent = text
}
}
let classes = {'red':true,'green':true,'blue':false}
let liTags = document.querySelectorAll('ul>li')
liTags.setClass.call(liTags,classes)
liTags.setText.call(liTags,'hello')
五. 模仿jQuery
let jQuery = function(selector){
let nodes = {}
if(selector){
nodes = document.querySelectorAll(selector)
}
nodes.setClass = function(classes){
for(let key in classes){
let value = classes[key]
if(value){
for(let i = 0;i<nodes.length;i++){
nodes[i].classList.add(key)
}
}else {
for(let i = 0;i<nodes.length;i++){
nodes[i].classList.remove(key)
}
}
}
}
nodes.setText = function(text){
for(let i = 0;i<nodes.length;i++){
nodes[i].textContent = text
}
}
return nodes
}
window.jQuery = jQuery
window.$ = jQuery
let classes = {'red':true,'green':true,'blue':false}
let $liTags = $('ul>li')
$liTags.setClass.call($liTags,classes)
$liTags.setText.call($liTags,'hello')
