● 本文旨在一些特殊的封装上

● 一般会用于处理浏览器兼容性的封装

● 但是看完会对你有一些启发也说不定哦 O(∩_∩)O~

一段简单的代码

● 我们在封装 ajax 请求的时候

● 基于原生 js 的 ajax 代码, 如果考虑到浏览器兼容问题

● 那么我们一定会看到以下几段代码

开始第一次封装

想到就做, 我们就来进行一次封装试试看

我这里并没有写完整, 只是简单一个小示例

我们来分析一下这个事情

○ 我们的判断种类可能有很多种, 比如 A B C D 四种

● 代码可能就变成了这个样子

● 可能有的小伙伴会想到, 我改成 策略模式 封装不就好了

我要说的不是这个问题

○ 不管你改成什么模式封装, 哪怕是起飞模式

○ 如果你当前需要匹配到的内容是 D

○ 那么每调用一次, 都会从 A 开始判断一次

○ 然后到达 D

● 想象一下, 如果调用了 100 次, 那么每次的前三个判断是不是都浪费了呢

● 好像是这样的

○ 那我们是不是可以考虑换一个方式来搞一下

懒惰模式封装这段代码

● 我们能不能考虑一下, 我封装完毕的代码, 只有第一次调用的时候会判断

● 后面调用的时候不在判断了, 那么是不是会节省很多呢 ?

● 想到就做

○ 原则就是多个事情依次完成

○ 前一个成功了, 后面的不做了

○ 只要成功过一次, 以后就不在尝试了

1.  把我们需要做的几个事情放在几个函数内

● 这样一来, 如果第一个能成功, 那么我们调用第一个函数就回得到对应的 ajax 对象了

● 如果第一个不行, 我们就尝试第二个

2.  接下来我们把四个函数放在一个数组内, 遍历依次执行

● 只要找到一个合适的就行了

● 问题随之而来了, 如果第一个不对, 那么会报错

● 我的代码就全部挂掉了

3.  尝试使用 try catch 解决问题

● 为了不让我的代码挂掉

● 我们改用 try catch 来解决问题

● 错了也不需要做什么 , 直接下一次就好了

● 看上去挺好, 但是问题依旧没有解决

4.  单独制作一个函数

● 我的原则就是, 让这个函数第一次调用和第二次调用不是一个函数就好了

● 也就是我要在第一次调用完毕以后修改这个函数

● 看似没有什么改变，但是之一第 28 行的代码，有一个重写 createXHR

● 这个是整个”惰性思想”的核心，也就是说，我只有在当前浏览器中，第一次执行 createXHR 的时候是这个函数

● 一旦找到一个合适的创建 ajax 对象的方法以后，那么从第二次执行 createXHR 开始，就全部都是我们之前数组中的某一个函数了

● 再也不用循环判断，而是直接用一种有效的方法创建一个 ajax 对象了

● 这个是一种 js 中的高级编程思想，如果理解不了，就用我们最开始写的判断的形式来进行就可以，慢慢体会一段时间就能明白了

完整代码

● 从此以后, 你就去随便调用吧

● 只有第一次的时候会进行判断, 后面的时候都不会进行判断了

● 直接就能使用那个最准确的了