实现一个 jQuery 的 API

实现一个 jQuery 的 API

  
选项1
  
选项2
  
选项3
  
选项4
  
选项5

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

var $div = $('div')
$div.addClass('red') // 可将所有 div 的 class 添加一个 red
$div.text('hi') // 可将所有 div 的 textContent 变为 hi

实现步骤

命名空间模式

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

这个模式的调用为jQuery.addClass(item3, ['a','b','c'])，这种模式虽然可以，但是还是item3.addClass(['a','b','c'])这种模式的调用形式给人的感觉爽，那么如何换成这种爽的调用模式呢？

直接改node的原型

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

这种方法的弊端是直接改node原型上的方法，容易导致覆盖

自己做个构造函数

思路：创建一个jQuery的构造函数，接收一个node或selector,并把它封装成一个伪数组，然后在这个伪数组上增加几个api，返回这个伪数组。

• 首先实现单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')