在应用程序中编码设置UI的一般模式

Question

看，我知道标题不好。如果我想到一个好的，我可能已经谷歌搜索并发现了一些东西。所以，如果你有更好的标题，请帮我编辑它。 ：）

我实际上不确定这个问题在程序员SE上是否更好，但无论如何：

我的情况：

我正在使用nw.js构建一个桌面HTML5应用，所以我在这里使用JS作为我的编程语言。随着我在扩展应用程序方面取得进展，我发现我在设置界面中对查找和验证值进行硬编码的方式确实很糟糕并不是很好。我是自学而不是在大学学习，所以我没有学过任何编程理论所以请耐心等待。 ：（

我当前应用设置界面的演示

请注意，代码中的以下JS与我的问题并不完全相关。它们仅用于为UI提供动力。

$.fn.extend({
  dropdown: function(cb) {
    this.each(function() {
      var $drop = $(this);
      $drop.find("a").bind("click", function() {
        var selected = $(this).text();
        $drop.find(".selected").text(selected);
        $drop.attr("data-selected", selected.toLowerCase());
        if (typeof cb === "function") {
          cb.call($drop, selected.toLowerCase());
        }
      });
    });
    return this;
  },
  dropdownVal: function(v) {
    var $drop = $(this).first();
    if ($drop.hasClass("dropdown")) {
      if (v !== undefined) {
        v = String(v);
        var c = String(v + " ")[0].toUpperCase() + v.substring(1, v.length);
        $drop.attr("data-selected", v);
        $drop.find(".selected").text(c);
      } else {
        if ($drop.data("selected") !== undefined) {
          return $drop.attr("data-selected");
        } else {
          return $drop.find(".selected").text();
        }
      }
    } else {
      return undefined;
    }
  }
});
$(function() {
  $(".dropdown").dropdown(function(s) {
    if (s === "custom") {
      $(this).closest(".form-group").find(".custom").fadeIn();
    } else {
      $(this).closest(".form-group").find(".custom").fadeOut();
    }
  });
  $("#options-ratio-dropdown").dropdown();
  $("#options-dimension-dropdown").dropdown();
  $("#options-max-length-dropdown").dropdown();
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<h1>This snippet is just to demo my structure and UI, not code!</h1>
<h4> General Settings</h4>
<div class="form-group">
  <label>Ratio</label>
  <div class="row">
    <div class="col-xs-4">
      <div class="dropdown" id="options-ratio-dropdown">
        <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
          <span class="selected">Original</span>
          <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
          <li><a>Original</a>
          </li>
          <li><a>4:3</a>
          </li>
          <li><a>16:9</a>
          </li>
          <li><a>Custom</a>
          </li>
        </ul>
      </div>
    </div>
    <div class="col-xs-8 form-horizontal custom" id="options-ratio-custom" style="display:none;">
      <label class="col-xs-4 control-label">Custom:</label>
      <div class="ratio-input col-xs-8">
        <div class="col-xs-5">
          <input type="text" class="form-control number-input ratio-1">
        </div>
        <div class="col-xs-2 colon">
          <span>:</span>
        </div>
        <div class="col-xs-5">
          <input type="text" class="form-control number-input ratio-2">
        </div>
      </div>
    </div>
  </div>
</div>
<div class="form-group">
  <label>Width of Dimension</label>
  <div class="row">
    <div class="col-xs-4">
      <div class="dropdown" id="options-dimension-dropdown">
        <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
          <span class="selected">Original</span>
          <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
          <li><a>Original</a>
          </li>
          <li><a>800</a>
          </li>
          <li><a>Custom</a>
          </li>
        </ul>
      </div>
    </div>
    <div class="col-xs-8 form-horizontal custom" style="display:none;">
      <label class="col-xs-4 control-label">Custom:</label>
      <div class="input-group col-xs-8">
        <input type="text" class="form-control number-input" id="options-dimension-custom-input">
        <span class="input-group-addon">px</span>
      </div>
    </div>
  </div>
</div>
<div class="form-group">
  <label>GM Writing Thread Limit</label>
  <div class="row">
    <div class="col-xs-4">
      <input type="text" class="form-control number-input" id="options-gm-writing-thread-limit-input" value="5" placeholder="Default: 5">
    </div>
  </div>
</div>
<button type="button" id="#options-save-btn" class="btn btn-default">Save</button>

这就是我目前处理点击#options-save-btn：

的方式

$("#options-save-btn").click(function(){
    var fail = false,
        tsettings = {}; //temp settings object
    if ($("#options-ratio-dropdown").dropdownVal() === "custom") { //dropdownVal is my own extended method and it does work
        if (isNaN($("#options-ratio-custom .ratio-1").val()) || isNaN($("#options-ratio-custom .ratio-2").val()) || $("#options-ratio-custom .ratio-1").val() == 0 || $("#options-ratio-custom .ratio-2").val() == 0) {
            fail = true;
            alert("<b>Error: Both numbers in a ratio cannot be non-integer or 0</b>");
        } else {
            tsettings["ratio"] = $("#options-ratio-custom .ratio-1").val() + ":" + $("#options-ratio-custom .ratio-2").val();
        }
    } else {
         tsettings["ratio"] = $("#options-ratio-dropdown").dropdownVal();
    }
    //Repeating if...else for every settings manually
    //Some awkward hard code for the few checkboxes
    tsettings["specialMode"]["isMode"] = $("#options-special-mode").is(":checked");
    if(!fail) {
        for(key in tsettings) {
            settings[key] = tsettings[key];//Transfer temp settings to real settings object
        }
        if (saveSettings()) {//My own function for saving settings locally into a json
            changeLayout();//done
        }
    }
})

问题

正如您所看到的，每个设置的每个验证都是手工编写的，并且我觉得这不是为任何应用进行“设置”的正确方法。

我的想法

我知道必须有一种更好的方法，一种更自动化的方式让程序迭代设置UI，只需获取值并运行预设验证功能，如checkFileNameLegal，isPercentage，{{ 1}}等，并将它们设置为checkPathLegal作为设置输入的包装。这就是我对如何改进我的应用程序的想法。 但其他人如何进行设置？就像Windows在其控制面板中如何做到这一点？！

我尝试过谷歌搜索，但似乎我的关键字不对。 制作设置界面的一般做法是什么，或者使JS中的保存部分更自动化，更容易添加新设置项？

我现在已经读了几遍我的问题，我觉得很难解释:(，如果您在理解我的问题时遇到任何问题，请在下面发表评论，我会提供更多信息。