一、實現(xiàn)addClass

第一步：封裝

1. 封裝addClass函數(shù)

• 如果輸入的類是多個，通過DOMAPI中的數(shù)組的forEach方法或?qū)ο蟮膄or in方法來遍歷classes數(shù)組/對象，然后通過DOM API 的classList.add來添加類，最后封裝函數(shù)，由于需要輸入class和node，所以括號內(nèi)的參數(shù)為node和classes

window.jQuery = function(node){
  return{ 
addClass: function (classes) {
  let node//聲明變量不給值
  classes.forEach((value)=>(node.classList.add(value)))
}
  }
}

2. 優(yōu)化

function addClass(classes, node) {
  //let classes = {red:true,blue:false}
  for (key in classes) {
   var methodName = classes[key] ?  'add' : 'remove'  //methodName為輸出的true或false值
    node.classList[methodName](key)
   /* if (classes[key]) {
      node.classList.add(key)
    } else {
      node.classList.remove(key)
    }*/ //此處是未優(yōu)化版
  }

第二步：命名,將以上的方法放在這個對象中

window.jQuery = {}
jQuery.addClass = addClass
jQuery.addClass({red:true,blue:false},item2)

第三步：用nodes代替node，并實現(xiàn)同時操作多個node

1. 由于都在Node.prototype上修改會造成互相覆蓋，創(chuàng)造新的對象，用nodes代替node,輸入一個節(jié)點或選擇器，返回一個新的節(jié)點，代表了輸入的節(jié)點，比如輸入div這個節(jié)點，獲取的就是jQuery函數(shù)生成的對象，他的第一個值就是div

var nodes = jQuery("#item4")

2. 實現(xiàn)同時操作多個node，并判斷輸入的是選擇器還是節(jié)點，如果類型檢測是文本，即輸入的是選擇器，用document.querySelectorAll()方法獲得一個偽數(shù)組，如果輸入的是節(jié)點，為了實現(xiàn)輸出統(tǒng)一，創(chuàng)造一個對象形式同上。

window.jQuery = function(nodeOrSelector) {
  let nodes = {} //初始化
  if (typeof nodeOrSelector === 'string') {
    let temp = document.querySelectorAll(nodeOrSelector)
    //利用temp函數(shù)將偽數(shù)組轉(zhuǎn)化為純凈的偽數(shù)組，即原型直接指向Object.prototype
    for (i = 0; i < temp.length; i++) {
      nodes[i] = temp[i]
    }
    nodes.length = tmp.length
  } else if (nodeOrSelector instanceof Node) {
    nodes = {
      0: nodeOrSelector,
      length: 1
    }
  }
  nodes.addClass = function(classes) {
    classes.forEach((value) => {
      for (let i = 0; i < nodes.length; i++) {
        nodes[i].classList.add(value)
      }
    })
   
  }
   return nodes
}

二、實現(xiàn)setText

1. 封裝getText和setText方法

• 在getText方法中，初始化一個數(shù)組，遍歷nodes，獲取nodes[i].textContent后，就可以直接用push()方法，將內(nèi)容一個一個放入數(shù)組，并返回數(shù)組
• 在setText方法中，遍歷nodes，直接設(shè)置nodes[i].textContent為輸入?yún)?shù)text的值

nodes.getText = function() {
    var texts = []
    for (let i = 0; i < nodes.length; i++) {
      texts.push(nodes[i].textContent) //注意這里用的push方法
    }
    return texts
  }//
  nodes.setText = function(text) {
    for (let i = 0; i < nodes.length; i++) {
      nodes[i].textContent = text
    }
  }

2. 優(yōu)化

• 合并getText和setText，判斷是否輸入text參數(shù)，輸入了默認(rèn)是setText，未輸入默認(rèn)是setText

 nodes.text = function(text) {
    if (text === undefined) {
      var 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 = text
      }
    }
  }

三、用$代替jQuery

window.$ = jQuery
var $div = $('div')//通過jQuery構(gòu)造函數(shù)，返回對象$div

完整代碼如下：

window.jQuery = function(nodeOrSelector) {
  let nodes = {}
  if (typeof nodeOrSelector === 'string') {
    let temp = document.querySelectorAll(nodeOrSelector)
    for (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 (i = 0; i < nodes.length; i++) {
      nodes[i].classList.add(classes)
    }
  }
  nodes.setText = function(text) {
    if (text === undefined) {
      let texts = []
      for (i = 0; i < nodes.length; i++) {
        texts.push(nodes[i].textContent)
      }
      return texts
    } else {
      for (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 變?yōu)?hi