deploy

分支 (1)

管理

管理

deploy

blog-document
/
test.html

<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

<button onclick="onStart()">开始</button>
<button onclick="onPause()">暂停</button>

<script>

    function User() {


    }


    const user = new User()

    class Person {

    }

    console.log(User.prototype.__proto__ === Person.prototype.__proto__)
    console.log(Person.constructor === Function)

    // 说明 实例化的函数对象的 __proto 等于其 prototype

    // console.log(User.prototype.__proto__ === Function.prototype.__proto__)
    // console.log(Function.prototype.__proto__ === Object.prototype)


    //   需求 一个任务 可以添加多个任务 可以再执行时暂停 然后 再可以继续


    class Task {
        #task = []
        #isRunning = false
        result = []

        constructor(tasks) {
            tasks.map(i => this.#task.push(i))
        }

        addTask(task) {
            this.#task.push(task)
        }

        start() {
            if (this.#isRunning) {
                return
            }
            this.#isRunning = true
            this.run()
        }

        run() {
            if (this.#task.length === 0) {
                this.#isRunning = false
                return;
            }
            if (!this.#isRunning) {
                console.log('当前任务已暂停')
                return
            }
            const task = this.#task.shift()
            task().then(res => this.result.push(res)).catch(err => this.result.push(err)).finally(() => {
                this.run()
            })
        }

        pause() {
            this.#isRunning = false
        }
    }

    const t = (i) => {
        return new Promise(resolve => {
            setTimeout(() => {
                console.log(i)
                resolve()
            }, 2000)

        })
    }

    const taskList = new Task([1, 2, 3, 4, 5].map(i => () => t(i)))
    const onStart = () => taskList.start()
    const onPause = () => taskList.pause()


    function timeOut(time) {
        return new Promise((resolve) => {
            setTimeout(() => resolve(), time)
        })
    }


    class SuperTask {
        constructor() {
            this.tasks = []
            this.runningCount = 0
            this.bfCount = 2
        }

        add(task) {
            return new Promise(resolve => {
                this.tasks.push({task, resolve})
                if (this.runningCount < this.bfCount) {
                    this.run()
                }
            })
        }

        run() {
            if (this.tasks.length > 0) {
                const {task, resolve} = this.tasks.shift()
                this.runningCount++
                task().then(res => resolve(res)).finally(() => {
                    this.runningCount > 1 && this.runningCount--
                    this.run()
                })
            }
        }
    }


    const superTask = new SuperTask()

    function addTask(time, name) {
        superTask.add(() => timeOut(time)).then(() => {
            console.log(`任务:${name}完成`)
        })
    }

    addTask(10000, 1) // 1s 后输出任务1
    addTask(5000, 2) // 5s 后输出任务2
    addTask(3000, 3) // 8s 后输出任务3
    addTask(4000, 4) // 12s 后输出任务4
    addTask(5000, 5) // 15s 后输出任务5
</script>
</body>
</html>


class waterFall {
// @ts-ignore
contentDom: HTMLElement
// @ts-ignore
itemWidth: number
// @ts-ignore
heightStore: number[]

constructor(public gap = 10, public el = "", public columns = 5) {
this.gap = 10
this.el = el
if (!el) {
return
}
this.contentDom = document.getElementById(el) as HTMLElement
this.columns = columns
this.itemWidth = (this.contentDom.offsetWidth - (columns - 1) * this.gap) / columns
}

render() {
// 获取所有div

const allDiv = this.contentDom.getElementsByTagName("div")
// 循环遍历div
for (let index = 0; index < allDiv.length; index++) {
const element = allDiv[index]
// 先把每一个盒子宽度变为指定的itemWidth
element.style.width = this.itemWidth + "px"
// 第一排
if (index < this.columns) {
this.heightStore.push(element.offsetHeight)
element.style.top = "0px"
element.style.left = this.itemWidth + this.gap + "px"
} else {
// 查找上一排最矮的一个
const lowIndex = this.heightStore.indexOf(Math.min(...this.heightStore))
element.style.top = allDiv[lowIndex].offsetHeight + this.gap + "px"
element.style.left = allDiv[lowIndex].offsetWidth + this.gap + "px"
// 更新对应的数组的高度
this.heightStore[lowIndex] = element.offsetHeight + this.gap
}
}
}
}

export default waterFall

// 能绑定指定函数的this
// 能传递参数
// bind 方法返回一个绑定后的函数
// new的时候 依然指向原函数的原型

// bind 能做什么
// 能绑定函数是传入对象的this
// 能传入参数
// bind 返回一个函数
// 能在new的时候原型指向被绑定参数
// Function.prototype.mybind = function (ctx) {
// 	// this 表示调用者
// 	// if(typeof this !=='Function'){
// 	//   throw new TypeError('调用者不是一个函数')
// 	// }
// 	const fn = this
// 	const args = [...arguments].slice(1)
// 	return function Fn() {
// 		return fn.apply(this instanceof Fn ? new fn(...arguments) : ctx, args.concat(...arguments))
// 	}
// }

// 能绑定this
// 返回一个可执行函数
// new 出来的函数原型对象指向被绑函数
// 能传递参数

// @ts-ignore
function myBind(ctx) {
// @ts-ignore
let bindArgs = [...arguments].slice(1)
// @ts-ignore
let that = this
return function _FN() {
const params = bindArgs.concat(arguments)
// @ts-ignore
return that.apply(this instanceof _FN ? new that(...arguments) : ctx, params)
}
}

// new 关键字
// 创建一个新对象 将新对象的原型指向传入函数的原型对象 执行原型对象函数传递参数值 并将this指向新创建的对象 如果执行的构造函数有返回值也是一个对象的话就返回 否则 返回新创建的对象

// function myNew(Fn, ...args) {
//     const obj = Object.create(null)
//     obj.__proto__ = Fn.prototype
//     const result = Fn.apply(obj, args)
//     return result instanceof Object ? result : obj
// }


type TaskEntity<T extends any> = () => Promise<T>

    class TaskQue<T extends any> {
    private taskList: Array<TaskEntity<T>> = []
        private isRunning = false

        constructor(tasks: Array<TaskEntity<T>>) {
            this.taskList = [...tasks]
            // 执行
            this.start()
            }

            addTask(task: TaskEntity<T>) {
                this.taskList.push(task)
                this.start()
                }

                pauseTask() {
                this.isRunning = false
                }

                // 用于执行
                start() {
                // 判断是否正在执行 如果在执行 那么就直接return
                if (this.isRunning) {
                return
                }
                this.isRunning = true
                this.run()
                }

                // 只是负责用来执行任务的
                private run() {
                if (!this.isRunning) return
                // 如果当前有任务 则取出第一个任务
                if (this.taskList.length > 0) {
                let current: TaskEntity<T> = this.taskList.shift()!
                    current().then(res => {
                    console.log(res)
                    }).catch(err => {
                    console.log(err)
                    }).finally(() => {
                    // 重新调用自身 去取出下一个任务
                    this.run()
                    })
                    }
                    }
                    }

                    const timeOut = (time: number, content: string): Promise<string> => {
                        return new Promise(resolve => {
                        setTimeout(() => {
                        resolve(content)
                        }, time)
                        })
                        }


                        const taskQue = new TaskQue<string>([])

                            taskQue.addTask(() => timeOut(1000, '1000'))
                            taskQue.addTask(() => timeOut(2000, '2000'))

                            taskQue.start()
                            taskQue.addTask(() => timeOut(3000, '3000'))
                            taskQue.pauseTask()
                            taskQue.start()
                            taskQue.addTask(() => timeOut(1000, '1000'))