JS揭示模块模式，我做错了什么

JS Revealing module Pattern, What Am I doing Wrong

本文关键字：错了 什么 模式 模块 JS      更新时间：2023-09-26

我一直在尝试使用揭示模块模式，并认为我应该为非ss3自定义滚动条创建一个函数。

var sb=(function($){
//Private
var settings=function(props){
    return{
        wrapper: props.wrapper ? document.getElementById(props.wrapper):null,
        thumb: props.thumb ? document.getElementById(props.thumb):null,
        track: props.track ? document.getElementById(props.track):null,
        left: props.left ? props.left:null,
        right: props.right ? props.right:null,
        contentWidth: props.contentWidth? props.contentWidth:null
    };
};
var LOG=function(input){
    console.log(input)
};
//Object Literal
return{
    Log:LOG,
    settings:settings
};
})(jQuery);

以上就是模块。我正在设置这样的值：

window.onload=function(){
    sb.settings({wrapper:'bodyWrapper',thumb:'thumb',track:'track'});
}

然而，当我尝试测试它时，我不断地得到"未定义"和其他错误。在模块内部运行console.log(settings.wrapper)会返回undefined。我真的不知道哪里出了问题，所以如果有任何帮助，我将不胜感激。提前感谢

在模块内部运行console.log(settings.wrapper)会返回undefined。

当然，因为settings是函数对象（它没有wrapper属性），而不是对象，所以它在被调用时已经返回。你似乎想要

var sb = (function(){
    // private variables
    var settings = {};
    // public (exported) properties
    return {
        log: function(input) {
            console.log(input);
        },
        getSetting: function(name) {
            return settings[name];
        },
        setSettings: function(props){
            settings = { // assign to the private variable!
                wrapper: props.wrapper ? document.getElementById(props.wrapper) : null,
                thumb: props.thumb ? document.getElementById(props.thumb) : null,
                track: props.track ? document.getElementById(props.track) : null,
                left: props.left || null,
                right: props.right || null,
                contentWidth: props.contentWidth || null
            };
            return true;
        }
    };
})();
window.onload = function(){
    sb.setSettings({wrapper:'bodyWrapper',thumb:'thumb',track:'track'});
    sb.log(sb.getSetting("wrapper"));
}
相关文章：