Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript help optimizing code

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #26746
    blue642
    Member

    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/

    #66552
    blue642
    Member

    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)
  • The forum ‘JavaScript’ is closed to new topics and replies.