記錄一次多開關多狀態狀況下結果的設計

最近碰到一個需求,有一個頁面有三個認證,這三個認證會變動.就是說可能這期是認證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,則這個必須作).進入下一個頁面的條件就是,這三個開關必須按照配置項作了.

目前設計的方案爲:

其中,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簡記