jQuery初探

自己封裝兩個函式

 // 有三個div
  <div id="item1"></div>
  <div id="item2"></div>
  <div id="item3"></div>
複製程式碼

.red{
  background: red;
}
div{
  width:100px;
  height:100px;
  border: 1px solid green;
}
複製程式碼

第一個函式,查詢一個節點的兄弟姐妹

首先,先實現以下怎麼獲取一個節點的兄弟姐妹,並將其全部放到一個偽陣列中:

var allChildren = item2.parentNode.children // 先找到item2的爸爸,然後在找到他所有的兒子
var array = {length: 0} // 初始化一個偽陣列
for(let i=0;i<allChildren.length;i++){ // 遍歷獲取到的所有兒子
    if(allChildren[i] !== item2){ 
        array[array.length] = allChildren[i] // push到陣列的一種方法,因為偽陣列沒有push方法
        array.length += 1
    }
}
console.log(array) // {0: div#item1, 1: div#item2, 2: script, length: 3}
複製程式碼

封裝上面的程式碼:

// 封裝一個函式,接受一個引數
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
}
複製程式碼

給一個節點新增一個或者多個class

function addClass(node, classes){ // 接受兩個引數,一個是需要新增class的節點,另一個是class名組成的陣列
	for(let key in classes){
    var value = classes[key]
    if(value){
      node.classList.add(key)
    }else{
      node.classList.remove(key)
    }
  }
}
addClass(item3,{'a':true, 'b':false, 'c':true}) // 如果是true就新增,false就不新增
複製程式碼

上面的程式碼可見,node.classList出現了兩次, 如果出現類似的程式碼,就存在程式碼優化的可能

function addClass(node, classes){
  for(let key in classes){
    var value = classes[key]
    var methodName = value ? 'add' : 'remove'
    node.classList[methodName](key)
  }
}
addClass(item3,{'a':true, 'b':false, 'c':true})
複製程式碼

上面的兩個函式,都是在操作節點,那麼可以將兩個函式,使用名稱空間設計模式進行整合,使其存在關聯性(例如document.getElementById,document.querySelector)

window.xxx = {}
xxx.getSiblings = getSiblings
xxx.addClass = addClass

// 使用
xxx.getSiblings(item3)
xxx.addClass(item3, {'a':true, 'b':false, 'c':true})
複製程式碼

將兩個函式(addClass, setText)封裝成一個jquery函式

window.jQuery = function(nodeOrSelector){ // 接受一個引數,可以是node,也可以是一個selector
  let nodes = {} // 宣告一個物件nodes
  if(typeof nodeOrSelector === 'string'){ // 如果是一個selector 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){ // 如果是一個node
    nodes = {0: nodeOrSelector, length: 1}
  }
    
  nodes.addClass = function(classes){
      for(let i=0;i<nodes.length;i++){
        nodes[i].classList.add(value)
      }
  }
    
  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.setText('hi')
複製程式碼

面試題

var div = document.getElementById('x')
var $div = $('#x')
請說出div和$div的聯絡和區別?
複製程式碼

答

1.div 返回了一個HTML DOM 物件,$div 返回了一個jquery 物件.
2.$div是包裝了dom物件後產生的,無法使用dom物件的任何方法,比如innerHTML
3.如果是jquery 物件,前面加$, 如果是html dom物件,就是普通的命名.
4.div變成$div, 只需要用jquery建構函式將dom物件包裝起來就可以了.
5.$div變成div
- jquery物件是一個hash,分別包含了一個key對應所包裝的dom 物件, length,還有__proto__原型 object(0), 裡面包含了jquery的一個方法和屬性.比如addClass,after,ajax等, 所以使用div[0]即可獲取到div
- 使用jquery自身所提供的方法, 通過get(index), 也能得到相應的dom物件
6.div的屬性方法:getElementById appendChild innerHTML 等
7.$div的屬性方法: addClass after append等
複製程式碼

jQuery初探

自己封裝兩個函式

面試題

相關文章