实现一个 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 变为 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

}

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

jQuery(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

}

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

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

jQuery(item3).text('sss')

本文由职坐标整理并发布，了解更多内容，请关注职坐标WEB前端jQuery频道！