2

我正在构建一个 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 中的默认值。有任何想法吗？

4

1 回答 1

0

看看jQuery.getJSON

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

于 2013-05-04T20:50:03.467 回答