在 Javascript 中实现类似 jquery 的 addClass、removeClass 和 delay 函数答案

【问题标题】：Implement jquery like functions addClass, removeClass and delay in Javascript在 Javascript 中实现类似 jquery 的 addClass、removeClass 和 delay 函数
【发布时间】：2020-04-27 21:38:45
【问题描述】：

假设 $ 不是浏览器。现在要实现$，它会接受一个字符串，这是一个查询，它会使用querySelector来选择元素。（参考：https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector）

$('text')

现在实现 jquery 之类的函数 addClass 和 removeClass。（参考：https://developer.mozilla.org/en-US/docs/Web/API/Element/classList）

$('#test').removeClass('blue').addClass('red');

现在实现类似 jquery 的函数延迟。（参考：https://api.jquery.com/delay/）在这里，我被卡住了，无法为这种情况实施延迟。

$('#test').removeClass('blue').delay(2000).delay(1000).addClass('red');

代码示例

function $(selector) {
    let element = document.querySelector(selector)

    Object.prototype.addClass = function (className) {
        this.classList.add(className)
        return this
    }


    Object.prototype.removeClass = function (className) {
        this.classList.remove(className)
        return this
    }

    Object.prototype.delay = function(ms){
        // what to do?
        return this
    }

    return element
}

$('#test').removeClass('blue').delay(2000).delay(1000).addClass('red');

<!DOCTYPE html>

<html>
    <head>
        <style>
            .blue{
                background-color: blue;
            }
            .red{
                background-color: red;
            }
        </style>
    </head>
    <body>
        <div id="test" style="width: 200px; height: 200px;" class="blue"></div>
    </body>
</html>

【问题讨论】：

jQuery 是用“vanilla JavaScript”编写的，源代码在 GitHub 上：github.com/jquery/jquery
您是否将其用于教育目的？还是不允许在项目中使用 jquery？什么原因？
@JózefPodlecki 我仅将其用于教育目的。试图深入了解 jquery 的工作原理。

标签： javascript html jquery settimeout delay

【解决方案1】：

我尝试使用队列和任务运行器来解决这个问题。任何人都可以检查这是否看起来不错或者我们可以改进它吗？

function $(selector) {
    let element = document.querySelector(selector)
    element.queue = []
    element.active = false
    return element
}

Element.prototype.next = function () {
    if (this.queue.length) this.runTask(this.queue.shift())
}

Element.prototype.runTask = function (callBack) {
    this.active = true
    callBack().then(() => {
        this.active = false
        this.next()
    })
}

Element.prototype.register = function(callBack){
    if (this.active) {
        this.queue.push(callBack)
    } else {
        this.runTask(callBack)
    }
}

Element.prototype.addClass = function (className) {
    that = this
    let callBack = () => new Promise(resolve => setTimeout(function () {
        that.classList.add(className)
        resolve()
    }, 0))
    this.register(callBack)
    return this
}

Element.prototype.removeClass = function (className) {
    that = this
    let callBack = () => new Promise(resolve => setTimeout(function () {
        that.classList.remove(className)
        resolve()
    }, 0))
    this.register(callBack)
    return this
}

Element.prototype.delay = function (ms) {
    that = this
    let callBack = () => new Promise(resolve => setTimeout(function () {
        resolve()
    }, ms))

    this.register(callBack)
    return this
}

$('#test')
.removeClass("red").delay(500)
.addClass("blue").delay(500).delay(500).removeClass("blue")
.delay(500).addClass("red").delay(500).removeClass("red")
.delay(500).addClass("blue").delay(500).removeClass("blue")
.delay(500).addClass("red").delay(500).removeClass("red")

<!DOCTYPE html>

<html>
    <head>
        <style>
            .blue{
                background-color: blue;
            }
            .red{
                background-color: red;
            }
        </style>
    </head>
    <body>
        <div id="test" style="width: 150px; height: 150px; margin:10px;" class="red"></div>
    </body>
</html>

【讨论】：

如果您有有效的代码并希望查看该代码的所有方面，您可以查看Code Review 的帮助中心，看看它是否符合主题。
@HereticMonkey，非常感谢向我介绍了一种新的代码审查方法。我没有意识到这一点。谢谢。
看起来很不错！我会将let callBack = () => new Promise(resolve => setTimeout(function () { 和以后的代码提取到一个函数中。喜欢createQueueItem(() => { that.classList.remove(className); }, timeout)

【解决方案2】：

Object.prototype.delay doesnt have easy implementation as you have to introduce some kind of queue like jQuery uses internally。这是因为您希望在调用 setTimeout(callback, ms) 中的 callback 时执行一些进一步的逻辑。

就像你的例子 .delay(2000).delay(1000).addClass('red');

【讨论】：

嗨，我刚刚使用队列和任务运行器添加了一个答案。你能检查一下here