JS Revealing Module Pattern - 通过公共方法访问私有变量答案

【问题标题】：JS Revealing Module Pattern - access private variables via public methodsJS Revealing Module Pattern - 通过公共方法访问私有变量
【发布时间】：2021-09-30 05:35:57
【问题描述】：

我使用带有 jquery 的 Revealing Module Pattern 创建了 txtModule 模块，

我想将输入标签的值打印到控制台.. 对于公开的测试方法如下代码所示

        var txtModule = (function(window,$){

            var txt = {
                topics:{},
                test:function(){
                    console.log(this.input.val());    
                },
                _init:function(){
                    this._cacheDom();                        
                },
                _cacheDom:function(){  
                    this.input = $("input#c_input");                                     
                },
            }
            
            txt._init();
            
            return {                
                test : txt.test,
            }
        });
    
          
        var v = txtModule(window,$);
        v.test();

当尝试访问this.input变量执行测试公共方法时出现如下错误

Uncaught TypeError: Cannot read properties of undefined (reading 'val')

我想知道如何正确地将测试方法暴露给外部以访问this.input

【问题讨论】：

标签： javascript

【解决方案1】：

调用txt._init() 会使用input 属性填充txt 对象 - 但是当你这样做时

v.test();

稍后可以看到.的左边是v——也就是最后返回的对象

        return {                
            test : txt.test,
        }

而不是 txt 对象。当你做v.test()时，test函数看到的this就是只有test属性的对象。

这取决于您是否希望输入在外部可见 - 如果不是，则参考txt，否则为返回的对象创建一个变量并参考它。

var txtModule = (function(window,$){
    var txt = {
        topics:{},
        test:function(){
            console.log(this.input.val());    
        },
        _init:function(){
            this._cacheDom();                        
        },
        _cacheDom:function(){  
            returnedObj.input = $("input#c_input");                                     
        },
    }

    const returnedObj = {                
        test : txt.test,
    };
    txt._init();
    return returnedObj;
});

var v = txtModule(window,$);
v.test();

但这有点令人费解 - 有两个不同的对象收集有点相似的键值对会使事情变得混乱。考虑一下是否只使用一个会有所帮助，例如：

const txtModule = (function (window, $) {
    const input = $("input#c_input");
    const test = () => {
        console.log(input.val());
    };
    return { test };
});

const v = txtModule(window, $);
v.test();

【讨论】：