用vanilla JS从类列表中传递变量

Question

我正在构建一个网站模板，我编写了这段代码来从类列表中传递一个变量。因此，在本例中，如果div具有一个modal类，以及一个前缀为delay-的类，则可以直接从类中设置模型的延迟。

示例：

<div class="modal delay-10 hidden">

会有10秒的延迟

以下是代码：

const delayselect = document.querySelector(`.${classname}[class*='delay-']`);
const elements = Array.from(delayselect.classList);
const prefix = "delay-";
const matches = elements.filter(function(value){
    //get rid of all falsely objects
    if(value) {
        return (value.substring(0, prefix.length) === prefix);
    }
});
const match = matches.toString();
const time = match.split('-').pop();
const delay = time * 1000;

它的应用方式是这样的：

setTimeout(function(){
    modal.classList.remove('hidden');
}, delay);

这一切只是为了方便用户修改模板。因此，他们只需要编辑HTML文件，而不是乱搞scripts.js文件。

我觉得这有点笨重，有没有更干净或更简单的方法来做到这一点？

Answer 1

因为代码缺乏上下文，所以这只是边缘性的可审查性。如果它被包装在一个输入和输出清晰的函数中，那么它将被清除得多。例如，假设classname包含字符串modal，这完全脱离了上下文。

另外，这两段代码之间的联系也不清楚。当代码的第一部分使用变量名为modal时，为什么第二段代码中的受影响元素是在名为delayselect的变量中？

顺便说一下，变量名选择得很糟糕。delayselect .奇怪？delayElement或者只是element会更好。elements应该是classes。

那我觉得你想得太多了：

• 您假设delay-中只有一个元素。
• 假设过滤器完全返回一个类名。
• 您假设delay-后面总是跟着一个可被JavaScript解析的数字。

您的前缀delay-在代码中有两次，一次作为常量，一次作为选择器。

过滤器函数中的if (value)似乎没有必要。我无法想象一个类列表包含一个"falsy“值。

此外，可以使用lambda和.startsWith来缩短过滤部分：

 const matches = elements.filter(value => value.startsWith(prefix));