Chage可配置設置的外部對象顯示模塊模式

Question

我正在嘗試練習不同的模塊模式。下面是一個滾動功能的IIFE模式，可以用於不同頁面中的不同元素（不確定這是用於此目的的正確模式）。 JavaScript新增功能，請隨身攜帶。

我的問題是 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以瞭解模塊模式變體之間的區別。

據我瞭解你的問題，你有一個默認的配置對象在你想修改的裝飾器中。由於你的裝飾器函數使用副作用來實現它的目標，所以你可以使用你的裝飾器來返回一個你可以用來改變內部默認配置的configManager。

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

加入針對OP的問題：爲什麼$ .extend不

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

工作的原因是因爲參數配置是躲在封閉的配置和this.config沒有指向任何東西在所有。這很容易通過重命名參數來更改，因此它不會隱藏關閉的配置

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