We add a new function in Function.prototype:

Function.prototype.after  =  function( func ){  var _self =  this;  return  function()  {  var ret =  _self.apply(  this.arguments );  if  ( ret ===  false  )  {  return  false;  }  func.apply(  this.arguments);  returnret; }}Copy the code

This after function returns a new function, which will first call the original function, And then call the subsequent function passed in via variable “func” if the original function execution is successfully ( ret ! = false ).

Then just construct a new function using after function:

bigFunction = bigFunction.after(  function()  { console.log("our own logic");  });
Copy the code

Now when bigFunction() is executed, we get the same printout. With this approach, the temporary variable is avoided.

Using the idea of the first example, we create another method before in Function.prototype, which has similar design as Function.prototype.after:

Function.prototype.before  =  function( func)  {  var _self =  this;  return  function()  {  if  (  func.apply(  this.arguments) = = =false  )  {  return  false;  }  return  _self.apply(  this.arguments); }}Copy the code

With this approach, our productive code is clean — not any time measurement code there.

var  append_doms  =  function()  {  for(  var i =  0; i <  100000; i++)  {  var div = document.createElement(  "div"); document.body.appendChild(div); }};Copy the code

And we wrap the original function with before and after function we defined in Function.prototype:

var  log_time  =  function( func, log_name)  {  return func =  (  function()  {  var d;  return func.before(  function(){ d =  new  Date(a); }).after(function(){ console.log( log_name +  (  new  Date() - d)); }); }) (); };Copy the code

Now we get a new function log_time which is dedicatedly used for performance measurement. This new function actually consists of three parts:

(1) an anonymous function with body “d = new Date();”, chained by Function.prototype.before.

(2) the original append_doms

An anonymous function with body “console.log(log_name + (new Date() -d)); “, chained by the Function. The prototype. After.

We can elegantly call it via one line of code below to achieve the performance measurement.

log_time(append_doms, “consumed time: “)();

We do some minor change on Function.prototype.after:

Function.prototype.after  =  function( func ){  var _self =  this;  return  function()  {  var ret =  _self.apply(  this.arguments );  if  ( ret )  {  return ret;  }  return  func.apply(  this.arguments); }}Copy the code

Now if the execution of original function is successfully ( returns true ), we terminate the function chain, that is, we don’t pass the responsibility chain to its subsequent function passed via func.

With this approach, there is no more IF-ELSE evaluation. In fact, now we spread the evaluation into the dedicated initialization function of each API:

var  getActiveX  =  function()  {  try  {  // lots of initialization work return { "name": "ActiveX"}; } catch (e) { // user broswer does not support ActiveX return null; } } var getHTML5 = function() { try { // lots of initialization work return { "name": "HTML5"}; } catch (e) { // user broswer does not support HTML5 return null; } } var getFlash = function() { try { // lots of initialization work return { "name": "Flash"}; } catch (e) { // user broswer does not support Flash return null; } } var getForm = function() { return { "name": "Form"}; } ` ` `

Now in order to get appropriate API, we just use single line:

> var uploadAPI = getActiveX.after(getHTML5).after(getFlash).after(getForm)();

This design idea is actually the so called “Chain ofThe Responsibility ". Simple speakingfunction in the beginning of chain ( in my example, it is getActiveX ) will analyze whether it is able to resolve the task. If yes.the whole statement returns.task is over. Otherwise.it simply delegate the task to the next node in the chain#.Example4 -eliminate lots of IF-ELSE in validity check via Strategy Design Pattern

For example.before we assemble the request payload to send OData request via OData API.we must perform various validity check on the user input. If you have a page with lots of UI elements.usually it will lead to lots of IF-ELSEIF-ELSEIF validity check code spread in your application. ` ` `javascript

var  send  =  function()  {  var value = input.value;  if( value.length ===  ' '  )  {  return  false;  }  else  if( value.length >  MAX_LENGTH)  {  return  false; }...// LOTS OF other rules to be checked else { // all check passes, now ready to call OData API } }
Copy the code