最近碰到一个需求,有一个页面有三个认证,这三个认证会变更.就是说可能这期是认证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,则这个必须做).进入下一个页面的条件就是,这三个开关必须按照配置项做了.

目前设计的方案为:

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);
},

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

                                             翥于2017.9.13简记

tonyTang
65 声望1 粉丝

我的生命不过是温柔的疯狂,眼里一片海,我却不肯蓝......