猿问

在 Javascript 中实现类似 jquery 的 addClass、removeClass

假设 $ 不是浏览器。现在要实现$，它会接受一个字符串，这是一个查询，它会使用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>


喵喔喔
浏览 188回答 3
3回答

梦里花落0921

我试图使用队列和任务运行器来解决这个问题。任何人都可以检查这是否看起来不错，或者我们可以改进它吗？function $(selector) {&nbsp; &nbsp; let element = document.querySelector(selector)&nbsp; &nbsp; element.queue = []&nbsp; &nbsp; element.active = false&nbsp; &nbsp; return element}Element.prototype.next = function () {&nbsp; &nbsp; if (this.queue.length) this.runTask(this.queue.shift())}Element.prototype.runTask = function (callBack) {&nbsp; &nbsp; this.active = true&nbsp; &nbsp; callBack().then(() => {&nbsp; &nbsp; &nbsp; &nbsp; this.active = false&nbsp; &nbsp; &nbsp; &nbsp; this.next()&nbsp; &nbsp; })}Element.prototype.register = function(callBack){&nbsp; &nbsp; if (this.active) {&nbsp; &nbsp; &nbsp; &nbsp; this.queue.push(callBack)&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; this.runTask(callBack)&nbsp; &nbsp; }}Element.prototype.addClass = function (className) {&nbsp; &nbsp; that = this&nbsp; &nbsp; let callBack = () => new Promise(resolve => setTimeout(function () {&nbsp; &nbsp; &nbsp; &nbsp; that.classList.add(className)&nbsp; &nbsp; &nbsp; &nbsp; resolve()&nbsp; &nbsp; }, 0))&nbsp; &nbsp; this.register(callBack)&nbsp; &nbsp; return this}Element.prototype.removeClass = function (className) {&nbsp; &nbsp; that = this&nbsp; &nbsp; let callBack = () => new Promise(resolve => setTimeout(function () {&nbsp; &nbsp; &nbsp; &nbsp; that.classList.remove(className)&nbsp; &nbsp; &nbsp; &nbsp; resolve()&nbsp; &nbsp; }, 0))&nbsp; &nbsp; this.register(callBack)&nbsp; &nbsp; return this}Element.prototype.delay = function (ms) {&nbsp; &nbsp; that = this&nbsp; &nbsp; let callBack = () => new Promise(resolve => setTimeout(function () {&nbsp; &nbsp; &nbsp; &nbsp; resolve()&nbsp; &nbsp; }, ms))&nbsp; &nbsp; this.register(callBack)&nbsp; &nbsp; 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>&nbsp; &nbsp; <head>&nbsp; &nbsp; &nbsp; &nbsp; <style>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .blue{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background-color: blue;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .red{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background-color: red;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; </style>&nbsp; &nbsp; </head>&nbsp; &nbsp; <body>&nbsp; &nbsp; &nbsp; &nbsp; <div id="test" style="width: 150px; height: 150px; margin:10px;" class="red"></div>&nbsp; &nbsp; </body></html>
0

皈依舞

Object.prototype.delay实现起来并不容易，因为您必须引入某种队列，例如 jQuery 在内部使用。这是因为您希望callback在调用 in时执行一些进一步的逻辑setTimeout(callback, ms)。如你的例子&nbsp;.delay(2000).delay(1000).addClass('red');
0

白板的微信

const $ = function(params){&nbsp; let elems = document.querySelectorAll(params);&nbsp; let dealyTime = 0&nbsp; return {&nbsp; &nbsp; &nbsp; addClass: function addClass(args){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; setTimeout(() => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; elems.forEach((ele) => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ele.classList.add(args);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; dealyTime = 0&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;})&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }, dealyTime)&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;return this;&nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; delay: function delay(time){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;dealyTime += time;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return this;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; removeClass: function removeClass(args){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; setTimeout(() => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; elems.forEach((ele) => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ele.classList.remove(args);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; dealyTime = 0&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;})&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; }, dealyTime)&nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; return this;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; }&nbsp;&nbsp;}
0
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答