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