Реализовать jquery подобные функции addClass, removeClass и delay в Javascript - PullRequest
Новая
       35

Реализовать jquery подобные функции addClass, removeClass и delay в Javascript

0 голосов
/ 28 апреля 2020

Предположим, что $ не браузер. Теперь нужно реализовать $, он будет принимать строку, которая является запросом, он будет использовать 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>

Ответы [ 2 ]

1 голос
/ 28 апреля 2020

Я пытался реализовать эту проблему, используя очередь и запуск задач. Кто-нибудь может проверить, хорошо ли это выглядит, или мы можем улучшить его? 

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>
0 голосов
/ 28 апреля 2020

Object.prototype.delay не имеет простой реализации, так как вы должны ввести какую-то очередь, такую ​​как jQuery использует внутренне . Это потому, что вы хотели бы выполнить некоторые дальнейшие логи c при вызове callback в setTimeout(callback, ms).

Как в вашем примере .delay(2000).delay(1000).addClass('red');

...