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

What is the best way to specify a simple configuation file HTML or javascript

本文关键字：最佳 方式 是什么 javascript 简单 配置文件 HTML      更新时间：2023-09-26

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

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

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

每种方法都有利弊吗？

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

您可能想要一个JSON对象。

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

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

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

您无法真正用JavaScript在客户端加载文件，因此您的选择是有限的，除非您从服务器提供JSON配置文件（并通过get请求获取）。一个巧妙的替代方案是编写一个简单的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

实际上没有一种用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>
相关文章：