How to start with OOP Javascript

Question

i've been learning Javascript like for 8 months right now, 5 months ago i found job as a Front End developer and i've been getting envolved more deeply in javascript, that's a thing I love. Recently I noticed that my code looks so ugly because were a bunch of functions and global variables, so I started reading a little bit about design patterns. Now i come with something is working for me but I am not sure if is a good practice, anyway i would like you guys to take a look on the code and tell me what can I improve and what is the better way to star using modular pattern in javascript, also if you can suggest me some material to learn about modular pattern and Javascript.

JAVASCRIPT CODE:

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();   
});

Stack Overflow has a sister site dedicated entirely to Code Review. I suggest you post this question in it, as it's more on topic there. — Geeky Guy
– Geeky Guy, Commented Sep 2, 2013 at 20:30

Krasimir · Accepted Answer · 2013-09-02 20:46:06Z

1

What you have is not so bad. However I don't like that you use Singletons. It's good that you separated responsiveModule and tooltipModule, but I'll suggest to use the revealing module pattern (it's kinda favorite for me):

var ResponsiveModule = function() {

    var settings = {
        // ...
    };

    var init = function() {
        checkDevice();
        replaceImages();
        bindFunctions();
        listenResize();
    }
    var checkDevice = function() {}
    var bindFunctions = function() {}
    var animateMenu = function() {}
    var replaceImages = function() {}
    var listenResize = function() {}

    return {
        init: init
    }

}

var responsiveModule = ResponsiveModule();
responsiveModule.init();

You are able to create as many instances as you want from that module. And you have private scope.

That's one of the best books for design patterns in javascript: http://addyosmani.com/resources/essentialjsdesignpatterns/book/

Here are few toughts from me about JavaScript: http://krasimirtsonev.com/blog/article/JavaScript-is-cool-modular-programming-extending

answered Sep 2, 2013 at 20:46

Krasimir

13.6k4 gold badges45 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jhonnatan Gonzalez Rodriguez Over a year ago

Hey! I will read the book and also going to add your blog to my bookmarks thank you for answering so fast. When you talk about create a new instance of my module you refer to the use of prototype or just using something like var responsiveModule2 = ResponsiveModule();...sorry if my question is so dumb, i dont have engineering background education, so for me it is difficult to understand and I need a lot of research on every topic :p

Krasimir Over a year ago

Yep, that's what I meant. The thing which you use is actually the object + its scope returned by the ResposiveModule function. Calling this method several times will return different objects.

Collectives™ on Stack Overflow

How to start with OOP Javascript

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related