【实战】封装模拟jQuery的DOM库

需求

let items = $('li')
items.on('click', function(){
  console.log('click')
})
items.addClass('hi').removeClass('error')
items.text('你好')
items.get(0)
1. item 没有 siblings 方法
2. 需求要有 xxx.siblings 方法
3. $item = $(item)   $item.siblings() 返回 item 的兄弟
1. $item.siblings() 没有 addClass 方法
2. 需求要有  $item.siblings().addClass
3. $item.siblings() 的结果是 $('li') 类似的东西
$item.siblings().removeClass('active').end()
  .addClass('active')

源代码

// $ 接收一个字符串或元素或元素列表
// 返回一个新的数组
// 这个数组有  on  addClass removeClass ... API
window.$ = function(selectorOrNode){
    let array = []
    if(typeof selectorOrNode === 'string'){
        let items = document.querySelectorAll(selectorOrNode)
        for(var i=0;i<items.length; i++){
            array.push(items[i])
        }
    }else if(selectorOrNode instanceof Element){
        array.push(selectorOrNode)
    }else if(selectorOrNode instanceof Array){
        for(var i=0;i<selectorOrNode.length; i++){
            if(!(selectorOrNode[i] instanceof Element)){
                continue
            }
            array.push(selectorOrNode[i])
        }
    }
    
    array.on = function(eventType, fn){
        for(var i=0;i<array.length;i++){
            array[i].addEventListener(eventType, fn)
        }
    }
    array.addClass = function(className){
        for(var i=0;i<array.length;i++){
            array[i].classList.add(className)
        }
        return array
    }
    array.removeClass = function(className){
        for(var i=0;i<array.length;i++){
            array[i].classList.remove(className)
        }
        return array
    }
    array.text = function(value){
        if(value !== undefined){
          for(var i=0;i<array.length;i++){
            array[i].textContent = value
          }
          return array  
        }else{
            let result = []
            for(var i=0;i<array.length;i++){
              result.push(array[i].textContent)
            }
            return result
        }
        
    }
    array.get = function(index){
        return array[index]
    }
    array.end = function(){
        return array.previousSelection
    }
    array.siblings = function(){
        let children = array[0].parentNode.children
        let resultArray = []
        for(var i=0;i<children.length; i++){
            if(children[i] !== array[0]){
                resultArray.push(children[i])
            }
        }
        let items = $(resultArray)
        items.previousSelection = array
        return items
                                                           
        
    }
    return array
}