하위 모듈 구성 설정 외부의 개체 구성 모듈 표시

Question

다른 모듈 패턴을 연습하려고합니다. 다음은 서로 다른 페이지의 다른 요소에 사용할 수있는 스크롤 기능의 IIFE 패턴입니다 (목적에 맞는 패턴인지는 확실하지 않음). 자바 스크립트에 대한 새로운, 내게 맨발로하십시오.

내 질문은 입니다. 1. IIFE 모듈 외부에서 config = {} 옵션을 바꾸는 방법은 무엇입니까? 2. 나는이 모든 종류의 코드를 작성하는 데 과도하거나 제안 된 방법인지는 모르지만 모든 단일 함수의 이름을 지정합니다. 3. 목적에 맞는 더 나은 모듈 패턴은 무엇입니까?

;(function($, ScrollToTop, undefined) { 
    'use strict'; 

    var clickedElem = $('[data-scroll]'); 
    var config = { 
     scrollDistance: 500, 
     speed: 300 
    }; 

    var _scrollToTargetAnimation = function() { 
     $('body').animate({ 
     scrollTop: $($(this).data('scroll')).offset().top 
     }, config.speed); 
     return false; //stop bubbling 
    }; 

    var _showHideAnimation = function() { 
     if ($(this).scrollTop() > config.scrollDistance) { 
      clickedElem.fadeIn(config.speed); 
     } else { 
      clickedElem.fadeOut(config.speed); 
     } 
    }; 

    ScrollToTop.showHide = function() { 
     if ($('.top-bar').length) return; 
     $(document).scroll(_showHideAnimation); 
    }; 

    ScrollToTop.clickBtn = function() { 
     clickedElem.on('click', _scrollToTargetAnimation); 
    }; 

    ScrollToTop.init = function (config) { 
     $.extend(this.config, config); 
     ScrollToTop.showHide(); 
     ScrollToTop.clickBtn(); 
    }; 

    })(jQuery, window.ScrollToTop = window.ScrollToTop || {}); 

    $(function() { 
    config = { 
     scrollDistance: 500, 
     speed: 300 
    }; 
    ScrollToTop.init(config); 
    }); 

Answer 1

먼저 모듈 패턴이 아닙니다. 모듈 패턴은 처음부터 객체를 생성하고 객체의 속성과 메서드를 숨기는 것과 관련이 있습니다. 귀하의 예는 장식 자입니다 - 객체 ScrollToTop을 전달하고 추가 방법으로 꾸미십시오. 일부 기술은 모듈 패턴과 유사합니다. 즉 IIFE를 사용하여 개인 변수를 숨기는 클로저를 사용하지만 의도는 다릅니다. 모듈 패턴 변형의 차이점을 이해하려면 this post을 읽어 보시기 바랍니다.

나는 당신의 질문을 이해하기 때문에 수정하려는 데코레이터 안에 기본 구성 개체가 있습니다. 데코레이터 기능은 부작용을 사용하여 객관적으로 수행하므로 decorator를 사용하여 내부 기본 구성을 변경하는 데 사용할 수있는 configManager를 반환 할 수 있습니다. OP의 질문에 응답

var configManager = (function($, ScrollToTop, undefined) { 

    var clickedElem = $('[data-scroll]'); 
    var defaultConfig = { 
    scrollDistance: 500, 
    speed: 300 
    }; 

    var _scrollToTargetAnimation = function() { 
    // ... 
    }; 

    var _showHideAnimation = function() { 
    // ... 
    }; 

    ScrollToTop.showHide = function() { 
    // ... 
    }; 

    ScrollToTop.clickBtn = function() { 
    // ... 
    }; 

    ScrollToTop.init = function (config) { 
    // ... 
    }; 

    return { 
    setConfig: function(config){ 
     defaultConfig = config; 
    } 
    }; 
})(jQuery, window.ScrollToTop = window.ScrollToTop || {}); 

$(function() { 
    config = { 
    scrollDistance: 500, 
    speed: 300 
    }; 
    ScrollToTop.init(config); 
}); 

configManager.setConfig({ 
    scrollDistance: 400, 
    speed: 200 
}); 

ADDED : 파라미터 설정 아무것도 가리 키지 않는 폐쇄의 설정 및 this.config을 숨기고 있기 때문에 $ .extend가

ScrollToTop.init = function (config) { 
    $.extend(this.config, config); 

에서 작동하지 않는 이유는 조금도. 매개 변수의 이름을 변경하여 클로저의 구성을 숨길 수 있으므로 쉽게 변경할 수 있습니다.

ScrollToTop.init = function (config2) { 
    $.extend(config, config2);