初探 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.233.242.67,欢迎您的访问!

温馨提示 : 非特殊注明,否则均为李联华的博客原创文章,本站文章未经授权禁止任何形式转载
文章链接:https://www.ooize.com/on-the-implementation-of-a-jquery-api-process.html

订阅文章

在下面输入您的电子邮件地址以订阅我们的文章

订阅
提醒
guest

0 评论
内联反馈
查看所有评论
Loading...