Skip to main content
added 41 characters in body
Source Link
Mike Brant
  • 9.9k
  • 14
  • 24
function createTransformString(transformConfig) {
    // a variable to store array of individual transform strings
    var transformStrings = [];
    
    // store functions that build strings for each transform type
    // not shown here but you may want to consider ECMA6 templating
    var buildString = {
        rotate: function(rotate) {
            for (dim in rotate) {
                transformStrings.push( 'rotate' + dim + '(' + rotate[dim] + 'deg)';' );
            }
        },
        scale: function(scale) {
            scale.x = scale.x || 1;
            scale.y = scale.y || 1;
            transformStrings.push( 'scale(' + scale.x + ',' + scale.y + ')' ); 
        },
        translate: function(translate) {
            for (dim in translate) {
                transformStrings.push( 'translate' + dim + '(' + translate[dim] + 'px)';' );
            }
        },
        skew: function(skew) {
            skew.x = skew.x || 0;
            skew.y = skew.y || 0;
            transformStrings.push( 'skew(' + skew.x + 'deg,' + skew.y + 'deg)' );
        }
    };   
    
    // iterate the config object to generate strings
    for (transformAction in transformConfig) {
        let transform = transformConfig[transformAction];
        buildString[transformAction](transform);
    }
    return transformStrings.join(' ');
};

Finally, from a stylistic standpoint, I would recommend sticking with camelCase instead of snake_case, as this is pretty much the de facto standard for javascript. At a minimum, don't intermingle the two. Additionally, I would suggest watching your line length. You should strive to keep lines of code under ~80 characters per line to improve code readability.

function createTransformString(transformConfig) {
    // a variable to store array of individual transform strings
    var transformStrings = [];
    
    // store functions that build strings for each transform type
    // not shown here but you may want to consider ECMA6 templating
    var buildString = {
        rotate: function(rotate) {
            for (dim in rotate) {
                transformStrings.push('rotate' + dim + '(' + rotate[dim] + 'deg)';
            }
        },
        scale: function(scale) {
            scale.x = scale.x || 1;
            scale.y = scale.y || 1;
            transformStrings.push('scale(' + scale.x + ',' + scale.y + ')'); 
        },
        translate: function(translate) {
            for (dim in translate) {
                transformStrings.push('translate' + dim + '(' + translate[dim] + 'px)';
            }
        },
        skew: function(skew) {
            skew.x = skew.x || 0;
            skew.y = skew.y || 0;
            transformStrings.push('skew(' + skew.x + 'deg,' + skew.y + 'deg)');
        }
    };   
    
    // iterate the config object to generate strings
    for (transformAction in transformConfig) {
        let transform = transformConfig[transformAction];
        buildString[transformAction](transform);
    }
    return transformStrings.join(' ');
};

Finally, from a stylistic standpoint, I would recommend sticking with camelCase instead of snake_case, as this is pretty much the de facto standard for javascript. Additionally, I would suggest watching your line length. You should strive to keep lines of code under ~80 characters per line to improve code readability.

function createTransformString(transformConfig) {
    // a variable to store array of individual transform strings
    var transformStrings = [];
    
    // store functions that build strings for each transform type
    // not shown here but you may want to consider ECMA6 templating
    var buildString = {
        rotate: function(rotate) {
            for (dim in rotate) {
                transformStrings.push( 'rotate' + dim + '(' + rotate[dim] + 'deg)' );
            }
        },
        scale: function(scale) {
            scale.x = scale.x || 1;
            scale.y = scale.y || 1;
            transformStrings.push( 'scale(' + scale.x + ',' + scale.y + ')' ); 
        },
        translate: function(translate) {
            for (dim in translate) {
                transformStrings.push( 'translate' + dim + '(' + translate[dim] + 'px)' );
            }
        },
        skew: function(skew) {
            skew.x = skew.x || 0;
            skew.y = skew.y || 0;
            transformStrings.push( 'skew(' + skew.x + 'deg,' + skew.y + 'deg)' );
        }
    };   
    
    // iterate the config object to generate strings
    for (transformAction in transformConfig) {
        let transform = transformConfig[transformAction];
        buildString[transformAction](transform);
    }
    return transformStrings.join(' ');
};

Finally, from a stylistic standpoint, I would recommend sticking with camelCase instead of snake_case, as this is pretty much the de facto standard for javascript. At a minimum, don't intermingle the two. Additionally, I would suggest watching your line length. You should strive to keep lines of code under ~80 characters per line to improve code readability.

added 117 characters in body
Source Link
Mike Brant
  • 9.9k
  • 14
  • 24
function createTransformString(transformConfig) {
    // a variable to store array of individual transform strings
    var transformStrings = [];
    
    // store functions that build strings for each transform type
    // not shown here but you may want to consider ECMA6 templating
    var getStringbuildString = {
        rotate: function(rotate) {
            for (dim in rotate) {
                transformStrings.push('rotate' + dim + '(' + rotate[dim] + 'deg)';
            }
        },
        scale: function(scale) {
            scale.x = scale.x || 1;
            scale.y = scale.y || 1;
            transformStrings.push('scale(' + scale.x + ',' + scale.y + ')'); 
        },
        translate: function(translate) {
            for (dim in translate) {
                transformStrings.push('translate' + dim + '(' + translate[dim] + 'px)';
            }
        },
        skew: function(skew) {
            skew.x = skew.x || 0;
            skew.y = skew.y || 0;
            transformStrings.push('skew(' + skew.x + 'deg,' + skew.y + 'deg)');
        }
    };   
    
    // iterate the config object to generate strings
    for (transformAction in transformConfig) {
        let transform = transformConfig[transformAction];
        getString[transformAction]buildString[transformAction](transform);
    }
    return transformStrings.join(' ');
};

Finally, from a stylistic standpoint, I would recommend sticking with camelCase instead of snake_case, as this is pretty much the de facto standard for javascript. Additionally, I would suggest watching your line length. You should strive to keep lines of code under ~80 characters per line to improve code readability.

function createTransformString(transformConfig) {
    // a variable to store array of individual transform strings
    var transformStrings = [];
    
    // store functions that build strings for each transform type
    // not shown here but you may want to consider ECMA6 templating
    var getString = {
        rotate: function(rotate) {
            for (dim in rotate) {
                transformStrings.push('rotate' + dim + '(' + rotate[dim] + 'deg)';
            }
        },
        scale: function(scale) {
            scale.x = scale.x || 1;
            scale.y = scale.y || 1;
            transformStrings.push('scale(' + scale.x + ',' + scale.y + ')'); 
        },
        translate: function(translate) {
            for (dim in translate) {
                transformStrings.push('translate' + dim + '(' + translate[dim] + 'px)';
            }
        },
        skew: function(skew) {
            skew.x = skew.x || 0;
            skew.y = skew.y || 0;
            transformStrings.push('skew(' + skew.x + 'deg,' + skew.y + 'deg)');
        }
    };   
    
    // iterate the config object to generate strings
    for (transformAction in transformConfig) {
        let transform = transformConfig[transformAction];
        getString[transformAction](transform);
    }
    return transformStrings.join(' ');
};

Finally, from a stylistic standpoint, I would recommend sticking with camelCase instead of snake_case, as this is pretty much the de facto standard for javascript.

function createTransformString(transformConfig) {
    // a variable to store array of individual transform strings
    var transformStrings = [];
    
    // store functions that build strings for each transform type
    // not shown here but you may want to consider ECMA6 templating
    var buildString = {
        rotate: function(rotate) {
            for (dim in rotate) {
                transformStrings.push('rotate' + dim + '(' + rotate[dim] + 'deg)';
            }
        },
        scale: function(scale) {
            scale.x = scale.x || 1;
            scale.y = scale.y || 1;
            transformStrings.push('scale(' + scale.x + ',' + scale.y + ')'); 
        },
        translate: function(translate) {
            for (dim in translate) {
                transformStrings.push('translate' + dim + '(' + translate[dim] + 'px)';
            }
        },
        skew: function(skew) {
            skew.x = skew.x || 0;
            skew.y = skew.y || 0;
            transformStrings.push('skew(' + skew.x + 'deg,' + skew.y + 'deg)');
        }
    };   
    
    // iterate the config object to generate strings
    for (transformAction in transformConfig) {
        let transform = transformConfig[transformAction];
        buildString[transformAction](transform);
    }
    return transformStrings.join(' ');
};

Finally, from a stylistic standpoint, I would recommend sticking with camelCase instead of snake_case, as this is pretty much the de facto standard for javascript. Additionally, I would suggest watching your line length. You should strive to keep lines of code under ~80 characters per line to improve code readability.

added 117 characters in body
Source Link
Mike Brant
  • 9.9k
  • 14
  • 24

Usage:

let transformConfig = { ... };
let transformString = createTransformString(transformConfig);

This approach would limit the repeat code you have for each transformation string and would also take care of your if concern in that only those transformation types specified in the config would be executed.

This also more directly injects the transformation configuration information into the function that generates the strings, meaning you no longer have to rely on variables that may or may not be present in inherited scope. This means you could now have your createTransformString() function declared in a wholly separate include file from the code where the actual transformation(s) values are generated, promoting code re-use.

Since you are using ECMA6, I would also consider building this as a class (or classes).

Finally, from a stylistic standpoint, I would recommend sticking with camelCase instead of snake_case, as this is pretty much the de facto standard for javascript.

This approach would limit the repeat code you have for each transformation string and would also take care of your if concern in that only those transformation types specified in the config would be executed.

This also more directly injects the transformation configuration information into the function that generates the strings, meaning you no longer have to rely on variables that may or may not be present in inherited scope.

Since you are using ECMA6, I would also consider building this as a class (or classes).

Usage:

let transformConfig = { ... };
let transformString = createTransformString(transformConfig);

This approach would limit the repeat code you have for each transformation string and would also take care of your if concern in that only those transformation types specified in the config would be executed.

This also more directly injects the transformation configuration information into the function that generates the strings, meaning you no longer have to rely on variables that may or may not be present in inherited scope. This means you could now have your createTransformString() function declared in a wholly separate include file from the code where the actual transformation(s) values are generated, promoting code re-use.

Since you are using ECMA6, I would also consider building this as a class (or classes).

Finally, from a stylistic standpoint, I would recommend sticking with camelCase instead of snake_case, as this is pretty much the de facto standard for javascript.

added 2 characters in body
Source Link
Mike Brant
  • 9.9k
  • 14
  • 24
Loading
added 2 characters in body
Source Link
Mike Brant
  • 9.9k
  • 14
  • 24
Loading
added 74 characters in body
Source Link
Mike Brant
  • 9.9k
  • 14
  • 24
Loading
Source Link
Mike Brant
  • 9.9k
  • 14
  • 24
Loading