JavaScript-Ini, файл конфигурации для JavaScript

Сценарий загрузки и сохранения файла конфигурации JSON, который автоматически создает пользовательский интерфейс для настройки приложения.

Смысл этого сценария в том, что разработчику нужно только задать список параметров настройки приложения в таблице JSON. Сценарий отвечает за создание соответствующего интерфейса пользователя в HTML и обновление файла конфигурации для сохранения выбора пользователя.

Параметры задаются в JSON-файле. Он содержит начальные значения, которые пользователь может изменить.
Файл JSON загружается на веб-страницу, и этот сценарий создает форму в соответствии с ее содержимым.
Пользователь может изменить параметры из этой интерактивной формы.
Изменения сохраняются в том же JSON-файле.

Сценарий использует Ajax для сохранения конфигурационного файла, который может находиться на локальном компьютере или на сервере для онлайн-приложения.

На самом деле у вас есть выбор между

Отправить данные на другую страницу или сценарий с помощью кнопки Submit.
В этом случае можно удалить включение фреймворка Ajax
Используйте Ajax для хранения данных непосредственно в файле.
В этом случае можно удалить строки генерации из тега form.

По умолчанию в демо используется Ajax.

Файл конфигурации и его загрузка

Чтобы загрузить его очень просто, достаточно включить INI-файл в качестве JavaScript-скрипта:

<script type="text/javascript" src="myapp.ini"></script>

Этот файл содержит таблицу с именем config, которая затем включена в страницу интерфейса и может использоваться кодом JavaScript страницы.

Пример файла конфигурации:

var config={
  "Language": {
    "name": "lang",
       "initial": "es",
       "select": [ "en", "fr", "es"]
  },
  "Url": {
    "name": "url",
    "input": "http://www.scriptol.com/",
  },
  "Saving options": {
    "list": [
       {
         "name": "save",
         "label": "Autosave",
         "checkbox": true
       },
       {
         "name": "prompt",
         "label": "Prompt",
         "checkbox": false
       }
     ]
  }
}

Этот файл содержит три примера разделов: «Language», «Url», «Saving options». Название разделов абсолютно свободно.
Они могут содержать один или несколько объектов формы, как и в третьем разделе. В таблицу конфигурации можно добавить столько разделов и объектов форм, сколько необходимо.

Ряд зарезервированных слов используется генератором:

список: чтобы включить список объектов формы
name - имя и идентификатор объекта формы
метка - текст, который должен отображаться напротив объекта.
начальный - начальное значение. Он также может быть назначен непосредственно объекту, это тот случай для ввода, проверки.
input: чтобы создать поле ввода текста
select: создает список параметров. Затем присваивается список вариантов, как указано выше.
checkbox: для флажка. Для предустановленного флажка присваивается значение true, если нет

Порядок важен внутри секции. Перед созданием объекта формы должны быть значения имени и начального значения.

Создание формы

Мы создаем маяки fieldset и form, а затем просматриваем список разделов:

form +="<fieldset><legend>Configuration</legend>\n";
form +="<form method='POST' action='myapp.php'>\n";
for(group in config)
{
  form += "<p class='group'>" + group + "</p>";
  parseGroup(config[group]);
}
form += "<p><input type='button' onclick='saveIni(\"myapp.ini\")'
         value='Update Configuration'></p>";
form += "</form>";
form += "</fieldset>";

Мы создали объект типа button, чтобы сохранить конфигурацию в Ajax. Если требуется отправить данные формы в сценарий с помощью POST, тип кнопки будет заменен на submit.

Для каждого раздела называется функция создания объекта формы parseGroup:

function parseGroup(innarr)
{
  var initial = '';
  var name = '';
  for(option in innarr)
  {
    switch(option)
    {
      case 'list':
            var garr = innarr[option];
            for(var i = 0; i < garr.length; i++)
            {
              parseGroup(garr[i]);
              form +="<br>";
            }
            break;
      case 'label':
           addLabel(innarr[option]);
           break;
      case 'name':
          name = innarr[option];
          break;
      case 'initial':
           initial = innarr[option];
           break;
      case 'select':
           addSelect(name, initial, innarr[option]);
           break;
      case 'input':
           addInput(name, innarr[option]);
           break;
      case 'checkbox':
           addCheck(name, innarr['checkbox']);
           break;
      default:
           break;
   }
  }
}

Затем для каждого типа тега вызывается функция. Полный сценарий см. в демонстрационном архиве.

Этот сценарий позволяет создать следующий интерфейс:

JavaScript ini

После выбора параметров приложения нажмите кнопку «Обновить» для сохранения конфигурации.

Резервное копирование конфигурации

Тот же алгоритм используется для обновления таблицы конфигурации перед ее резервированием в INI-файл.

Опять же, каждый раздел :

function update(config)
{
  for(group in config)
  {
    updateEntry(config[group]);
  }
}

И для каждого из них доступ к каждому объекту формы осуществляется в соответствии с его идентификатором. Это то, что было назначено атрибуту name в JSON-файле .

function updateEntry(innarr)
{
  var initial = '';
  var name = '';
  var element = null;
  for(option in innarr)
  {
    switch(option)
    {
      case 'list':
            var garr = innarr[option];
            for(var i = 0; i < garr.length; i++)
            {
              updateEntry(garr[i]);
            }
            break;
      case 'name':
            name = innarr[option];
            element = document.getElementById(name);
            break;
      case 'initial':
            initial = innarr[option];
            break;
      case 'select':
            var value = element.options[element.selectedIndex].value;
            innarr['initial'] = value;
            break;
      case 'input':
            innarr['input'] = element.value;
            break;
      case 'checkbox':
            innarr['checkbox'] = element.checked;
            break;
      default:
            break;
    }
  }
}

Поэтому заданные пользователем значения присваиваются атрибутам таблицы, и это зависит от типа объекта формы. Остается сохранить таблицу конфигурации в файле myapp.ini. Функция saveInit связана с кнопкой update.

function done(content) { alert(content); }
function saveIni(filename)
{
  update(config);
  var data = 'url=' + filename + '&data=var config=' + JSON.stringify(config, null, 4);
  AAWrite('saveconfig.php', data, done);
}

Функция AAWrite в легком фреймворке Ajax Anaa называется для выполнения сценария saveconfig.php, к которому отсылается содержимое JSON. Сценарий saveconfig.php сохраняет это содержимое в ini-файле. Вот этот сценарий:

<?php
  $data = $_POST['data'];
  $url  = $_POST['url'];
  $f = fopen($url, 'w');
  fputs($f, $data);
  fclose($f);
  echo "Saved.";
?>

Если использовать JavaScript-Ini для локального приложения с Node.js, вместо фреймворка Anaa вместо него нужно будет использовать WebSocket и включить в страницу интерфейса socket.io.

Загрузить полную демонстрацию Ajax

Список файлов:

JavaScript-ini.html: страница настройки.
javaScript-ini.js - сценарий для генерации интерфейса и сохранения параметров.
anaa.js: фреймворк Ajax.
myapp.ini - файл конфигурации, содержащий таблицу.
saveconfig.php - сценарий резервного копирования конфигурационного файла .