javascript - 在 Javascript 中实现类似 jquery 的 addClass、removeClass 和 delay 函数
问题描述
假设 $ 不是浏览器。现在要实现$,它会接受一个字符串,这是一个查询,它会使用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>
解决方案
我试图使用队列和任务运行器来解决这个问题。任何人都可以检查这是否看起来不错,或者我们可以改进它吗?
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>
推荐阅读
- scala - 在 Play 框架中对具有 AssetsFinder 依赖项的控制器进行单元测试
- arcgis - 是否可以在 GIS 软件中创建泰森多边形,但根据 DEM 加权?
- bash - bash3进程重定向文件描述符在运行其他进程时消失
- flutter - Flutter Bloc 消费者状态重叠
- postgresql - 单元测试 Postgres 数据库连接 golang
- django - drf-spectacular 找不到检查员课程
- tooltip - 格式化 Altair 等值线地图图例比例和工具提示
- python - MATLAB的PIQE函数错了吗?
- assembly - 如果我在 MIPS32 程序集中将其空间保留为 .space,是否需要以空值开头?
- google-bigquery - BigQuery,有没有办法在整个数据库中搜索字符串?