用原生DOM实现一个jQuery的API

今天第一次接触jQuery,先简单的实现一个jQuery的API,实现两个方法:

  1. addClass()
  2. setText()

主要讲讲实现的过程与思路,其实也比较简单,主要就是把常用的DOM对象封装成函数即可。
1.首先建立一个函数,并初始化一个object,最终函数中返回这个object,并且带有 0,1,2....等key,其value是读取到的DOM元素或者是节点;object还含有length,长度为key的最大值+1;object再带有多种方法key,一一对应其相应的函数。其实这个object就是一个伪数组,类似于参数arguments
2.还要判断实现的函数参数是否为string类型,或者是Node节点,然后返回不同的objects。
3.主要就是通过原生的DOM API :document.querySelectorAll()实现object的部分key。
4.还有一点要使用到window这个全局对象将该函数封装好。
下面就是具体代码:

var sunDom = function(string) {
    let nodes = {length: 0}
    if (typeof string === 'string') {
        var elements = document.querySelectorAll(string)
        for (let index = 0; index < elements.length; index++) {
            const element = elements[index]
            nodes[index] = element
            nodes.length += 1
        }
    } else if(string instanceof Node) {
        nodes = {
            0: string,
            length: 1
        }
    }

    nodes.addClass = function addClass(classes) {
        for (let index = 0; index < nodes.length; index++) {
            const element = nodes[index]
            element.classList.add(classes)          
        }
    }

    nodes.setText = function(string) {
        for (let index = 0; index < nodes.length; index++) {
            const element = nodes[index]
            element.textContent = string      
        }
    }
    console.log(nodes)
    return nodes
}

window.jQuery = sunDom
window.$ = jQuery

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

你可能感兴趣的:(用原生DOM实现一个jQuery的API)