初探jquery 实现过程

2019-12-18  本文已影响0人  饥人谷_小霾
     window.jQuery =  function(xx){
        let  nodes = {}                            //新建一个伪数组 获得函数即将操作的对象

       //分析接收到的节点或选择器
      if (typeof xx === 'string') {     
        let temp
        temp = document.querySelectorAll(xx)
        for (let i = 0; i < temp.length; i++) {
          nodes[i] = temp[i]
        }
        nodes.length = temp.length
      } else if (xx instanceof Node) {
        nodes = {                               //以哈希形式返回
          0: xx,
          length: 1
        }
      }

      nodes.addClass = function (classes) {/*实现这个内部函数功能*/
        classes.forEach((value) => {
          for (let k = 0; k < nodes.length; k++) {
            nodes[k].classList.add(value)
          }
        })
      }

      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
          }
        }
      }

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

代码实现细节:

  1. 声明一个伪数组
  2. 判断传入的参数是节点还是字符串,若是字符串则用querySelectorAll()方法获取,若是节点则以哈希形式存储在声明的伪数组中
  3. 以闭包形式封装功能函数
上一篇下一篇

猜你喜欢

热点阅读