class A{
    constructor(){
        if(new.target === A){
            this.x = 1
            this.y = 1
        } else {
            this.z = 2
        }
    }
}

class B extends A{
    constructor(){
        super()
    }
}

let a = new A()
let b = new B()

console.log(JSON.stringify(a))
console.log(JSON.stringify(b))

class DomResizeWatcher{
    constructor(){
        this.datas = new Map()

        this._init()
    }

    _init(){
        this._check()
    }

    _check(){
        Array.from(this.datas.values()).forEach(data => {
            data.check()
        })

        requestAnimationFrame(this._check.bind(this))
    }

    addResizeEventListener(dom, fun){
        let data = this.datas.get(dom)
        if(!data){
            data = new DomResizeWatcherData(dom)
            this.datas.set(dom, data)
        }
        data.addResizeEventListener(fun)
    }

    removeResizeEventListener(dom, fun){
        let data = this.datas.get(dom)
        if(!data) return

        data.removeResizeEventListener(fun)

        if(data.getFunCount() > 0) return

        this.datas.delete(dom)
    }
}

class DomResizeWatcherData{
    constructor(dom){
        this.dom = dom
        this.funs = new Set()
        this.size = this._getDomSize()
    }

    _getDomSize(){
        let height = this.dom.clientHeight
        let width = this.dom.clientWidth

        return {
            height,
            width
        }
    }

    _trigger(){
        let dom = this.dom
        this.funs.forEach(fun => {
            fun.apply(dom)
        })
    }

    getFunCount(){
        return this.funs.size
    }

    addResizeEventListener(fun){
        this.funs.add(fun)
    }

    removeResizeEventListener(fun){
        this.funs.delete(fun)
    }

    check(){
        let size = this._getDomSize()
        if(size.height !== this.size.height 
            || size.width !== this.size.width){
            this._trigger()
            this.size = size
        }
    }
}

class FrameCounter{
    constructor(){
        this.time = 0
        this._run = false
    }

    _runFun(){
        if(this._run){
            this.time++
            requestAnimationFrame(this._runFun.bind(this))
        }
    }

    start(){
        this._run = true
        this._runFun()
    }

    stop(){
        this._run = false
    }
}

class DOMResizeWatcher{
    constructor(){
        this.datas = new Map()
        this.timer = new FrameCounter()
        this.timer.start()
    }

    addResizeEventListener(dom, fun){
        let data = this.datas.get(dom)
        if(!data){
            data = new DOMResizeWatcherData(dom, this.timer)
            this.datas.set(dom, data)
        }
        data.addResizeEventListener(fun)
    }

    removeResizeEventListener(dom, fun){
        let data = this.datas.get(dom)
        if(!data) return
        
        if(fun){
            data.removeResizeEventListener(fun)

            if(data.getFunCount() > 0) return
        }

        data.destory()
        this.datas.delete(dom)
    }
}

class DOMResizeWatcherData{

    constructor(dom, timer){
        this.dom = dom
        this.funs = new Set()
        this.trigged = false
        this.timer = timer

        this.insideBigEl = null
        this.insideSmallEl = null

        this._init()
    }

    _init(){
        //监听变大的DOM
        let insideBig = document.createElement("div")
        insideBig.style = "position: absolute;top:0;left: 0;bottom: 0;right: 0;overflow: hidden;visibility: hidden;z-index:-1"
        insideBig.innerHTML = `<div style="width:${DOMResizeWatcherData.bigNumber}px;height:${DOMResizeWatcherData.bigNumber}px"></div>`

        //监听变小的DOM
        let insideSmall = document.createElement("div")
        insideSmall.style = "position: absolute;top:0;left: 0;bottom: 0;right: 0;overflow: hidden;visibility: hidden;z-index:-1"
        insideSmall.innerHTML = `<div style="width:300%;height:300%"></div>`

        this.insideBigEl = insideBig
        this.insideSmallEl = insideSmall

        try{
            this.dom.appendChild(insideBig)
            this.dom.appendChild(insideSmall)
        } catch(e) {
            throw new Error("DOMElement can't appendChild! try another way!")
        }
        
        insideSmall.scrollTop = DOMResizeWatcherData.bigNumber
        insideSmall.scrollLeft = DOMResizeWatcherData.bigNumber
        insideBig.scrollTop = DOMResizeWatcherData.bigNumber
        insideBig.scrollLeft = DOMResizeWatcherData.bigNumber

        insideBig.addEventListener("scroll", _ => {
            insideSmall.scrollTop = DOMResizeWatcherData.bigNumber
            insideSmall.scrollLeft = DOMResizeWatcherData.bigNumber
            this._trigger()
        })
        insideSmall.addEventListener("scroll", _ => {
            insideBig.scrollTop = DOMResizeWatcherData.bigNumber
            insideBig.scrollLeft = DOMResizeWatcherData.bigNumber
            this._trigger()
        })
    }

    _trigger(){
        if(this.triggertime === this.timer.time) return
        this.triggertime = this.timer.time
        
        let dom = this.dom
        this.funs.forEach(fun => {
            fun.apply(dom)
        })
    }

    getFunCount(){
        return this.funs.size
    }

    addResizeEventListener(fun){
        this.funs.add(fun)
    }

    removeResizeEventListener(fun){
        this.funs.delete(fun)
    }

    destory(){
        try{
            this.dom.removeChild(this.insideBigEl)
            this.dom.removeChild(this.insideSmallEl)
        } catch(e){}
    }
}
DOMResizeWatcherData.bigNumber = 9999999

let targetNode = document.querySelector("#targetNode")
let config = { attributes: true, childList: true, subtree: true, characterData: true }
let observer = new MutationObserver(mutationsList => console.log(mutationsList))
observer.observe(targetNode, config)

let attributesChangeEl = document.querySelector("#attributes-change")
let config = { attributes: true }
let observer1 = new MutationObserver(mutationsList => {
    console.log(mutationsList)
})
observer1.observe(attributesChangeEl, config)

let attributesChangeEl = document.querySelector("#attributes-change")
let config = { attributes: true }
let observer1 = new MutationObserver(mutationsList => {
    console.log(mutationsList)
})
observer1.observe(attributesChangeEl, config)

let attributesChangeEl = document.querySelector("#attributes-change")
let config = { attributes: true, attributeOldValue: true, attributeFilter: [ "data-a"] }
let observer1 = new MutationObserver(mutationsList => {
    console.log(mutationsList)
})
observer1.observe(attributesChangeEl, config)

let characterdataChangeEl = document.querySelector("#characterdata-change")
let config2 = { characterData: true, subtree: true }
let observer2 = new MutationObserver(mutationsList => {
    console.log(mutationsList)
})
observer2.observe(characterdataChangeEl, config2)

let childlistChangeEl = document.querySelector("#childlist-change")
let config3 = { childList: true }
let observer3 = new MutationObserver(mutationsList => {
    console.log(mutationsList)
})
observer3.observe(childlistChangeEl, config3)

document.querySelector("#childlist-change-btn").addEventListener("click", function(){
    childlistChangeEl.removeChild(childlistChangeEl.children[0])
    let div = document.createElement("div")
    div.innerHTML = Date.now()
    childlistChangeEl.appendChild(div)
})

let fun = function(){
    console.log("我会消耗页面100ms的性能", Date.now(), count)
}

let count = 0
let handle = setInterval(_ => {
    fun()
    count++
}, 10)
setTimeout(_ => {
    clearInterval(handle)
}, 1000)

let fun_throttle = (function(){
    let flag = false

    return function(){
        if (flag) return
        flag = true

        console.log("我会消耗页面100ms的性能", Date.now(), count)
        
        setTimeout(_ => {
            flag = false
        }, 100)
    }
})()

let count = 0
let handle = setInterval(_ => {
    fun_throttle()
    count++
}, 10)
setTimeout(_ => {
    clearInterval(handle)
}, 1000)

let fun_debounce = (function(){
    let flag = false
    let handle = null

    return function(){
        if (handle) clearTimeout(handle)
        handle = setTimeout(_ => {
            flag = false
        }, 100)

        if (flag) return
        flag = true

        console.log("我会消耗页面100ms的性能", Date.now(), count)
    }
})()

let count = 0
let handle = setInterval(_ => {
    fun_debounce()
    count++
}, 10)
setTimeout(_ => {
    clearInterval(handle)
}, 1000)

/**
 * 节流函数
 * @param {*} fun 需要节流的函数
 * @param {*} time 节流时间间隔
 * @param {*} first 节流函数在节流时间间隔内是执行第一个还是最后一个
 */
function throttle(fun, time = 10, first = true){
    if (first){
        let flag = false
    
        return function(){
            if (flag) return
            flag = true

            let that = this
            let args = arguments
            fun.apply(that, args)

            setTimeout(_ => {
                flag = false
            }, time)
        }
    } else {
        let flag = false
        let that = null
        let args = null
    
        return function(){
            if (flag) {
                that = this
                args = arguments
                return
            }
            flag = true

            setTimeout(_ => {
                fun.apply(that, args)
                flag = false
            }, time)
        }
    }
}

/**
 * 函数防抖封装函数
 * @param {*} fun 需要防抖的函数
 * @param {*} time 防抖时间间隔
 * @param {*} first 函数在一次的防抖时间内是执行第一个还是最后一个
 */
function debounce(fun, time = 10, first = true){
    if (first){
        let flag = false
        let handle = null

        return function(){
            if (handle) clearTimeout(handle)
            handle = setTimeout(_ => {
                flag = false
            }, time)

            if (flag) return
            flag = true

            let that = this
            let args = arguments
            fun.apply(that, args)
        }
    } else {
        let flag = false
        let handle = null
    
        return function(){
            if (handle) clearTimeout(handle)

            let that = this
            let args = arguments
            handle = setTimeout(_ => {
                flag = false
                fun.apply(that, args)
            }, time)

            if (flag) return
            flag = true
        }
    }
}

let fun1 = function(count){
    console.log("我会消耗页面100ms的性能:节流先执行", Date.now(), count)
}

let fun2 = function(count){
    console.log("我会消耗页面100ms的性能:节流后执行", Date.now(), count)
}

let fun3 = function(count){
    console.log("我会消耗页面100ms的性能:防抖先执行", Date.now(), count)
}

let fun4 = function(count){
    console.log("我会消耗页面100ms的性能:防抖后执行", Date.now(), count)
}

let throttle1 = throttle(fun1, 100, true)
let throttle2 = throttle(fun2, 100, false)
let debounce1 = debounce(fun3, 100, true)
let debounce2 = debounce(fun4, 100, false)

let count = 0
let handle = setInterval(_ => {
    throttle1(count)
    throttle2(count)
    debounce1(count)
    debounce2(count)
    count++
}, 10)
setTimeout(_ => {
    clearInterval(handle)
}, 1000)