JS揭示模块模式-通过公共方法访问私有变量

Question

我使用揭秘模块模式和jquery创建了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

Answer 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();