JavaScript中基于配置的隐藏显示规则处理器

我正在开发一个基于其他DOM元素进行DOM隐藏和显示的库

我已经为图书馆写了一个基本结构

下面是在选中和取消选中复选框时处理隐藏DOM元素的代码

我的总体目标是使这个库具有可扩展性和可维护性

我是否遵循可靠的原则？有没有更好的办法？有什么设计模式可以遵循吗

// basic data structure of config object
var rules = [
  {
    sourceId: 'mainCheckbox',
    targetId: 'exampleDiv1',
    ruleType: 'onlyOnChecked',
    targetVisibilityOnChecked: 'hide', // show / hide
    targetVisibilityOnUnchecked: 'show',
    doNotReset: false
  }
]

var ruleToProcessorMap = {
  onlyOnChecked: OnlyOnCheckedRuleProcessor
}

var RuleEngine = {}

RuleEngine.run = function(rules) {
  var ruleIndex
  for (ruleIndex = 0; ruleIndex < rules.length; rules++) {
    this.processRule(rules[ruleIndex])
  }
}

RuleEngine.processRule = function(ruleObj) {
  var ruleProcessor = new ruleToProcessorMap[ruleObj.ruleType](ruleObj)
  ruleProcessor.process()
}

function OnlyOnCheckedRuleProcessor(options) {
  this.options = options || {}
}

OnlyOnCheckedRuleProcessor.prototype.process = function() {
  var $sourceId = $id(this.options.sourceId),
    ctx = this

  $sourceId.on('click', onSourceClick)

  function onSourceClick() {
    var elementVisibilityHandler = new ElementVisibilityHandler({
        elementId: ctx.options.targetId,
        doNotReset: ctx.options.doNotReset
      }),
      show = elementVisibilityHandler.show,
      hide = elementVisibilityHandler.hide

    var visibilityMap = {
      show: show,
      hide: hide
    }

    var onCheckedFunc = visibilityMap[ctx.options.targetVisibilityOnChecked]
    var onUncheckedFunc = visibilityMap[ctx.options.targetVisibilityOnUnchecked]

    if ($sourceId.is(':checked')) {
      onCheckedFunc.call(elementVisibilityHandler)
    } else {
      onUncheckedFunc.call(elementVisibilityHandler)
    }
  }
}

function ElementVisibilityHandler(options) {
  this.options = options || {}

  this.$element = $id(options.elementId)
}

ElementVisibilityHandler.prototype.show = function() {
  if (isContainerElement(this.$element)) {
    if (this.options.doNotReset) {
      simpleShow(this.$element)
    } else {
      showWithChildren(this.$element)
    }
  }
}

ElementVisibilityHandler.prototype.hide = function() {
  if (isContainerElement(this.$element)) {
    if (this.options.doNotReset) {
      simpleHide(this.$element)
    } else {
      hideAndResetChildren(this.$element)
    }
  }
}

function simpleHide($element) {
  return $element.hide()
}

function hideAndResetChildren($element) {
  var $children = simpleHide($element)
    .children()
    .hide()

  $children.find('input:checkbox').prop('checked', false)

  $children.find('textarea, input').val('')
}

function simpleShow($element) {
  return $element.show()
}

function showWithChildren($element) {
  simpleShow($element)
    .children()
    .show()
}

function $id(elementId) {
  return $('#' + elementId)
}

function isContainerElement($element) {
  if (typeof $element === 'string') {
    $element = $id($element)
  }

  return $element.prop('tagName').toLowerCase()
}

// execution starts here
RuleEngine.run(rules)

//配置对象的基本数据结构
风险值规则=[
{
sourceId:“mainCheckbox”，
targetId:'exampleDiv1'，
规则类型：“onlyOnChecked”，
targetVisibilityOnChecked:'隐藏'，//显示/隐藏
TargetVisibility未选中：“显示”，
doNotReset:错
}
]
变量ruleToProcessorMap={
onlyOnChecked:OnlyOnCheckedRuleProcessor
}
var RuleEngine={}
RuleEngine.run=函数（规则）{
var规则索引
for（ruleIndex=0；ruleIndex

我认为这个问题应该发布到我认为这个问题应该发布到