SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast
    Join Date
    Apr 2010
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Alternatives to eval()?

    In my current project, I'm working on my new portfolio site. I'm using the jQuery scrollTo plugin to scroll the page, but to make sure it didn't go too fast in certain places I passed it a speed for each type of link. To keep my markup looking clean, I aliased the speeds as variables within the code. The code looked like this:


    HTML Code:
    $(".navigation a").click(function(){
    		var slow = 4500;
    		var normal = 2500;
    		var fast = 1700;
    		$.scrollTo($(this).attr('href'), eval($(this).attr('rel')),{easing:'easeInOutQuint'});
    		return false;
    	});
    and then the links looked kind of like this:

    HTML Code:
    <a href="#contact-me" rel="slow">contact me</a>
    I used eval() to make JavaScript recognize the rel attribute as being a variable and not a string, but I've been reading everywhere that eval() is "evil". Is this a bad place to use it? If so, why? What could I use instead?

    Thanks for the help!

  2. #2
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    This is a terrible use of eval.

    There is no reason why your code shouldn't be this:

    Code javascript:
    $(".navigation a").click(function(){
      var speed = $(this).attr('rel');
      if (speed === 'slow') speed = 4500;
      else if (speed === 'fast') speed = 1700;
      else speed = 2500;
      $.scrollTo($(this).attr('href'), speed, {easing:'easeInOutQuint'});
      return false;
    });

    In any case, this is an unsuitable use of the "rel" attribute as well. You might as well use a class name, and then just apply this transition to things with the class name.

  3. #3
    SitePoint Enthusiast
    Join Date
    Apr 2010
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It should be that. However, when I do it that way the JavaScript thinks I'm trying to tell the scrollTo duration to be "slow" instead of 2500. It doesn't recognize that "slow" is a variable unless I use eval.

    At first, the scroll was default speed so I tried to figure out what was going on by alerting $(this).attr('rel'). Initially it would do this:

    HTML Code:
    alert($(this).attr('rel'));
    // alerts: "slow"
    once I used eval it did this:

    HTML Code:
    alert(eval($(this).attr('rel')));
    // alerts: "2500"
    So what I mean by "rel" is a variable and not a string is that I used eval to get the JavaScript to see that $(this).attr('rel') is referencing a variable value and not the literal interpretation of the rel value.

    edit in reply to your edit: Yeah that probably wasn't a good use of rel. I do think I'll switch it to a class name. Thanks for the advice!

  4. #4
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I edited my post - see above.

  5. #5
    SitePoint Enthusiast
    Join Date
    Apr 2010
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I edited mine as well.

    As a personal preference, I don't really like using if statements where I feel like I don't need to. That's why originally I wanted to pass the variable directly.

    While I'll probably end up doing as you've shown above, would you mind explaining to me why using if statements to set the speed variable is better than setting a variable through an html attribute?

  6. #6
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Via the if statemenets, I only declared one variable ("speed") whereas you were declaring three (slow, fast, normal). The number of lines of code is only one more, so no big deal. And above all, the main advantage is not having to use eval! There are other ways you could have done it, like using an object literal or a switch() statement, but I think the if statement method is still simpler when you only have three possible values. If there had been four or more, then I would probably have done something else, like use an array or an object literal.

  7. #7
    SitePoint Enthusiast
    Join Date
    Apr 2010
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you! That explanation is very helpful. I'll go see what I can do with my code.


Bookmarks

Posting Permissions

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