Question

我有一个简单的配置项列表，我想在文件中创建。它将是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>标记。如果你想变得非常花哨，你可以为你添加一个函数添加这个脚本标记，传递一个名称来加载配置，然后在脚本加载后有一个回调来访问对象。

例如：

config.js

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

main.js

/* 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>

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

2 个答案:

config.js

main.js