跳到主要内容

惰性函数

惰性函数（Lazy Loading Functions）是一种在 JavaScript 中优化性能的编程技巧。它们通常用于延迟加载资源或执行某些操作，以减少初始加载时的负担，提高页面或应用程序的性能。

惰性函数的思想​

// 惰性函数：函数内部改变自身的机制
var getTimeStamp = function () {
  var timeStamp = new Date().getTime();
  getTimeStamp = function () {
    return timeStamp;
  };
  return getTimeStamp();
};
/**
 * 惰性函数表示函数执行的分支( var timeStamp = new Date().getTime();)只会在函数第一次调用的时候执行，
 * 在第一次调用的过程中，该函数被覆盖为另一个按照合适的方式执行的函数
 * 这样任何对原函数的调用就不用再经过执行的分支了。
 */

惰性函数的场景​

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>惰性函数Demo</title>
  </head>

  <body>
    <button id="btn">按钮</button>
    <script>
      // 使用自执行函数封装
      // var addEvent = (function () {
      //   if (window.addEventListener) {
      //     return function (el, type, fn, capture) {
      //       el.addEventListener(type, fn, capture);
      //     }
      //   } else if (window.addEvent) {
      //     return function (el, type, fn) {
      //       el.addEvent('on' + type, function () {
      //         fn.call(el);
      //       });
      //     }
      //   } else {
      //     return function (el, type, fn) {
      //       el['on' + type] = fn;
      //     }
      //   }
      // })()

      // 使用惰性函数封装
      var addEvent = function (el, type, fn, capture) {
        if (window.addEventListener) {
          addEvent = function (el, type, fn, capture) {
            el.addEventListener(type, fn, capture);
          };
        } else if (window.addEvent) {
          addEvent = function (el, type, fn) {
            el.addEvent('on' + type, function () {
              fn.call(el);
            });
          };
        } else {
          addEvent = function (el, type, fn) {
            el['on' + type] = fn;
          };
        }
        addEvent(el, type, fn, capture);
      };

      var btn = document.getElementById('btn');

      // 点击事件
      addEvent(btn, 'click', btnClick, false);

      function btnClick() {
        console.log('click');
      }
    </script>
  </body>
</html>