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滑块：https://bxslider.com

有人告诉我这部分代码很关键：pager: ".decoration-right"-如果这有所作为，公司将使用LESS CSS预处理程序。

Stack Overflow是放置这种没有实际解决方案的问题的正确位置（不是我不会接受任何答案）吗？希望它不会因为广泛而封闭。感谢您的任何建议。

Answer 1

您提供的代码段似乎只是在指定HTML中的类的配置，例如".cycle-slideshow"和".regen-slideshow .cycle-slideshow"。

我不确定插件代码在幕后到底在做什么，但是插件中将通过键“ cycleslideshow”读取片段中指定的那些配置值。该值是指定设置的集合。这使用的是JavaScript对象格式，类似于JSON。

要确切了解配置中的每个条目的含义以及期望值，可以搜索它们的github页面，因为它似乎是开源的。

Answer 2

我还没有看完整的代码，但是这段代码实际上只是设置cycleslideshow对象的placementOptions属性（它本身就是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。

了解此javascript幻灯片如何与键值对一起使用

2 个答案: