0

私は現在 8 か月間 Javascript を学んでいます。5 か月前にフロント エンド開発者としての仕事を見つけ、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();   
});
4

1 に答える 1

1

あなたが持っているものはそれほど悪くありません。ただし、シングルトンを使用するのは好きではありません。RespondModule と 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 のデザイン パターンに関する最高の本の 1 つです: http://addyosmani.com/resources/essentialjsdesignpatterns/book/

以下は、 JavaScriptに関する私からの意見です。

于 2013-09-02T20:46:06.300 に答える