using revealling moduler pattern for complex in javascript

Question

I have a very complex class so i decided to break into sub modules and trying to use revealing modules pattern. I have main class and decided to divide into smaller container function. but in current scenario

But i am not able to access any internal function from outside i.e callSearchResultWithCallBack using searchFinder.Search.callSearchResultWithCallBack(). which pattern should i use to keep this code clean as well have control to call internal function in sub module.

Thanks

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

This code has multiple issues, first I will address the fact that for example declareControls is not executing. First declare the function than execute!

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

Now let's look at others problems that will arise.

the me object referring to this is in the scope of searchFinder and does not refer to the same this in the instance of searchFinder.

---

function jQuery can be replaced by the commonly used $.

searchFinder.Search.callSearchResultWithCallBack() this is never going to work. Since the Search function is an object and callSearchResultWithCallBack isn't a property of this function.

Solution; make it part of the prototype of Search.

Steps:

1. Move callSearchResultWithCallBack outside the search function.
2. Add prototype to Search function
3. Call function via prototype.

function callSearchResultWithCallBack() {

  me.searchResult(searchCriteria, SearchResultCallBack);


  function SearchResultCallBack() {

  }

}

this.Search.prototype.callSearchResultWithCallBack = callSearchResultWithCallBack;

If you want to fire this function outside of search use this:

searchFinder.Search.prototype.callSearchResultWithCallBack();

Please remember that callSearchResultWithCallBack will throw an error because searchCriteria is undefined.

---

This fixes your problems for now, but this code has to be revised thoroughly. But this should get you started. http://ejohn.org/blog/simple-javascript-inheritance/