Grow your CSS skills. Land your dream job.

help optimizing code

  • # November 13, 2009 at 10:34 am

    Hello,

    I am trying to learn pure javascript (on top of jQuery which I’m getting much better at)

    I wrote a simple program yesterday, and optimized it further and further as I got it working.

    I am curious if there is any better way to achieve this.

    Code:
    function bcInfantry(pointsCost, movement, fireRange, validTargets, atkDice){
    var soldier={};
    soldier.pointsCost = pointsCost;
    soldier.movement = movement;
    soldier.fireRange = fireRange;
    soldier.validTargets = validTargets;
    soldier.atkDice = atkDice;
    return soldier;
    }

    rifleman = bcInfantry(10, “1IB”, “1AB”, “infantry”, 1);

    heavyGunner = bcInfantry(20, “1IB”, “1AB”, “infantry, lightArmor”, 1);

    sniper = bcInfantry(30, “1IB”, “4AB”, “infantry”, 0);

    demolitions = bcInfantry(30, “1IB”, “1AB: infantry, 3AB: armor”, “infantry, lightArmor, artillery, structures”, 1);

    I created 4 different soldiers, (I was picturing in my head that I could pretend I was making an army game.)
    So I created an object for the Infantry and then made 4 different objects and gave them values. rifleman, heavyGunner, sniper, and demolitions.

    I believe that I will need to revise the data that has multiple parts in the future to be object literals (i.e. demolitions, validTargets are infantry, lightArmor, artillery, and structures.) this should be encapsulated inside another internal object, but for now I just need a simple proof of concept. so…

    I then wanted to display these as divs on a page, so part 2 comes in…

    Code:
    $(function() {

    /* ORIGINAL WAY TO SETUP THE DIV INTERNAL TEXT
    $(“

    “).text(“Rifleman:”).appendTo(“.rifleman”);
    $(“

    “).text(“Points: ” + rifleman.pointsCost).appendTo(“.rifleman”);
    $(“

    “).text(“Movement: ” + rifleman.movement).appendTo(“.rifleman”);
    $(“

    “).text(“Range: ” + rifleman.fireRange).appendTo(“.rifleman”);
    $(“

    “).text(“Targets: ” + rifleman.validTargets).appendTo(“.rifleman”);
    $(“

    “).text(“Dice Rolled for Attack: ” + rifleman.atkDice).appendTo(“.rifleman”);
    */
    /* THIS WAS THE SECOND WAY, NOW I AM CONVERTING IT TO BE MORE DYNAMIC, SO THAT I CAN PASS IN ANY INFANTRY OBJECT AND SETUP THE INNER TEXT FOR THAT DIV.

    for (var key in rifleman) {
    if(rifleman.hasOwnProperty(key)){
    var obj = rifleman[key];
    var k = key;
    var res = ”;

    if(k == “pointsCost”){
    res = “Points: ”
    } else if(k == “movement”){
    res = “Movement: ”
    } else if (k == “fireRange”){
    res = “Range: ”
    } else if(k == “validTargets”){
    res = “Targets: ”
    } else if(k == “atkDice”){
    res = “Dice Rolled for Attack: ”
    }

    $(“

    “).text(res + obj).appendTo(“.rifleman”);
    }

    }
    */

    function soldierText(ob, whichDiv){
    for (var key in ob) {

    if(ob.hasOwnProperty(key)){
    var obj = ob[key];
    var k = key;
    var res = ”;

    if(k == “pointsCost”){
    res = “Points: ”
    } else if(k == “movement”){
    res = “Movement: ”
    } else if (k == “fireRange”){
    res = “Range: ”
    } else if(k == “validTargets”){
    res = “Targets: ”
    } else if(k == “atkDice”){
    res = “Dice Rolled for Attack: ”
    }

    $(“

    “).text(res + obj).appendTo(whichDiv);
    }

    }
    }

    $(“

    “).addClass(“rifleman”).appendTo(“#container”).append(“

    Rifleman:

    “);
    $(“

    “).addClass(“heavyGunner”).appendTo(“#container”).append(“

    Heavy Gunner:

    “);
    $(“

    “).addClass(“sniper”).appendTo(“#container”).append(“

    Sniper:

    “);
    $(“

    “).addClass(“demolitions”).appendTo(“#container”).append(“

    Demolitions:

    “);
    $(“

    “).addClass(“sniper”).appendTo(“#container”).append(“

    Sniper:

    “);
    $(“

    “).addClass(“demolitions”).appendTo(“#container”).append(“

    Demolitions:

    “);
    $(“

    “).addClass(“heavyGunner”).appendTo(“#container”).append(“

    Heavy Gunner:

    “);

    soldierText(rifleman, “.rifleman”);
    soldierText(heavyGunner, “.heavyGunner”);
    soldierText(sniper, “.sniper”);
    soldierText(demolitions, “.demolitions”);

    });

    In the above example, after I got it working, I commented it out, and found a better way to do it, first I used just jquery to create new paragraphs for each property and append them to a div that I created previously. but that approach would require 4 versions of it, (1 for each soldier) and if I ever made more soldier types, or properties, I’d have to update it for each version.

    so round 2, I created a for in statement that looped through and got each name, and value for the members in the rifleman object, then it went through a series of if else statements to "pretty up" the names for display. finally I created a new paragraph for each, and added it to the div. Great! except, that i had to manually make a new copy for each soldier type, which becomes lots of code, even for just 4 soldier types, what if I created another 4 soldier types? way outta hand… round 3…

    this time I wrapped the same code as round 2 in a function which gets passed the object, and the classname (as a sting i.e. ".rifleman") then I dynamically insert the object in all of the places that I manually did before. Then the classname for jquery to appendTo the div populates dynamically from the second parameter passed in.

    Then I created the divs (with jQuery) and called the function for each soldier type. one line per soldier type is easier than copying and pasting a bunch and replacing the same reference in multiple places.

    I’d like to know if there is a better way to do this… again it’s not so much for a real world solution, just for learning purposes.

    Here is the page where you can see it live in action.

    http://tampa.dingledoodle.com/

    # November 14, 2009 at 1:15 pm

    I’ve made it a little bit more dynamic even…

    Code:
    jQuery.each(allSoldierTypes, function(k, v) {
    //console.log(v);
    jQuery.each(v, function(keys, vals) {

    $(‘

    “‘).appendTo(“.” + k).text(“keys: ” + keys + ” Vals: ” + vals);

    });
    });

    This uses jQuery to do the looping via jQuery.each(); I created a new object literal called allSoldierTypes, which uses the name of the solider object as its name, and the object itself as it’s value, for example, demolitions: demolitions
    First I loop through each soldier type, as that is looping i use it’s key to populate another loop with the current soldier type’s name. this loop goes through each attribute of the soldier, and creates paragraphs and appends them inside the proper div…

    not sure how much more dynamic i could get…

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".