www.webdeveloper.com
Results 1 to 4 of 4

Thread: Why do some JS apps use object property loops to do?

Hybrid View

  1. #1
    Join Date
    Dec 2008
    Posts
    488

    Question Why do some JS apps use object property loops to do?

    Code:
    function setStyle(elem, styles) {
        var property;
        for (property in styles) {
            elem.style[property] = styles[property];
        }
    }
    
    setStyles(document.getElementById('db_getMessage'), {
        "background" : "#FCC url(/photos/warning.jpg) top left no-repeat",
        "border" : "2px solid #C99",
        "fontFamily" : "Arial, Verdana, \"Trebuchet MS\"",
        "fontSize" : "11pt",
        "color" : "#333",
        "display" : "block"
    });
    Why couldn't you just do this?
    Code:
    var elem = document.getElementById('db_getMessage');
    elem.style.background = "#FCC url(/photos/warning.jpg) top left no-repeat";
    elem.style.border = "2px solid #C99";
    elem.style.fontFamily = "Arial, Verdana, \"Trebuchet MS\"";
    elem.style.fontSize = "11pt";
    elem.style.color = "#333";
    elem.style.display = "block";
    Don't you get the prototype overhead when sending objects to functions like this? I know the second one accomplishes the same thing but does it directly. The first one is more organized and ::LOOKS:: like better code, but what are the benefits to doing it that way? I would think it would charge more processing time.

    Can someone give me an example where this would be more useful and efficient besides using it to set css properties as above?

    Thanks

  2. #2
    Join Date
    Dec 2008
    Posts
    488
    Title correction: "Why do some JS apps use object property loops to perform tasks?

  3. #3
    Join Date
    Jan 2010
    Posts
    11
    The real danger with for in loop is probably more that you risk dredging up things that were augmented into the prototype chain but not of interest if you are basically using it as a way to enumerate relevant properties.

    In this context, one of the advantages of this would be that if you had to rearrange your CSS structure, you could just do so in some set place and pass it into the function argument... so instead of like this:-

    setStyles(document.getElementById('db_getMessage'), {
    "background" : "#FCC url(/photos/warning.jpg) top left no-repeat",
    "border" : "2px solid #C99",
    "fontFamily" : "Arial, Verdana, \"Trebuchet MS\"",
    "fontSize" : "11pt",
    "color" : "#333",
    "display" : "block"
    });

    WE might declare:-

    var styletemplate = {
    "background" : "#FCC url(/photos/warning.jpg) top left no-repeat",
    "border" : "2px solid #C99",
    "fontFamily" : "Arial, Verdana, \"Trebuchet MS\"",
    "fontSize" : "11pt",
    "color" : "#333",
    "display" : "block"
    };

    Then modify it even before passing it into various functions of interest:-

    styletemplate.border = "3px solid #D99"; //change relevant values
    setStyles(elem,styletemplate);//call setter

    But in this case setting style element properties individually like this can cause performance issues of its own kind. The browser often has to reflow the layout when you set properties so when you set 6 different properties successively, as both examples here do, that can cause 6 reflows.

    The suggested method these days is to think about having pre teplated CSS classes or building CSS classes on the fly and assigning them as the class wholesale. Then the browser can take it all in at once, set all the propreties and then reflow once instead of 6 times. It also can eliminate hairness of having javascript sort of just set properties direclty all over the place, which makes you not only know the class which is binded but also worry about the computed value when you're debugging and such. Hope that made sense.

  4. #4
    Join Date
    Jul 2008
    Location
    urbana, il
    Posts
    2,787
    Quote Originally Posted by jamesbcox1980 View Post

    Why couldn't you just do this?
    Code:
    var elem = document.getElementById('db_getMessage');
    elem.style.background = "#FCC url(/photos/warning.jpg) top left no-repeat";
    elem.style.border = "2px solid #C99";
    elem.style.fontFamily = "Arial, Verdana, \"Trebuchet MS\"";
    elem.style.fontSize = "11pt";
    elem.style.color = "#333";
    elem.style.display = "block";
    that may be better for 'db_getMessage', but what if i have 'db_getMessage01' - 'db_getMessage85' ?

    performance often takes a backseat to simplicity, convenience, and re-usability.
    considering how much faster today's browsers are than those of even a year or two ago, i think it makes sense to put performance on the development backburner.
    i second the notion that classes are a more efficient inheritable way to apply groups of styles.
    Last edited by rnd me; 02-20-2010 at 12:54 AM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles