Skip to main content
Code Review

Return to Question

Tweeted twitter.com/#!/StackCodeReview/status/314915920403369984
added 137 characters in body
Source Link
Thierry Lam
Thierry Lam
  • 177
  • 5

This code is a sample of a much larger web application which repeats more or less of the same interactions between front and backend.

This code is a sample of a much larger web application which repeats more or less of the same interactions between front and backend.

Source Link
Thierry Lam
Thierry Lam
  • 177
  • 5

Is this spaghetti javascript code? How can it be refactored with a javascript library or framework?

The code allows you to select an area from the left column and another area from the right column followed by clicking on the Choose button which sends the chosen areas to the server:

<html>
  <head>
    <style>
    body {
      overflow: hidden;
    }

    article.left {
      overflow: hidden;
      float: left;
    }

    article.left section {
      float: left;
    }

    section {
      border: 1px solid black;
      height: 6em;
      margin-right: 1em;
      width: 4em;
    }

    article.right section {
      border: 1px dashed black;
    }

    section.ice {
      transform:rotate(-90deg);
      -moz-transform:rotate(-90deg); 
      -webkit-transform:rotate(-90deg); 
    }

    article.right {
      float: right;
    }

    section.section-selected, section.right-selected {
      border-color: #EEE;
    }

    input.choose {
      display: none;
    }
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script>
    $(document).ready(function() {
      $('article.left section').click(function() {
        var was_selected = $(this).hasClass('section-selected');
        $('article.left section').removeClass('section-selected');
        if (!was_selected) {
          $(this).addClass('section-selected');
        }
      });

      $('article.right section').click(function() {
        $(this).toggleClass('right-selected');
        if ($('section.right-selected')) { 
          $(this).children('input.choose').toggle();
        }
      });

      $('input.choose').click(function() {
        var section = $('section.section-selected');
        if (section.length) {
          console.log(section.attr('section-id') + ' ' + $(this).attr('location-type'));
          console.log($(this).parents('article').attr('article-id'));
        }
        else {
          console.log('none selected');
        }
      });
    });
    </script>
  </head>
  <body>
    <article article-id="L" class="left">
      <section section-id="A">A</section>
      <section section-id="B">B</section>
    </article>

    <article article-id="R" class="right">
      <section section-id="C"><input type="button" class="choose" location-type="vertical" value="Choose" /></section>
      <section section-id="D" class="horizontal"><input type="button" class="choose" location-type="horizontal" value="Choose" /></section>
    </article>
  </body>
</html>

Here's a link to the jsfiddle http://jsfiddle.net/95WvB/. The code is working fine but I am wondering if the above is what is considered as spaghetti code that so many of those js frameworks like ember or angular are trying to solve. Is it best to use one of those framework to refactor the above code or use backbone?