初探 jQuery–实现一个 jQuery 的 API过程
目前状况说明:从未接触过 jQuery,不知道 jQuery是什么东西,按要求实现目标,对this的指向问题还存在疑惑。
目标:要实现一个类似 jQuery的API功能,要求如下:
var $div = $(‘div’)
$div.addClass(‘red’) // 可将所有 div 的 class 添加一个 red
$div.setText(‘hi’) // 可将所有 div 的 textContent 变为 hi
二、任务分解:
1:从题目要求看,$(‘div’)是一个函数;
2:$(‘div’)这个函数分别有两个属性(方法),其中一个属性是addClass,这个属性的值是一个函数(方法),功能是按用户要求为目标元素(div)添加class;另一个属性是setText,这个属性的值也是一个函数(方法),功能是按用户要求为目标元素(div)改变textContent 。根据这个分析,得出$(‘div’)函数的返回值符合是数组类型结构。
三、解题:
1、根据任务分解得出$(‘div’)的主体结构为
var $=function(tag){
return {
addClass: function(color){},//为目标元素(div)添加class
setText:function(txt){},//改变textContent
}
}
2、分别编写需要实现相应功能的函数
var $=function(tag){
return {
addClass: function(color){
var tags=document.querySelectorAll(tag)//获取目标元素
for(var i=0;i<tags.length;i++){//遍历数组,并为数组中每个元素添加class
tags[i].classList.add(color)
}
},
setText:function(txt){
var tags=document.querySelectorAll(tag)//获取目标元素
for(var i=0;i<tags.length;i++){//遍历数组,并为数组中每个元素添加要输入的内容
tags[i].textContent=txt
}
}
}
}
3、发现重复的代码var tags=document.querySelectorAll(tag),需要优化代码
var $=function(tag){
return {
var tags=document.querySelectorAll(tag)
addClass: function(color){
for(var i=0;i<tags.length;i++){//遍历数组,并为数组中每个元素添加class
tags[i].classList.add(color)
}
},
setText:function(txt){
for(var i=0;i<tags.length;i++){//遍历数组,并为数组中每个元素添加要输入的内容
tags[i].textContent=txt
}
}
}
}
温馨提示 : 非特殊注明,否则均为©李联华的博客网原创文章,本站文章未经授权禁止任何形式转载;IP地址:3.14.249.63,归属地:俄亥俄州Dublin ,欢迎您的访问!
文章链接:https://www.ooize.com/on-the-implementation-of-a-jquery-api-process.html
文章链接:https://www.ooize.com/on-the-implementation-of-a-jquery-api-process.html
订阅
登录
0 评论