Responsive module and tooltip module

Question

Recently, I've noticed that my code looks so ugly because there were a bunch of functions and global variables. So, I started reading a little bit about design patterns. Now I come with something that's working for me, but I am not sure if it's good practice.

Anyway, I would like you to take a look at the code and tell me what can I improve. I'd also like to know a better way to start using modular pattern in JavaScript. Finally, I'd like suggestions on material for learning about modular pattern and JavaScript.

var responsiveModule = {

    settings: {
        device: false,
        button: $(".responsive-btn"),
        target: $("nav ul"),
        mobileClass: "toggle-menu",
        bgImage: '<img class="background-image" src="img/background.jpg" alt="">',
        bgImageSelector: $(".background-image"),
        windowWidth: $(window).width(),

    },

    init: function(){
        responsiveModule.checkDevice();
        responsiveModule.replaceImages();
        responsiveModule.bindFunctions();
        responsiveModule.listenResize();
    },

    checkDevice: function(){
        if(this.settings.windowWidth > 992){
            this.settings.device = "desktop";

        } else {
            this.settings.device = "mobile";
        }
    },

    bindFunctions: function(){
        var buton = this.settings.button,
            muelleBtn = this.settings.muelleBtn;
        buton.on("click touchstart", function(e){
            e.preventDefault();
            responsiveModule.animateMenu(responsiveModule.settings);
        });
    },

    animateMenu: function(settings){
        var device = settings.device,
            target = settings.target,
            mobileAnimation = settings. mobileClass;

        if(device == "mobile"){
            target.toggleClass(mobileAnimation);
        }
    },

    replaceImages: function(){
        var bgContainer = $("#main-content"),
            bgImage = responsiveModule.settings.bgImage,
            device = responsiveModule.settings.device,
            backgroundSelector = $(".background-image");

        if(device == "desktop" && backgroundSelector.length == 0){
            bgContainer.append(bgImage);
        }else if(device == "mobile" && backgroundSelector.length == 1){
            backgroundSelector.remove();
        }
    },

    listenResize: function(){
        $(window).on("resize", function(){
            responsiveModule.checkDevice();
            responsiveModule.replaceImages();
            responsiveModule.settings.windowWidth = $(window).width();
        });
    }


}

var tooltipModule = {

    settings: {
        tooltipState: false
    },

    init: function(){
        tooltipModule.bindUIfunctions();
    },

    bindUIfunctions: function(){
        var device = responsiveModule.settings.device;
        if(device == "mobile"){
            $(".ship").on("click", function(e){
                e.preventDefault();
                tooltipModule.manageTooltip(e);
            });
        }else{
            $(".muelle-item").addClass("desktop");
        }
    },

    manageTooltip: function(e){
        var tooltip = $(e.currentTarget).next(),
            tooltips = $(".tooltip");

        tooltips.removeClass("display");
        tooltip.addClass("display");
    }


}


$(document).on("ready", function(){
    responsiveModule.init();
    tooltipModule.init();   
});

Answer 1

The best pattern to start "OOP" in JavaScript is the Revealing Pattern:

var revealed = function(){
   var a = [1,2,3];
   var abc = function(){
     return (a[0]*a[1])+a[2];
   }

   return {
      name: 'revealed',
      abcfn: abc
   }
}();

From here.

Then read this book.

And learn RequireJS, which will increase the modularity of your code and will load your JS files on demand.

I see you are using JS for create HTML elements. To help you with this, take a look at UnderscoreJS templates and Mustache.

Answer 2

Bad idea. JavaScript is prototype-based, not object-oriented. Embrace it!

• I would strongly advice you this book as well as his blog.

• Mess around with a REPL (nodejs / chrome dev tools), try to understand the unexpected or surprising behaviours.

• I found it useful sometimes to take a look at how your code is actually parsed, you can do this very easily online with the Esprima project.

• Make sure you completely understand how the prototype chain, functions and type coercion work, they are, imo, the core concepts in javascript.

• Get familiar with things such as IIFE (immediately invoked function expressions), scoping rules, etc.

Answer 3

Don't, just don't.

JavaScript is not an OO language, it is a prototype language, something a lot of people tend to forget.

There are no 'classes' or 'interfaces' in javascript. Everything is an object. Even a function is an object.

So how do JavaScript Objects work? what is 'this'? and what does 'new' do? A good place to start is understanding Scope and context.

So, what are JavaScript objects? Again there is a good article.

Once you understand that and you still feel like writing OO Js. There are tons of frameworks out there that pretend to be OO, my personal favorite MooTools. These frameworks give you an interface to write OO-like code. But then again, in big applications that code tends to get slow, leak memory, since we forget how prototypes really work and what the 'new' operator means.

---

Let's recap and go back to your question. Your real problem is that your code is becoming hard to read.

So you are looking for a certain pattern in JavaScript to help in maintaining your code. My favorite pattern is the Module Pattern, but there are many more very strong patterns for JavaScript.