Question

我得到了一个data-attribute，它有一个字符串值，我希望能够获得特定的json对象（字符串的值）。所以这样的事情。

以下示例是剥离版本（足以说明问题），请查看此小提琴，了解我正在尝试的完整版本。

<div class="js-carousel" data-conf='{"componentSettings": "CarouselSettings" }'>...</div>

或

 <div class="js-carousel" data-conf='{"componentSettings": "CarouselConfig.hero" }'>...</div>

我得到了这个json对象，它获得了我的js模块的设置（在这种情况下它是Slick carousel）

var CarouselSettings = {
  accessibility: false,
  autoplay: true
};

var CarouselConfig = {
  hero: {
    accessibility: false,
    autoplay: true
  },
  product: {
    accessibility: true,
    autoplay: false
  }
};

我可以使用字符串值进行设置并触发函数。

"mediaQuery": "isBase2Medium"

这将触发媒体查询控制功能。所以我想也许我可以对此有类似的方法吗？

Answer 1

我已经更新了你的小提琴来做你想做的事情（我想）： https://jsfiddle.net/8a4x5y2m/3/

请注意我做出的以下更改：

主要变化是getSettings()功能。在那里，我引入了一个检查，以查看是否将一个特定设置（componentSettings）声明为窗口（全局）范围内的对象，如果是，则将该字符串参数替换为该对象。这让我们指出（2）......
您使用var在全局范围内声明配置对象，但在jsFiddle中，您的整个脚本放在window.onload处理程序中，这使得这些变量成为处理程序的本地变量。我删除了var关键字以使参数全局化，从而将它们暴露给窗口对象，但这是不好的做法。考虑将它们放在全局配置对象中，然后在上面的getSettings()方法中，将window[]替换为myGlobalConf[]。

另外，请注意我只测试componentSettings字段。如果你想测试每个参数，那么你将不得不迭代它们并对每个参数进行相同的检查。

Answer 2

哦，天哪，代码太长了，我终于找到了插入eval（...）的入口点，你可以通过使用eval（...）来尝试这个解决方案：

    function applySettings(settings) {
        var componentSettings = settings.componentSettings;
        componentSettings = typeof componentSettings == 'string' ? eval('(' + componentSettings + ')') : componentSettings;
        settings.componentSettings = componentSettings;
        return settings;
    }

    function getSettings($element, settings) {
        settings = settings === undefined ? applySettings($element.data(elementConf)) : settings;
        ....

        return settings;
    }

有一个字符串值，使它得到正确的对象

2 个答案: