Lazy loading function of js advanced technique

  • Because of the differences between browsers, most javascript code contains a large number of if judgment statements. In order to avoid executing unnecessary if judgment statements every time a function call
  • There are two ways to implement lazy load functions:
    • In the process of function execution, during the first call of the function, the function will be overridden to another function executed in an appropriate way. See the following example: create XHR
      function createXHR () {
          if (typeof XMLHttpRequest != 'undefined') {
              return new XMLHttpRequest();
          } else if (typeof ActiveXObject != 'undefined') {
              if (typeof arguments.callee.activeXString != 'string'){
                  var version = ['MSXML2.XMLHttp.6.3', 'MSXML2.XMLHttp.3.0', 'MSXML2.XMLHttp'],
                  i,len;
                  for (i = 0,len=version.length; i < len; i++) {
                      try {
                          new ActiveXObject(version[i]);
                          arguments.callee.activeXString = versions[i];
                          break;
                      } catch (ex) {
                          // skip
                      }
                  }
              }
              return new ActiveXObject(arguments.callee.activeXString);
          } else {
              throw new Error('NO XHR');
          }
      }
      
      Every time you execute this creation function, you will execute the internal judgment statements, so as shown below, rewrite this function, rewrite the original function, and the next call will directly call the allocated function
      function createXHR () {
          if (typeof XMLHttpRequest != 'undefined') {
              // Rewrite original function
              createXHR = function () {
                  return new XMLHttpRequest();
              }
          } else if (typeof ActiveXObject != 'undefined') {
              // Rewrite original function
              createXHR = function () {
                  if (typeof arguments.callee.activeXString != 'string'){
                      var version = ['MSXML2.XMLHttp.6.3', 'MSXML2.XMLHttp.3.0', 'MSXML2.XMLHttp'],
                      i,len;
                      for (i = 0,len=version.length; i < len; i++) {
                          try {
                              new ActiveXObject(version[i]);
                              arguments.callee.activeXString = versions[i];
                              break;
                          } catch (ex) {
                              // skip
                          }
                      }
                  }
                  return new ActiveXObject(arguments.callee.activeXString);
              }
          } else {
               createXHR = function () {
                  throw new Error('NO XHR');
               }
          }
          // Finally return to expectation
          return createXHR();
      }
      
    • The second way of lazy loading is to specify the appropriate function when declaring the function. See the following rewriting. In this example, anonymous and self executing functions are used:
      var createXHR = (function () {
          if (typeof XMLHttpRequest != 'undefined') {
              // Return the assigned function
              return function () {
                  return new XMLHttpRequest();
              };
          } else if (typeof ActiveXObject != 'undefined') {
               // Return the assigned function
             return function () {
                  if (typeof arguments.callee.activeXString != 'string'){
                      var version = ['MSXML2.XMLHttp.6.3', 'MSXML2.XMLHttp.3.0', 'MSXML2.XMLHttp'],
                      i,len;
                      for (i = 0,len=version.length; i < len; i++) {
                          try {
                              new ActiveXObject(version[i]);
                              arguments.callee.activeXString = versions[i];
                              break;
                          } catch (ex) {
                              // skip
                          }
                      }
                  }
                  return new ActiveXObject(arguments.callee.activeXString);
              };
          } else {
               return function () {
                  throw new Error('NO XHR');
               };
          }
      })()
      

Tags: Front-end Javascript

Posted on Mon, 02 Dec 2019 23:16:28 -0800 by localhost1