今天要模仿jQuery来实现两个API，他们的功能是：
- 为选中的标签添加某个 class
- 将选中的标签的value替换为某个text
首先，顺着这个思路，写了以下代码：
html+css如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
.red {
color: red;
}
</style>
</head>
<body>
<ul>
<li>标签1</li>
<li>标签2</li>
<li>标签3</li>
<li>标签4</li>
<li>标签5</li>
</ul>
</body>
</html>
一. 想到哪写到哪
js代码如下：
//给所有li添加类名red
let liTags = document.querySelectorAll('ul > li')
for(let i = 0;i<liTags.length;i++){
liTags[i].classList.add('red')
}
//把所有li的内容替换为hello
for(let i = 0;i<liTags.length;i++){
liTags[i].textContent = 'hello'
}
二. 封装为函数
上面的代码复用性很低，所以我们把他封装为函数，每次使用时调用就好
//给所有li添加类名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)
}
}
}
}
//把所有li的内容替换为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')
三. 添加命名空间
当我们自己添加的函数越来越多时，会不小心把很多全局变量都给覆盖了，所以需要命名空间
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')
网友评论