什么叫懒人封装？懒人封装(懒惰模式)

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

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

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

　   一段简单的代码

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

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

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

　　// 标准浏览器下创建 ajax 对象

　　new XMLHttpRequest();

　　// 以下三种都是IE浏览器，对应不同版本

　　new ActiveXObject('Msxml12.XMLHTTP');

　　new ActiveXObject('Msxml13.XMLHTTP');

　　new ActiveXObject('Microsoft.XMLHTTP');

　　开始第一次封装

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

　　function xhl_ajax(options) {

　　// ...

　　let xml = null

　　if (window.XMLHttpRequest) {

　　xml = new XMLHttpRequest()

　　} else if (new ActiveXObject) {

　　xml = new new ActiveXObject('Microsoft.XMLHTTP')

　　} else {

　　xhl = '你的浏览器可能不支持 ajax 请求, 请更换浏览器再试'

　　}

　　// ...

　　}

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

　　● 我们来分析一下这个事情

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

　　// 那么这一段代码就变成了

　　function xhl_ajax() {

　　// ...

　　if (A) {

　　// ...

　　} else if (B) {

　　// ...

　　} else if (C) {

　　// ...

　　} else if (D) {

　　// ...

　　} else {

　　// ...

　　}

　　// ...

　　}

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

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

　　我要说的不是这个问题

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

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

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

　　○ 然后到达 D

　　// 第一次调用

　　xhl_ajax() // 需要判断 A 不对, B 不对, C 不对, D 对了

　　// 第二次调用

　　xhl_ajax() // 需要判断 A 不对, B 不对, C 不对, D 对了

　　// ...

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

　　● 好像是这样的

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

　　懒惰模式封装这段代码

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

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

　　● 想到就做

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

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

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

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

　　function createXHR1 () {

　　return new XMLHttpRequest;

　　}

　　function createXHR2 () {

　　return new XActiveXObject("Microsoft.XMLHTTP");

　　}

　　function createXHR3 () {

　　return new ActiveXObject("Msxml2.XMLHTTP");

　　}

　　function createXHR4 () {

　　return new ActiveXObject("Msxml3.XMLHTTP");

　　}

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

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

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

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

　　var xmls = [createXHR1, createXHR2, createXHR3, createXHR4]

　　let xml = null

　　for (var i = 0; i < xmls.length; i++) {

　　// 一旦 xml 有内容了, 不再是 null 了, 那么直接结束循环

　　if (xml) break

　　// 否则就开始尝试

　　xml = xmls[i]()

　　}

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

　　● 我的代码就全部挂掉了

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

　　● 为了不让我的代码挂掉

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

　　var xmls = [createXHR1, createXHR2, createXHR3, createXHR4]

　　let xml = null

　　for (let i = 0; i < xmls.length; i++) {

　　try {

　　xml = xmls[i]()

　　} catch(e) {}

　　}

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

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

　　4. 单独制作一个函数

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

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

　　function createXHR() {

　　// 定义一个 xhr 接收 ajax 对象

　　// 定义一个 flag 开关，看看是否找到合适的创建 ajax 对象的方法

　　// 定义一个数组，存储四种创建 ajax 对象的方式

　　let xml = null,

　　flag = false,

　　xmls = [

　　function () {

　　return new XMLHttpRequest;

　　},

　　function () {

　　return new ActiveXObject("Microsoft.XMLHTTP");

　　},

　　function () {

　　return new ActiveXObject("Msxml2.XMLHTTP");

　　},

　　function () {

　　return new ActiveXObject("Msxml3.XMLHTTP");

　　}

　　];

　　// 依旧是循环遍历数组

　　for (let i = 0, len = xmls.length; i < len; i++) {

　　let curFn = ary[i];

　　// 依次执行，找到合适的创建 ajax 对象的方法

　　try {

　　xml = curFn();

　　// 这里是核心，一旦找到合适的方法，那么我们就把这个函数重新赋值给 createXHR

　　createXHR = curFn;

　　// 让开关为 true

　　flag = true;

　　break;

　　} catch (e) {

　　}

　　}

　　// 如果到最后开关依旧为 false，证明四种方法都不合适，那么我们就需要提醒浏览器升级

　　if (!flag) {

　　throw new Error("your browser is not support ajax, please change your browser,try again!");

　　}

　　// 最后返回 ajax 对象

　　return xml;

　　}

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

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

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

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

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

　　完整代码

　　function createXHR() {

　　let xml = null,

　　flag = false,

　　xmls = [

　　function () {

　　return new XMLHttpRequest;

　　},

　　function () {

　　return new ActiveXObject("Microsoft.XMLHTTP");

　　},

　　function () {

　　return new ActiveXObject("Msxml2.XMLHTTP");

　　},

　　function () {

　　return new ActiveXObject("Msxml3.XMLHTTP");

　　}

　　];

　　for (let i = 0, len = xmls.length; i < len; i++) {

　　let curFn = ary[i];

　　try {

　　xml = curFn();

　　createXHR = curFn;

　　flag = true;

　　break;

　　} catch (e) {

　　}

　　}

　　if (!flag) {

　　throw new Error("your browser is not support ajax, please change your browser,try again!");

　　}

　　return xml;

　　}

　　function xhl_ajax(options) {

　　// ...

　　const xml = createXHR()

　　// ...

　　}

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

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

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