如何从OOP Javascript开始

我现在已经学习Javascript 8个月了，5个月前我找到了一份前端开发人员的工作，我对Javascript有了更深的了解，这是我喜欢的事情。最近我注意到我的代码看起来很难看，因为有一堆函数和全局变量，所以我开始读一些关于设计模式的书。现在我带了一些对我有用的东西，但我不确定这是否是一个好的实践，无论如何，我想让你们看看代码，告诉我我可以改进什么，在javascript中使用模块模式的更好方法是什么，如果你能向我推荐一些学习模块模式和javascript的材料的话

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

var响应模块={
设置：{
设备：错误，
按钮：$（“.responsive btn”），
目标：$（“nav ul”），
mobileClass：“切换菜单”，
bgImage:“”，
bgImageSelector:$（“.background image”），
windowWidth:$（窗口）.width（），
},
init:function（）{
responsiveModule.checkDevice（）；
responsiveModule.replaceImages（）；
responsiveModule.bindFunctions（）；
responsiveModule.listenResize（）；
},
checkDevice:function（）{
如果（this.settings.windowWidth>992）{
this.settings.device=“桌面”；
}否则{
this.settings.device=“移动”；
}
},
bindFunctions:function（）{
var buton=this.settings.button，
muelleBtn=this.settings.muelleBtn；
buton.on（“单击触摸启动”，功能（e）{
e、 预防默认值（）；
responsiveModule.animateMenu（responsiveModule.settings）；
});
},
animateMenu：功能（设置）{
var device=settings.device，
target=settings.target，
mobileAnimation=settings.mobileClass；
如果（设备==“移动”）{
target.toggleClass（mobileAnimation）；
}
},
replaceImages:function（）{
var bgContainer=$（“#主要内容”），
bgImage=responsiveModule.settings.bgImage，
设备=响应模块.settings.device，
背景选择器=$（“.background image”）；
如果（设备==“桌面”&&backgroundSelector.length==0）{
bgContainer.append（bgImage）；
}else if（device==“mobile”&&backgroundSelector.length==1）{
backgroundSelector.remove（）；
}
},
listenResize:function（）{
$（窗口）.on（“调整大小”，函数（）{
responsiveModule.checkDevice（）；
responsiveModule.replaceImages（）；
responsiveModule.settings.windowWidth=$（window.width（）；
});
}
}
变量工具提示模块={
设置：{
工具提示状态：false
},
init:function（）{
ToolTimpodule.bindUIfunctions（）；
},
bindUIfunctions:function（）{
var设备=responsiveModule.settings.device；
如果（设备==“移动”）{
$（“.ship”）。在（“单击”，功能（e）{
e、 预防默认值（）；
tooltipModule.manageTooltip（e）；
});
}否则{
$（“.muelle项”）.addClass（“桌面”）；
}
},
管理工具提示：函数（e）{
var tooltip=$（e.currentTarget）.next（），
工具提示=$（“.tooltip”）；
工具提示。removeClass（“显示”）；
工具提示.addClass（“显示”）；
}
}
$（文档）.on（“就绪”，函数（）{
responsiveModule.init（）；
tooltipModule.init（）；
});

你拥有的还不错。但是我不喜欢你用单件。将responsiveModule和tooltipModule分开很好，但我建议使用显示模块模式（我比较喜欢）：

您可以从该模块创建任意数量的实例。你有自己的范围

这是javascript设计模式的最佳书籍之一：

以下是我对JavaScript的几点看法：

---

Stack Overflow有一个姐妹站点，专门用于解决此问题。我建议你把这个问题贴在上面，因为它更多的是关于这个主题的。我会按照你的建议去做，非常感谢！嘿我会读这本书，也会把你的博客添加到我的书签中。谢谢你这么快的回答。当您谈到创建我的模块的新实例时，您指的是原型的使用，或者只是使用var responsiveModule2=ResponsiveModule（）；。。。对不起，如果我的问题是如此愚蠢，我没有工程背景教育，所以对我来说很难理解，我需要对每一个主题进行大量的研究：pYep，这就是我的意思。实际上，您使用的是ResposiveModule函数返回的对象及其作用域。多次调用此方法将返回不同的对象。

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