How to reorganize conditional logic in javascript?

I have inherited a fairly large JavaScript application (MooTools) to view and configure products.

It has a feature that monitors the configured status of products. Other functions are called depending on the state of the product.

I expanded it to add some new features, but ended up with a mess of nested conditional expressions inside a large switch statement.

My question is: how do you use conditional refactoring logic? Is there a generic (or JS-specific) pattern / method for tracking state?

Update: here is the pseudo version of the function to illustrate the problem:

switchToVariation: function(link) {

  // set the variables      
  // before switch, set state    

  switch ( nextType ) {   
    case 'type1':
      if ( prevType == 'type1' ) {        
        if ( nextIsSameVariation ) {            
          // do stuff                                           
        } else {                                                                              
          if ( nextIsSomethingElse ) {              
            // do stuff
          }          
          // more stuff                      
        }
      } else {        
        // different stuff        
      }
      break;

    case 'type2':        
      if ( prevWasType1 ) {
        // stuff
      } else {
        if (nextIsSameStyle) {
          // stuff
        }
        // more stuff
      }    
      break;    

    default:                       
      // default stuff        
  }          

  // after switch, set state

}
+3
2

, , : , .

, , , "... switch...", : .

, : , , , , , . , — — , " ".

, :

function myBigFunction() {
    var v1, v2, v3;

    /* ...set v1, v2, and v3 to various things...*/

    switch (condition) {
        case foo:
            /* ...do lots of stuff involving v1 and v2...*/
            break;

        case bar:
            /* ...do lots of stuff involving v1 only...*/
            break;

        case charlie:
            /* ...do lots of stuff involving v2 and v3...*/
            break;
    }
}

:

: :

function myBigFunction() {
    var v1, v2, v3;

    /* ...set v1, v2, and v3 to various things...*/

    switch (condition) {
        case foo:
            doFooStuff(v1, v2);
            break;

        case bar:
            doBarStuff(v1);
            break;

        case charlie:
            doCharlieStuff(v2, v3);
            break;
    }
}

function doFooStuff(v1, v2) {
}

function doBarStuff(v1) {
}

function doCharlieStuff(v2, v3) {
}

... , , , , , , :

    case foo:
        v1 = doFooStuff(v1, v2);
        break;

... doFooStuff v1. v1 v2, v1 v2 , doFooStuff, .. : v1 v2 (vdata), v1 v2:

var vdata = {
    v1: "someInitialValue",
    v2: "someInitialValue"
};

... doFooStuff:

    case foo:
        doFooStuff(vdata);
        break;

..., doFooStuff v1, v2. , myBigFunction, .

: :

function myBigFunction() {
    var v1, v2, v3;

    /* ...set v1, v2, and v3 to various things...*/

    switch (condition) {
        case foo:
            doFooStuff();
            break;

        case bar:
            doBarStuff();
            break;

        case charlie:
            doCharlieStuff();
            break;
    }

    function doFooStuff() {
        // work with v1 and v2 directly
    }

    function doBarStuff() {
        // work with v1 directly
    }

    function doCharlieStuff() {
        // work with v2 and v3 directly
    }
}

, myBigFunction, myBigFunction. , . , : .

, , . , , .

+3

.

, Java , JavaScript. , , .

+2

Source: https://habr.com/ru/post/1765963/


All Articles