Explore our sites

Stack Exchange
tour help
Tell me more ×
Code Review Stack Exchange is a question and answer site for peer programmer code reviews. It's 100% free, no registration required.
up vote 0 down vote favorite

I am trying to better organize my JavaScript by namespacing, although in the process of refactoring and reorganizing my code I seem to have have made some mistakes and I'm not sure what they are. I'm using CodeKit to lint and minify my code and it's throwing up a lot of errors that don't make sense to me.

(function ($) {

var TTB = {

    // Display browser dimensions
    browserDimensions: function () {
        var slide_width = $('#site-wrapper').width();
        $(window).resize(function () {
            $('.dimensions').html(slide_width);
        });
    };

    // Add line break to headline at breakpoint
    lineBreak: function () {
        if ($(window).width() < 600) {
            $('a.why-different').prepend('<br/>');
        }
    };

    // Display modal on click
    modal: function () {
        $(".submit-modal").click(function () {
            $("#submit-modal").reveal();
        });
    };

    // Scroll To Top on mobile
    scrollToTop: function () {
        $('.scroll-to-top').on('click',function() {
            $('body').animate({scrollTop:0}, 600);
            return false;
        });
    };

    // Replace image source for various breakpoints
    replaceImageSrc: function () {
        var browser_width = $(window).width(),

        device_dimensions = {
            mobile: [320,585],
            mini_tablet: [586,767],
            tablet: [768,1023],
            desktop: [1024,12800];
        },

        mobile_img_src = $('.homepage-featured img, .homepage-news img').data('mobile'),
            mini_tablet_img_src = $('.homepage-featured img, .homepage-news img').data('small-tablet'),
            tablet_img_src = $('.homepage-featured img, .homepage-news img').data('tablet'),
            desktop_img_src = $('.homepage-featured img, .homepage-news img').data('desktop');

        // Mobile check
        if ($.inArray(browser_width, device.dimensions.mobile)) {
            $('.post-image').attr({src: mobile_img_src});
        }
        // Mini Tablet check
        if ($.inArray(browser_width, device_dimensions.mini_tablet)) {
            $('.post-image').attr({src: mini_tablet_img_src});
        }
        // Tablet check
        if ($.inArray(browser_width, device_dimensions.tablet)) {
            $('.post-image').attr({src: tablet_img_src});
        }
        // Desktop check
        if ($.inArray(browser_width, device_dimensions.desktop) {
            $('.post-image').attr({src: desktop_img_src});
        }
    };

    siteOverlay: function () {
        var docHeight = $(document).height();

        $("body").append("<div id='overlay'></div>");

        $("#overlay")
          .height(docHeight)
          .css({
             'opacity' : 0.4,
             'position': 'absolute',
             'top': 0,
             'left': 0,
             'background-color': 'black',
             'width': '100%',
             'z-index': 5000
          });
    };  
}

TTB.browserDimensions();
TTB.lineBreak();
TTB.scrollToTop();
TTB.modal();
TTB.replaceImageSrc();

})(jQuery);
share|improve this question
 
See the FAQ, your code has to be working to be on-topic here. –  Winston Ewert Dec 28 '12 at 23:44
add comment

closed as off topic by svick, Paul, Trevor Pilley, Brian Reichle, Glenn Rogers Dec 28 '12 at 18:55

Questions on Code Review Stack Exchange are expected to relate to code review request within the scope defined by the community. Consider editing the question or leaving comments for improvement if you believe the question can be reworded to fit within the scope. Read more about reopening questions here.If this question can be reworded to fit the rules in the help center, please edit the question.

1 Answer

up vote 1 down vote accepted

Used ; instead of , throughout the root object literal. You are basically doing this:

var obj = {a:1; b:2; c:3}

You must use commas to delimit elements in an object literal.

Extraneous ; at desktop: [1024,12800];

Missing a closing parens in if ($.inArray(browser_width, device_dimensions.desktop) {

If you run into this issue a lot, I have two recommendations:

  1. Remove everything from the insides of the var TTB = {} and remove anything that calls the methods inside it. Then start reinserting the method properties little by little. If there is a syntax error, you'll narrow down where it is much faster.

  2. Avoid using object literals to encapsulate code altogether and if you do insist on using them, make sure to run your code through a parser every minute or two to quickly spot errors. I personally consider them to be a massive anti-pattern because it often turns into a "missing-comma hunt" every single time you reorganize code and it prevents easy debugging because all of your errors happen on a single line (that is, even though the syntax error might occur on line 228 of your massive object, it will show up as a syntax error on "line 3".

This pattern, unfortunately, is gaining a lot of converts because of certain frameworks (such as Backbone.js), but it can almost always be rewritten using an object factory or a plain old module. In your case, you could start with just TTB = {} and then attach your methods/properties using TTB.scrollToTop = function () {/*code*/};. It amounts to exactly the same thing, but it's easier to debug and maintain.

share|improve this answer
add comment

Not the answer you're looking for? Browse other questions tagged or ask your own question.