javascript - 在 javascript 中使用复杂的揭示模块模式

Question

我有一个非常复杂的类，所以我决定分成子模块并尝试使用揭示模块模式。 我有主类并决定分为更小的容器函数。但在当前情况下

但我无法从外部访问任何内部函数，即使用 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>

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

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

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

<小时/>

函数jQuery可以用常用的$代替。

searchFinder.Search.callSearchResultWithCallBack() 这永远不会起作用。由于 Search 函数是一个对象，而 callSearchResultWithCallBack 不是该函数的属性。

解决方案；使其成为搜索原型(prototype)的一部分。

步骤:

1. 将 callSearchResultWithCallBack 移至搜索函数之外。
2. 向搜索功能添加原型(prototype)
3. 通过原型(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/