CODEWITHSUNDEEP
javascriptjquery
question bank
question bank

Reputation: 11

break large public javascript functions into smaller private functions

I have JavaScript class which have huge functions which are very difficult to maintain.

The 2 public functions are called at start and then on click. I want to create private functions inside these public functions say break into into some private functions scope to these public methods. 

var searchResultView;
var SearchResultView = function () {
    me = this;
    this.init = function () {
        // huge code
    }

    this.Search = function () {
        // huge code
    }
}
jQuery(function () {
    searchResultView = new SearchResultView();
    searchResultView.init();
    searchResultView.Search();
}

What will best way to achieve this. I tried to use below approach but i think this nested function will not work well. 

var searchResultView;

function searchResultView() {
    me = this;
    this.init = function () {
        var declareControls = function () {}
        var addEvents = function () {}
        var fillControls = function () {}
        declareControls();
        addEvents();
        fillControls();
    }
    this.Search = function () {
        var validateAndCreateCriteria = function () {
            if (!validateAandGetLocation()) {
                alert("invalid location");
                return false;
            }
            if (!validateAandGetCategory()) {
                alert("choose search type");
                return false;
            }
            var validateAandGetLocation = function () {}
            var validateAandGetCategory = function () {}
        }
        validateAndCreateCriteria();
    }
}
jQuery(function () {
    searchResultView = new searchResultView();
    searchResultView.init();
});

Upvotes: 0

Views: 295

Answers (2)

Mr_Green
Mr_Green

Reputation: 41832

If I understood correctly, you should have the functions something like this:

var foo = (function() {
    var  privateBar = function() {  // private function

    },
    privatefooBar = function() {   // private function

    };
    return {
       publicFoo : function() {     //public function
           /* use privateBar and privatefooBar functions here */
       }
    };
})();

Later you can access publicFoo function by using

 foo.publicFoo();

But you can't access the inside functions which are privateBar() and privatefooBar() directly because they are private functions.

Updated Fiddle

Upvotes: 1

mvw
mvw

Reputation: 5105

Breaking up the function is easy:

function f(..) {
  // many lines here
  return ret_f;
}

if equivalent to

function f {
  function f1(..) {
    // not so many lines here
  }
  function f2(..) {
    // not so many lines here
  }
  var ret_f1 = f1(..);
  var ret_f2 = f2(..);
  // calculate ret_f from ret_f1 and ret_f2
  return ret_f;
}

or if you prefer this style using anonymous functions

function f {
  var f1 = function(..) {
        // not so many lines here
  };
  var f2 = function(..) {
        // not so many lines here
  };
  var ret_f1 = f1(..);
  var ret_f2 = f2(..);
  // calculate ret_f from ret_f1 and ret_f2
  return ret_f;
}

I fear however your real question is specific to your existing code and is about what useful smaller functions to extract there and how to combine them. For this one would need to have your full code and understand it. That might be a bit much for this QA format.

Upvotes: 0

Related Questions