實現(xiàn)一個 jQuery 的 API

<ul>
  <li id="item1">選項1</li>
  <li id="item2">選項2</li>
  <li id="item3">選項3</li>
  <li id="item4">選項4</li>
  <li id="item5">選項5</li>
</ul>

window.jQuery = ???
window.$ = jQuery

var $div = $('div')
$div.addClass('red') // 可將所有 div 的 class 添加一個 red
$div.text('hi') // 可將所有 div 的 textContent 變?yōu)?hi

實現(xiàn)步驟

命名空間模式

window.jQuery = {}
jQuery.addClass = function(node, classes) {
    classes.forEach((value)=> node.classList.add(value))
}
jQuery.addClass(item3, ['a','b','c'])

這個模式的調(diào)用為jQuery.addClass(item3, ['a','b','c'])，這種模式雖然可以浑塞，但是還是item3.addClass(['a','b','c'])這種模式的調(diào)用形式給人的感覺爽，那么如何換成這種爽的調(diào)用模式呢跳纳？

直接改node的原型

Node.prototype.addClass = function(classes) {
    classes.forEach((value)=> this.classList.add(value))
}
item3.addClass(['a','b','c'])

這種方法的弊端是直接改node原型上的方法疟暖，容易導致覆蓋

自己做個構(gòu)造函數(shù)

思路：創(chuàng)建一個jQuery的構(gòu)造函數(shù)，接收一個node或selector,并把它封裝成一個偽數(shù)組蜜葱，然后在這個偽數(shù)組上增加幾個api全景，返回這個偽數(shù)組。

• 首先實現(xiàn)單node

window.jQuery = function(node){
  let singleNode = {}
  singleNode.addClass = function(classes){
    classes.forEach((value)=> node.classList.add(value))
  }
  singleNode.text = function(value){
    if(value === undefined){
      let text
      text = node.textContent
      return text
    }else{
      node.textContent = value
    }
  }
  return singleNode
}
window.$ = window.jQuery

$(item3).addClass(['red','b'])
console.log($(item3).text())
$(item3).text('sss')

• 拓展為可接收selector

window.jQuery = function(nodeOrSelector){
  let nodes = {}
  if(typeof nodeOrSelector === 'string'){
    let temp = document.querySelectorAll(nodeOrSelector)
    for(let i = 0; i < temp.length; i++){
      nodes[i] = temp[i]
    }
    nodes.length = temp.length
    
  } else if(nodeOrSelector instanceof Node){
    nodes = {
      0: nodeOrSelector,
      length: 1
    }
  }

  nodes.addClass = function(classes){
    for(let i = 0; i < nodes.length; i++){
      classes.forEach((value)=> nodes[i].classList.add(value))
    }
  }
  nodes.text = function(value){
    if(value === undefined){
      let texts = []
      for(let i = 0; i < nodes.length; i++){
        texts.push(nodes[i].textContent)
      }
      return texts
    }else{
      for(let i = 0; i < nodes.length; i++){
        nodes[i].textContent = value
      }
    }
  }
  return nodes
}
window.$ = window.jQuery

var node2 = $('ul > li')
console.log(node2) //{0: li#item1, 1: li#item2, 2: li#item3, 3: li#item4, 4: li#item5, length: 5, addClass: ?, text: ?}

$(item3).addClass(['red','b'])
console.log($('ul > li').text())
$(item3).text('sss')