js根据不同的选择状态显示不同的内容

Question

根据上面的图，大概逻辑就是开始除第一个select选项可以选择之外，其他所有的元素都是disable状态不可点击
当选择不喝的时候，其余元素依旧不可点击，选择喝之后解锁一些元素比如可以输入每天喝多少酒
当我在是否已戒酒的选项中选择已戒的时候，何时起开始戒酒的Input随之解锁
点击其他的时候最后一个Input解锁

白天功能是很顺利的完成了，但是我觉得我的做法不是很好，我把所有的依赖关系当参数传入了函数

[
  {el:'是否喝酒的select',keywords:'不喝',nodelist:['每天喝多少酒'，'喜欢喝什么酒的radio']}，
{el:'是已戒酒的select'，keywords:'已戒',nodelist:['何时起开始戒酒的Input']}
]

我想问下有什么更高效的方法？

Answer 1

我觉得可以用观察者模式(也可理解为订阅者)来做，因为从需求上来看，是触发一个事件，会导致多个关联实体的状态变化。

 var pubSub = new PubSub();
 
 $喝酒select.addEventListener('change', function() {
    if (喝酒) {
        pubSub.emit('喝酒');
    } else if (不喝){
        pubSub.emit('不喝')；
    }
 })

 pubSub.on('喝酒', function() {
    $喝多少.disabled = false;
    $喜欢喝什么.disabled = false;
 })

pubSub.on('不喝', function() {
    $喝多少.disabled = true;
    $喜欢喝什么.disabled = true;
 })

其他差不多的逻辑，不过感觉也不是很好的办法，

还有一个，如果你用vue这种框架的话，其实可以定义数据状态，然后不同的组件 根据状态来渲染其实也是很方便的。

Answer 2

我想看一下你的函数怎么实现的？为什么说你的函数不高效，这样我们才能去寻找更高效的办法。如果方便，把你实现的函数代码贴一下