我有一个非常复杂的类,所以我决定分成子模块并尝试使用揭示模块模式。 我有主类并决定分为更小的容器函数。但在当前情况下
但我无法从外部访问任何内部函数,即使用 searchFinder.Search.callSearchResultWithCallBack() 访问 callSearchResultWithCallBack。我应该使用哪种模式来保持代码干净,并控制调用子模块中的内部函数。
谢谢
var searchFinder;
function SearchFinder() {
me = this;
this.searchResult = null;
this.init = function() {
declareControls();
createAccordian();
addEvents();
fillControls();
var declareControls = function() {
this.SearchButtons = jQuery('.doSearch');
this.InputLocation = jQuery('#inputLocation');
this.InputDistanceWithIn = jQuery('#inputDistanceWithIn');
this.InputName = jQuery('#inputName');
}
var addEvents = function() {
me.SearchButtons.click(function() {
me.Search();
});
}
var fillControls = function() {
var getGetCategory = function() {
}
}
}
this.Search = function() {
var url = '';
var searchCriteria = {};
validateAndCreateCriteria();
callSearchResultWithCallBack();
function validateAndCreateCriteria() {
function validateAandGetCategory() {
if (SearchValidation.ValidateZipCode(me.InputLocation.val().trim())) {
searchCriteria.location = me.InputLocation.val().trim();
} else if (SearchValidation.ValidateCityState(me.InputLocation.val().trim())) {
searchCriteria.location = me.InputLocation.val().trim();
}
}
}
// need to access it outsite
function callSearchResultWithCallBack() {
me.searchResult(searchCriteria, SearchResultCallBack);
function SearchResultCallBack() {
}
}
}
}
jQuery(function() {
searchFinder = new SearchFinder();
searchFinder.init();
searchFinder.Search.callSearchResultWithCallBack();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
最佳答案
此代码有多个问题,首先我将解决例如 declareControls
未执行的事实。先声明函数再执行!
this.init = function() {
var declareControls = function() {
this.SearchButtons = jQuery('.doSearch');
this.InputLocation = jQuery('#inputLocation');
this.InputDistanceWithIn = jQuery('#inputDistanceWithIn');
this.InputName = jQuery('#inputName');
}
var addEvents = function() {
this.SearchButtons.click(function() {
me.Search();
});
}
var fillControls = function() {
var getGetCategory = function() {
}
}
declareControls();
//createAccordian(); //not defined
addEvents();
fillControls();
}
现在让我们看看会出现的其他问题。
引用 this 的 me
对象在 searchFinder
范围内,并且在 searchFinder 实例中不引用相同的 this
。
函数jQuery
可以用常用的$
代替。
searchFinder.Search.callSearchResultWithCallBack()
这永远不会起作用。由于 Search
函数是一个对象,而 callSearchResultWithCallBack
不是该函数的属性。
解决方案;使其成为搜索原型(prototype)的一部分。
步骤:
- 将
callSearchResultWithCallBack
移至搜索函数之外。 - 向搜索功能添加原型(prototype)
- 通过原型(prototype)调用函数。
function callSearchResultWithCallBack() {
me.searchResult(searchCriteria, SearchResultCallBack);
function SearchResultCallBack() {
}
}
this.Search.prototype.callSearchResultWithCallBack = callSearchResultWithCallBack;
如果您想在搜索之外触发此功能,请使用:
searchFinder.Search.prototype.callSearchResultWithCallBack();
请记住,callSearchResultWithCallBack
会抛出错误,因为 searchCriteria
未定义。
这暂时解决了您的问题,但必须彻底修改此代码。但这应该让你开始。 http://ejohn.org/blog/simple-javascript-inheritance/
关于javascript - 在 javascript 中使用复杂的揭示模块模式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27616097/