Question

我有一个非常复杂的类，所以我决定闯入子模块并尝试使用揭示模块模式。我有主类，并决定分成较小的容器功能。但在目前的情况下

但我无法使用searchFinder.Search.callSearchResultWithCallBack（）从外部访问任何内部函数，即callSearchResultWithCallBack。我应该使用哪种模式来保持代码清洁，并且可以控制在子模块中调用内部函数。

由于

＆＃13;

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

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

＆＃13;

Answer 1

此代码有多个问题，首先我将解决例如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();
}

现在让我们看看将出现的其他问题。

引用它的me对象在searchFinder范围内，并且在searchFinder实例中不引用相同的this。

函数jQuery可以替换为常用的$。

searchFinder.Search.callSearchResultWithCallBack()这永远无法奏效。由于Search函数是一个对象，callSearchResultWithCallBack不是此函数的属性。

溶液;使其成为搜索原型的一部分。

步骤：

将callSearchResultWithCallBack移到搜索功能之外。
将原型添加到搜索功能
通过原型调用函数。

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中使用复杂的模块模式进行复杂化

1 个答案: