Question

我正在构建一个jQuery插件，允许用户使用自定义主题，称为选项如下：

$('element').myFunction({
  theme: '/path/to/theme'
});

主题包含一个文件theme-info.json，其中包含主题的名称以及其他一些元数据，并在插件初始化时由插件读取：

{
  "name": "themeName",
  "author": "authorName"
}

我希望能够做的是填充插件的默认选项，使用主题中json文件中的插件选项数组，以便在调用函数时可以覆盖它们，就好像他们像这样被硬编码：

$.fn.myFunction = function (options) {
  var defaults = {
    theme: '/default/theme/path',
    themeOptions: {
      // values called from json
      option1: 'value1',
      option2: 'value2'
    }
  }
}

然后使用插件调用：

$('element').myFunction({
  theme: '/path/to/theme',
  themeOptions: {
    option1: 'value1',
    option2: 'value2'
  }
});

实际上是否可以通过这种方式将JSON文件读入默认值？如果是这样，它是如何完成的？

更新

再玩一下，我已经设法让某些东西返回，但我正在努力做任何事情。这是获取主题元数据和选项的AJAX调用：

$.ajax({
  url: defaults.theme + 'theme-info.json',
  type: 'GET',
  dataType: 'json',
  async: false,
  success:  function(data) {
    themeName = data.name;
    var data = $.extend(true, defaults, data);
    var options = $.extend(true, defaults, options);
  }
});

然后我用

act.prepend('<script>
  var parts = \'[' + JSON.stringify(defaults.themeOptions) + ']\';
  var themeOptions = $.parseJSON(parts);
  var themeOptions = themeOptions[0];
</script>');

在目标容器的顶部打印以下内容

var parts = '[{"backgroundColor":"#FF5859","testVar":"Tada!"}]';
var themeOptions = $.parseJSON(parts);
var themeOptions = themeOptions[0];

然后在主题中，我可以使用变量themeOptions.backgroundColor，它可以很好地加载JSON中的值。但是，调用插件时用户定义的选项不会覆盖JSON中的默认值。有什么想法吗？

Answer 1

查看jQuery.getJSON

使用此方法，您可以即时读取json文件。

从json文件填充jQuery插件默认值

1 个答案: