如何以OOP Javascript开头

Question

我现在已经学习了8个月左右的Javascript，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();   
});

Answer 1

你所拥有的还算不错。 但是，我不喜欢您使用Singletons。 最好将ResponseModule和tooltipModule分开，但是我建议使用显示模块模式（这对我来说很喜欢）：

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

您可以从该模块创建所需数量的实例。 而且您有私有范围。

这是有关javascript中设计模式的最佳书籍之一： http : //addyosmani.com/resources/essentialjsdesignpatterns/book/

以下是我对JavaScript的一些了解： http ://krasimirtsonev.com/blog/article/JavaScript-is-cool-modular-programming-extending