javascript - 了解此 javascript 幻灯片如何使用键值对

Question

这似乎是一个新手问题，但我刚刚开始一份新工作，并且正在尝试更多地了解以下 javascript 代码的工作原理:

app.placementOptions["cycleslideshow"] = {
    ".cycle-slideshow" : {
            speed: 500
          , timeout: 8000
          , fx: "fade"
          , pager: ".decoration-right"
    },
    ".regen-slideshow .cycle-slideshow" : {
            speed: 800
          , timeout: 12000
          , fx: "scrollHorz"
          , pager: ".decoration-right"
    }
  };

请注意，上面的代码显然将幻灯片按钮的样式设置为此网站上首屏区域右下角的小圆圈:https://www.ccht.org.uk

完整的 JS 在这里:https://www.ccht.org.uk/js/plugins.js

有人可以解释一下代码片段的大致作用吗？它是什么？是带有键值对的 JavaScript OOP 吗？有人可以链接到一篇文章来帮助我阅读相关内容吗？我的雇主可能会使用 BX Slider:https://bxslider.com

我被告知这部分代码是关键:pager: ".decoration-right" - 公司使用 LESS CSS 预处理器(如果这有影响的话)。

Stack Overflow 是提出这种没有实际解决方案的问题的合适地方吗(并不是说我不会接受任何答案)？希望它不会因为范围广泛而被关闭。感谢您的任何建议。

Answer 1

我还没有看过你的完整代码，但这段代码本质上只是设置 placementOptions 对象的 cycleslideshow 属性(它本身就是app 对象)等于 = 符号右侧的所有内容。

基本上，您有一个对象应用程序，可以像这样初始化:

const app = {
    placementOptions: {}
}

然后，使用上面的代码片段，您可以在 placementOptions 对象上创建一个新键，该对象也可以在此编写为 app.placementOptions.cycleslideshow大小写(换句话说，不需要括号符号)。

循环幻灯片对象有两个键，它们都是表示 CSS 规则集合的 JavaScript 对象，因此正如您所说，在设计某些 DOM 元素的样式时可能会引用该对象，并且可以通过类名称轻松访问。在这种情况下，需要将属性名称括在引号中，因为有效的属性名称不能以 . 开头，也不能包含空格，除非它们像这样包装为字符串。

pager 行可能对 CSS 有特殊意义，但对 JavaScript 没有特殊意义。这些 CSS 属性中的每一个都只是其各自对象上的键。

以下代码相当于您的原始代码段(不考虑 app 或 placementOptions 可能具有的任何其他键/值:

const app = {
    placementOptions: {
        cylceslideshow: {}
    }
}

app.placementOptions.cycleslideshow['.cycle-slideshow'] = {
      speed: 500
    , timeout: 8000
    , fx: "fade"
    , pager: ".decoration-right"
};

app.placementOptions.cycleslideshow['.regen-slideshow .cycle-slideshow'] = {
      speed: 800
    , timeout: 12000
    , fx: "scrollHorz"
    , pager: ".decoration-right"
};

请注意，在这种情况下，使用括号表示法是必需的，原因与我上面提到的相同。您不一定要这样编写代码，编写的方式已经很好，但这只是将其分解为更小的部分并向您展示它们是相同的。

无论哪种情况，您都可以像这样访问该对象:

console.log(app.placementOptions.cycleslideshow['.cycle-slideshow']);
// logs:
/*
{
    speed: 500,
    timeout: 8000,
    fx: "fade",
    pager: ".decoration-right"
}
*/

或者访问对象的一部分:

console.log(app.placementOptions.cycleslideshow['.cycle-slideshow'].speed);
// logs: 500

总的来说，这个问题有点宽泛，但希望这会有所帮助。

<小时/>

编辑:不确定您要寻找的初学者或基础知识，但这里有一篇文章介绍了有关使用 JS 对象的一些基础知识:https://medium.freecodecamp.org/lets-explore-objects-in-javascript-4a4ad76af798 .

freeCodeCamp 本身拥有大量用于学习 JS 的初学者资源(文章、挑战、视频等)。