jQuery原理初探

封装一个函数

1. 获取 一个节点的所有兄弟节点

//封装前：
let node =document.getElementById('item3')
var allChildren = node.parentNode.children
var array = {length: 0}
for(let i = 0; i < allChildren.length; i++) {
  if(allChildren[i] !== node){
    array[array.length] = allChildren[i]
    array.length += 1
  }
}
//封装后：
function getSiblings(node) {
  var allChildren = node.parentNode.children
  var array = {length: 0}
  for(let i = 0; i < allChildren.length; i++) {
    if(allChildren[i] !== node){
      array[array.length] = allChildren[i]
      array.length += 1
    }
  }
  return array
}

2. 为一个节点添加多个className

function addClass(node, classes) {
  classes.forEach((value) => node.classList.add(value))
}

命名空间

window.mydom = {}
mydom.getSiblings = getSiblings
mydom.addClass = addClass

let node =document.getElementById('item3')
mydom.getSiblings(node)
mydom.addClass(node,  ['a', 'b', 'c'])

所以上面代码可以改为：

window.mydom = {}

mydom.getSiblings = function getSiblings(node) {
  var allChildren = item3.parentNode.children
  var array = {length: 0}
  for(let i = 0; i < allChildren.length; i++) {
    if(allChildren[i] !== node){
      array[array.length] = allChildren[i]
      array.length += 1
    }
  }
  return array
}

mydom.addClass = function addClass(node, classes) {
  classes.forEach((value) => node.classList.add(value))
}

let node =document.getElementById('item3')
mydom.getSiblings(node)
mydom.addClass(node, ['a', 'b', 'c'])

有没有方法把node放前面

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

Node.prototype.getSiblings = function(){
  var allChildren = this.parentNode.children
  var array = {
    length: 0
  }
  for (let i = 0;  i < allChildren.length; i++) {
    if (allChildren[i] !== this) {
      array[array.length] = allChildren[i]
      array.length += 1
    }
  }
  return array
}

Node.prototype.addClass = function (classes) {
  classes.forEach( (value) => this.classList.add(value) )
}

 let node =document.getElementById('item3')
node.getSiblings()
// node.getSiblings.call(node)
node.addClass(['a','b','c'])
// node.addClass.call(node, ['a','b','c'])

方法二：新的接口 BetterNode（无侵入）

function Node2(node){
     return {
         getSiblings: function(){
            var allChildren = this.parentNode.children
            var array = {
                  length: 0
               }
            for (let i = 0;  i < allChildren.length; i++) {
              if (allChildren[i] !== this) {
                array[array.length] = allChildren[i]
                array.length += 1
              }
            }
            return array
         },
         addClass: function(classes){
            classes.forEach( (value) => this.classList.add(value) )
         }
     }
 }
 let node =document.getElementById('item3')
 let node2 = Node2(node)
 node2.getSiblings()
 node2.addClass(['a', 'b', 'c'])

把 Node2 改个名字吧

function jQuery(nodeOrSelector){
let node
  if(typeof nodeOrSelector === 'string') {
    node = document.querySelector(nodeOrSelector)
  }else{
    node = nodeOrSelector
  }
     return {
         getSiblings: function(){
            var allChildren = this.parentNode.children
            var array = {
                  length: 0
               }
            for (let i = 0;  i < allChildren.length; i++) {
              if (allChildren[i] !== this) {
                array[array.length] = allChildren[i]
                array.length += 1
              }
            }
            return array
         },
         addClass: function(classes){
            classes.forEach( (value) => this.classList.add(value) )
         }
     }
 }
 let node =document.getElementById('item3')
 let node2 = jQuery(node)
//let node2 = jQuery('#item3')
//let node2 = jQuery('ul > li:nth-child(3)')
 node2.getSiblings()
 node2.addClass(['a', 'b', 'c'])

一次性操作多个节点

function jQuery(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) {
  classes.forEach((value) =>{
    for (let i = 0; i < nodes.length; i++) {
      nodes[i].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
 }
var node2 = jQuery('ul > li')
node2.addClass(['blue'])
node2.text('hi')

jQuery简化原理

window.jQuery = function(nodeOrSelector) {
  let nodes = {
    0: nodeOrSelector,
    length: 1
  }
  nodes.addClass = function(classes) {}
  nodes.text = function(text) {}
  return nodes
}

var node2 = jQuery('ul > li')
//{0: li, 1: li, 2: li, 3: li, 4: li, length: 5, addClass: function(), text: function()}

//以下命令本质上都只是取hash表的值
node2.addClass(['blue'])
node2.text()
node2[0].classList.add('blue')

给个缩写吧 alias

window.$ = jQuery

var node2 = $('ul > li')
//一般在由jQuery构造出来的对象前面加上$符号，表明它是由jQuery构造的
var $node2 = $('ul > li')