初探 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
         }
      }
   }
 }

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

二维码