JAVASCRIPT高级技巧-惰性载入函数

时间：2020-05-07 16:33:31 阅读：41 评论：0 收藏：0 [点我收藏+]

javascript高级程序设计第22章-高级技巧

22.1.3 惰性载入函数

因为浏览器之间行为的差异，多数 JavaScript 代码包含了大量的 if 语句，将执行引导到正确的代

码中，如下代码：

function createXHR() {
  if (typeof XMLHttpRequest !== ‘undefined‘) {
    return new XMLHttpRequest();
  } else if (typeof ActiveXObject !== ‘string‘) {
    // ... some code
    return new ActiveXObject(arguments.callee.activeXString);
  } else {
    throw new Error(‘NO XHR object avaliable‘);
  }
}

每次调用 createXHR()的时候，它都要对浏览器所支持的能力仔细检查。

首先检查内置的 XHR，然后测试有没有基于 ActiveX 的 XHR，最后如果都没有发现的话就抛出一个错误。

每次调用该函数都是这样，即使每次调用时分支的结果都不变:如果浏览器支持内置 XHR，那么它就一直支持了，那么这种测试就变得没必要了。

即使只有一个 if 语句的代码，也肯定要比没有 if 语句的慢，所以如果 if 语句不必每次执行，那么代码可以运行地更快一些。

解决方案就是称之为惰性载入的技巧。惰性载入表示函数执行的分支仅会发生一次。

有两种实现惰性载入的方式：

第一种就是在函数被调用时再处理函数。

在第一次调用的过程中，该函数会被覆盖为另外一个按合适方式执行的函数，这样任何对原函数的调用都不用再经过执行的分支了，代码如下：

function createXHR() {
  if (typeof XMLHttpRequest !== ‘undefined‘) {
    createXHR = function() {
      return new XMLHttpRequest();
    }
  } else if (typeof ActiveXObject !== ‘string‘) {
    createXHR = function () {
      // ... some code
      return new ActiveXObject(arguments.callee.activeXString);
    }
  } else {
    createXHR = function () {
      throw new Error(‘NO XHR object avaliable‘);
    }
  }
}

在这个惰性载入的 createXHR()中，if 语句的每一个分支都会为 createXHR 变量赋值，有效覆盖了原有的函数。

最后一步便是调用新赋的函数。下一次调用 createXHR()的时候，就会直接调用被分配的函数，这样就不用再次执行 if 语句了。

第二种实现惰性载入的方式是在声明函数时就指定适当的函数。这样，第一次调用函数时就不会损失性能了。

而在代码首次加载时会损失一点性能。以下就是按照这一思路重写前面例子的结果：

var createXHR = (function () {
  if (typeof XMLHttpRequest !== ‘undefined‘) {
    return function() {
      return new XMLHttpRequest();
    }
  } else if (typeof ActiveXObject !== ‘string‘) {
    return function() {
      // ... some code
      return new ActiveXObject(arguments.callee.activeXString);
    }
  } else {
    return function() {
      throw new Error(‘NO XHR object avaliable‘);
    }
  }
})();

这个例子中使用的技巧是创建一个匿名、自执行的函数，用以确定应该使用哪一个函数实现。

实际的逻辑都一样。不一样的地方就是第一行代码(使用 var 定义函数)、新增了自执行的匿名函数。

另外每个分支都返回正确的函数定义，以便立即将其赋值给 createXHR()。

惰性载入函数的优点是只在执行分支代码时牺牲一点儿性能。

至于哪种方式更合适，就要看你的具体需求而定了。不过这两种方式都能避免执行不必要的代码。

JAVASCRIPT高级技巧-惰性载入函数

原文：https://www.cnblogs.com/yxfboke/p/12843745.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)