指定简单配置文件 HTML 或 javascript 的最佳方法是什么 [关闭]

Question

关闭。 这个问题是基于意见的。 它目前不接受答案。

---

想改善这个问题吗？ 更新问题，以便通过编辑这篇文章用事实和引文来回答问题。

5年前关闭。

改进这个问题

我有一个要在文件中创建的配置项的简单列表。 它将是name列表，然后是与该名称关联的enabled布尔属性：

name = "name 1" enable = "true"
name = "name 2" enable = "false"

指定它的最佳方法是什么，以便我可以在启动时将其作为配置文件加载？ HTML 还是 JavaScript？

每种方法都有优点/缺点吗？

如果有人有每种方法的一些示例，我们将不胜感激。

Answer 1

您可能想要一个 JSON 对象。

{
    "name 1":"true",
    "name 2":"false"
}

如果您使用的是 JavaScript，那么一旦您读取文件/从某处获取数据，您就可以解析它并访问属性：

var config = JSON.parse(fileData);
console.log(config["name 1"]); //"true"

您无法真正在 JavaScript 客户端加载文件，因此您的选择是有限的，除非您从服务器提供 JSON 配置文件（并通过 GET 请求获取它）。 一个hacky 的替代方法是编写一个简单的JavaScript 对象作为配置，并将该文件作为<script>标签包含在内。 如果你想变得更有趣，你可以让一个函数为你添加这个脚本标签，传递一个名称来加载配置，然后在脚本加载后有一个回调来访问对象。

例如：

配置文件

window[configName()] = {
  key1:"value1",
  key2:"value2"
}

主文件

/* Gets the name of the config object from the script src */
var configName = function() {
    var scripts = document.getElementsByTagName('script');
    for(var i=0; i<scripts.length; i++){
      if (scripts[i].getAttribute.length !== undefined && scripts[i].getAttribute('src').indexOf('#isConfig') > -1){
        var spl = scripts[i].getAttribute('src', 2).split('?');
        return spl.length === 2 ? spl[1].substr(0, spl[1].indexOf('#')) : 'config';
      }
    }
};

/* Loads the config script */
var loadConfig = function(src, callback) {
  var d = document, tag = 'script',
      element = d.createElement(tag),
      script = d.getElementsByTagName(tag)[0];
  element.src = src + '#isConfig';
  if (callback) { element.addEventListener('load', function (e) { callback(null, e); }, false); }
  script.parentNode.insertBefore(element, script);
}

/* Load the config and display on page */
loadConfig('config.js?configObj', function() {
    document.getElementById('configDiv').innerHTML = JSON.stringify(configObj);
});

工作示例： http : //plnkr.co/edit/gGilGojZqrHosNYDx36V?p=preview

Answer 2

没有真正的方法可以用 html 加载数据，你能做的最接近的是硬编码，然后用 javascript 获取数据。 这种方法会有点麻烦。

示例： http : //jsfiddle.net/arf4v1nr/

<input type="hidden" value="name1" data-enabled="true"></input>
<input type="hidden" value="name2" data-enabled="true"></input>
<script>
  var jsonData=[];
  $('input').each(function(index,obj) {
    jsonData.push({name:$(obj).val(), enabled:$(obj).data('enabled')})
  })
</script>

更好的方法是直接将数据放入您的jsonData var 中

示例： http : //jsfiddle.net/1gxwdsd6/

文件： jsonData.js

var jsonData[{
 name:"name 1",
 enable: "true"
},{ 
 name: "name 2",
 enable: "false"
}]

“如何从另一个 javascript 文件中引用 jsonData var”

HTML

<script src="./jsonData.js"></script>
<script>
  console.log(jsonData);
</script>