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

实现步骤

• 封装一个函数

function addClass(classes){}//可将所有输入的标签的class添加一个类

• 再封装一个函数

function setText(text){}//可将所有输入标签的textContent变为text

实现这两个函数

• 第一个函数addClass()是输入一个类名，给选中的所有标签添加一个类，所以要用到classList.add()，具体实现如下

function addClass(node, classes) {
  var allTag = document.querySelectorAll(node)
  for (let i = 0; i < allTag.length; i++) {
    allTag[i].classList.add(classes)
  }
}

• 第二个函数setText()输入文本，修改选中标签中的文本，所以要用到textContent()，具体实现结果如下

function setText(node, text) {
  var allTag = document.querySelectorAll(node)
  for (let i = 0; i < allTag.length; i++) {
    allTag[i].textContent = text
  }
}

命名空间

在全局变量中创建一个对象，用来储存封装后的函数，这就是命名空间（名字前面统一加一个前缀）

window.jQuery = {}
jQuery.addClass = addClass
jQuery.setText = setText

jQuery.addClass('div', 'red')
jQuery.setText('div','hi')

整理之后

window.jQuery = {}
jQuery.addClass = function(node, classes) {
  var allTag = document.querySelectorAll(node)
  for (let i = 0; i < allTag.length; i++) {
    allTag[i].classList.add(classes)
  }
}
jQuery.setText = function(node, text) {
  var allTag = document.querySelectorAll(node)
  for (let i = 0; i < allTag.length; i++) {
    allTag[i].textContent = text
  }
}

jQuery.addClass('div', 'red')
jQuery.setText('div', 'hi')

将node放到前面

node.addClass(classes)
node.setText(text)

• 方法一：扩展 Node 接口，直接在 Node.prototype 上加函数

Node.prototype.addClass = function(){
   ...
}
Node.prototype.setText = function(){
   ...
}

• 方法二：新的接口 BetterNode

window.jQuery = function(node) {
  return {
    element: node,
    addClass: function(classes) {
      var allTag = document.querySelectorAll(node)
      for (let i = 0; i < allTag.length; i++) {
        allTag[i].classList.add(classes)
      }
    },
    setText: function(text) {
      var allTag = document.querySelectorAll(node)
      for (let i = 0; i < allTag.length; i++) {
        allTag[i].textContent = text
      }
    }
  }
}

let node2 = jQuery('div')
node2.addClass('red')
node2.setText('hi')

第二种叫做「无侵入」。

进一步完善

• 给个缩写并且使其可以是节点或者选择器

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++){
      nodes[i].classList.add(classes)
    }
  }
  nodes.setText = function(text){
    for(let i=0;i<nodes.length;i++){
      nodes[i].textContent = text
    }
  }

  return nodes
}
window.$ = jQuery

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