實現一個簡單的 jQuery 的 API

kari發表於2019-04-10
jQueryAPI

jQuery 就是將 DOM 物件重新包裝成 jQuery 物件，這個 jQuery 物件中包含了許多 DOM 中不能輕鬆實現的方法（函式），可以省去很多複雜的程式碼。

在不使用 jQuery 函式庫的情況下自制一個與 jQuery 同樣原理的 API:

確認以下兩個需求：

window.jQuery = ???
window.$ = jQuery

var $div = $('div')
1. $div.addClass('red')  // 可將所有 div 的 class 新增一個 red
2. $div.setText('hi')  // 可將所有 div 的 textContent 變為 hi
複製程式碼

程式碼部分：

window.jQuery = function(x){
    let nodes 
    if(typeof x === 'string'){
        nodes = document.querySelectorAll(x)
    }else{
        nodes = {
            0 : x,
            length : 1
        }
    }
    // 以上相當於一個選擇器，根據設定的引數 x 形成一個 nodes 物件
    
    nodes.addClass = function(className){
        for(var i=0; i<nodes.length; i++){
            nodes[i].classList.add(className)
        }
    }

    nodes.setText = function(someText){
        for(var i=0; i<nodes.length; i++){
            nodes[i].textContent = someText
        }
    }
    // 以上是為 nodes 物件新增兩個方法
    
    return nodes    
    // 最終返回 nodes 物件，這時 DOM 物件就被包裝成了 jQuery 物件
}

window.$ = jQuery

var $div = $('div')
1. $div.addClass('red')  // 可將所有 div 的 class 新增一個 red
2. $div.setText('hi')  // 可將所有 div 的 textContent 變為 hi
// 呼叫 nodes 物件中自定義的方法
複製程式碼

這樣兩個 API 就可以實現這兩個需求了。它們可以同時給一個或多個元素節點，新增 class 和 textContent。

相關文章