如何从OOP Javascript开始

How to start with OOP Javascript

本文关键字：Javascript 开始 OOP      更新时间：2023-09-26

我已经学习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();   
});

您所拥有的还不错。不过我不喜欢你用辛格尔顿。将responsiveModule和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

相关文章：