混合Javascript和HTML与可维护代码

Question

我有一个包含100多个表单控件的表单。我的问题是表单需要非平凡的逻辑来确定隐藏，显示，禁用等的表单控件。现在我在几个事件处理程序中有几个if-then-else结构，这是维护/更新的噩梦。我一直在研究AngularJS，并认为我可以在基于JQuery的表单中使用类似ng-hide的东西。为了清楚起见，我不想切换到AngularJS。

我的主要问题是：这是一种使用eval()的安全方式吗？有没有更好的方法来实现我的目标，同时牢记可维护性？

HTML

 <button type="button" ng-show="_isRefill" value="">Test1</button>
 <button type="button" ng-show="_hasChanges || _isRefill" value="">Test2</button>

JQuery的

function test()
{

  var _isRefill = true;
  var _hasChanges = false;  

  //There about 10 of these Booleans that control what to show/hide/etc
  //Each DOM element could have it's own unique combination of 10 Booleans that control it  
  //Note that Button #2 has logic in the HTML markup 

  var $this = $(this);

  if( !eval($this.attr('ng-show')) )
    $this.addClass('ignore');
  else 
    $this.removeClass('ignore');

}

$('button').on('click',test);

ng-show属性中的代码是从服务器回显的，所以我不认为我会遇到XSS问题，但我可能错了。

我考虑使用像观察者模式这样的东西，但我不想创建和跟踪大量的ID。此外，我的很多DOM元素都是动态生成的，这会使主题列表难以维护。

修改

以下是表单的示例用例。我在不同的状态下截取了表格的同一部分。

案例1 标有“＆＃34;”的单选按钮，这是一个弃权＆＃34;和＃34;不，这不是弃权＆＃34;确定是否＆＃34;豁免电子邮件＆＃34;和＆＃34;商业案例＆＃34;显示。

案例2 用户选择Refill，With Changes，Temporary（TMP），然后允许从案例1中选择显示/隐藏豁免部分的选项。

案例3 用户选择新位置，间歇和豁免部分被强制为是并锁定。

这些是相当简单的情况，但通常页面下方的其他表单控件可以显示/隐藏/禁用整个部分或单个表单控件。正如您所看到的，有些情况下显示/隐藏每个控件都有异常和重叠的情况。

Answer 1

复制AngularJS库的一部分是一种独特的可能性，您甚至可以通过使用JQuery选择具有ng-show属性的所有元素并添加事件侦听器来添加和删除类来进行概括。

但你必须考虑是否值得重新发明一个非常漂亮，闪亮的轮子的一部分，这肯定会给你你后来的结果。可维护性通常来自创建或使用框架，例如Angular JS（我更喜欢React），可以在您尝试创建特定内容之前一次又一次地重复使用。