记录一次多开关多状态状况下结果的设计

最近碰到一个需求,有一个页面有三个认证,这三个认证会变动.就是说可能这期是认证A,认证B,就能够进行下一步.可是下期就变成B,认证C了.需求但愿针对这三个开关作成这样,开关A,开关B,开关C,都有三种状态.1,2,3.1为必须作,2,为选作一个.3为不作.若是三个开关配置成:[1,2,3],那就表明开关A,开关B都要作,开关C不用作.(ps: 选择作一个的是指,若是有两个开关状态都是2,则2选一,若是有3个开关状态为2,则3选一.可是若是只有一个开关状态为2,则这个必须作).进入下一个页面的条件就是,这三个开关必须按照配置项作了.javascript

目前设计的方案为:java

clipboard.png

其中,A,B,C表明三个开关,switch表明开关状态,flag表明开关是否完成.数组

代码实现:数据结构

checkField: function () {
  var flagSwitch = true,
      choiceFlag = true;  
 
//这里a,b,c是为了简单命名的,在这里分别表明含义: 开关A,开关B,开关C
//flag,含义: 是否已经作了开关A,开关B,开关C.statusFlagA,statusFlagB,
//statusFlagC,的取值可能性分别为1,0.(作或者没作)
//switch,含义: 开关获取的结果.switchSet[0]表明开关A获取的结果,switchSet[1]表明开关B获取的结果,switchSet[2]表明开关C获取的结果.
 //定义数据结构.
var obj = {
    a: {
        flag: statusFlagA,
        switch: switchSet[0]
    },
    b: {
        flag: statusFlagB,
        switch: switchSet[1]
    },
    c: {
        flag: statusFlagC,
        switch: switchSet[2]
    }
};
//若是开关数组中有一个是可选,则可选标识choiceFlag置为false.
switchSet.forEach(function (elem) {
    if (elem == 2) {
        choiceFlag = false;
    }
});

//遍历obj,查看obj中数据,进行判断是否显示下一步.
['a', 'b', 'c'].forEach(function (val) {
    if (obj[val].switch == 1) {
        if (!obj[val].flag) {
            flagSwitch = false;
            return false;
        }
    } else if (obj[val].switch == 2) {
        if (!choiceFlag && obj[val].flag == 1) {
            choiceFlag = true;
        }
    }
});
return (flagSwitch && choiceFlag);
},

写到这里,代码实现的核心就完了.ui

翥于2017.9.13简记
相关文章
相关标签/搜索