js封裝函式來 解釋jQuery的執行原理

Jc Bound發表於2019-04-09
JS封裝函式jQuery

實現程式碼大概邏輯流程就是：

1.首先提出問題：假設要給li元素新增class類演示和文字內容，該如何實現？

2.解決問題：

1.1首先得獲取到所有的元素，知道有幾個li元素需要進行調整，所以得使用迴圈遍歷來找出所有的li元素。

2.2.獲取到所有li元素後，要對每一個li元素都新增class類樣式，同樣的也需要迴圈遍歷來給每個li元素新增樣式。

3.3要給每一個li元素新增文字內容，同樣的也需要迴圈遍歷來給每個li元素新增內容。

4.4既然要做三件事，那就得用三個函式來實現。

邏輯對了，實現起來程式碼就會更加的快捷和準確。

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
                      }
                  }//迴圈遍歷出所有的nodeOrSelector,例如：li
                  nodes.addClass = function (classes){
                      classes.forEach(value) => {
                          for(let i = 0;i<nodes.length;i++){
                            nodes[i].classList.add(value)
                          }
                      }
                  }//給所有的li新增class類，
                  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
                          }
                      }
                  }//給所有的li新增‘hi’
                  return nodes
              } 
    
    window.$ = jQuery          
    $li = $('ul>li')
    $li.addClass(['blue'])
    $li.text('hi')
複製程式碼

以上是一個利用原生js封裝成函式後來說明jQuery內部執行的基本原理，我們可以模仿jQuery隨意新增元素節點和類來進行頁面內容的控制，可以讓我們對jQuery有個更清楚的瞭解， 因為在理解過程中有一些程式碼讓我困擾了一會，為了加深理解，特進行單獨的說明，

易錯細節：

1.nodeOrSelector instanceNode

這段程式碼我當時也是很不理解，因為一般instanceof是用來檢測物件型別的，而這個Node看上去也不是我所瞭解的物件型別，instanceof一般使用方法如下：

alert(person instanceof Object);  // 變數 person 是 Object 嗎？
alert(colors instanceof Array); // 變數 colors 是 Array 嗎？
alert(pattern instanceof RegExp); // 變數 pattern 是 RegExp 嗎？
複製程式碼

Node好像不在這些引用型別當中呀！《js高程設計》中也沒有說，一般Node好像是作為節點來用，o(╥﹏╥)o 然後我翻了翻網上的文件，最後明白了，這個Node是作為Node物件，Node物件是屬於DOM裡面的物件，而Object，Array,Date,RegExp，Function等是屬於ECMAscript裡面的物件，因此他們都可以使用這個instanceof來檢測物件型別，理解了這個，也就茅塞頓開了。

2.閉包函式，我們先來熟悉下閉包函式的意思：閉包是指能訪問到其他函式內部中的變數的函式，這個函式就叫做閉包（函式不一定要return），

在上面的程式碼中，我們也是用了閉包:

nodes.addClass = function (classes){xxx} nodes.text = function(text){} 上面這倆函式都訪問了他們外部的變數nodes,從而可以進行class類的新增和textcontent文字內容的新增，這裡就是使用閉包函式的好處，

3.程式碼中多次使用了迴圈遍歷，一定要注意，其中的偽陣列是沒有push方法的，所以不能使用push方法，我經常也是會不注意就錯了， 還糾結半天哪裡不對，結果白費半天功夫。

4.後面在遇到關於jQuery和DOM有關的問題將在後面繼續補充，

相關文章