目前状况说明:从未接触过 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
         }
      }
   }
 }