JavaScript设计模式（三十一）：机器学习-惰性模式

惰性模式（layier）

减少每次代码执行时的重复性的分支判断，通过对对象重定义来屏蔽原对象中的分支判断。

<button id="a1">按钮01</button>
<button id="b1">按钮02</button>
<button id="c1">按钮03</button>

function $(id) {
   
    return document.getElementById(id);
}

一般分支判断调用

每次调用都走一遍检测，以后每次调用都消耗一次性能

let A = {
   
    // 添加绑定事件方法on
    on(dom, type, fn) {
   
        if (dom.addEventListener) {
   
            dom.addEventListener(type, fn, false);
        } else if (dom.attachEvent) {
   
            dom.attachEvent('on' + type, fn);
        } else {
   
            dom['on' + type] = fn;
        }
    },
};

A.on($('a1'), 'click', function (e) {
   
    console.log(e.target, e);
});

利用闭包进行分支判断

加载即执行：首次加载js就执行了闭包功能，意味着首次加载js消耗性能较大，以后每次调用消耗性能小

let B = {
   
    on: (function () {
   
        // 如果支持addEventListener方法
        if (document.addEventListener) {
   
            // 返回新定义方法
            return function (dom, type, fn) {
   
                dom.addEventListener(type, fn, false);
            }
            // 如果支持attachEvent方法（IE）
        } else if (document.attachEvent) {
   
            // 返回新定义方法
            return function (dom, type, fn) {
   
                dom.attachEvent('on' + type, fn);
            }
            // 定义on方法
        } else {
   
            // 返回新定义方法
            return function (dom, type, fn) {
   
                dom['on' + type] = fn;
            }
        }
    }()),
};

B.on($('b1'), 'click', function (e) {
   
    console.log(e.target, e);
});

惰性绑定

利用方法的重写覆盖实现，只有第一次调用的时候消耗性能，以后每次调用消耗性能较小

let C = {
   
    on(dom, type, fn) {
   
        // 如果支持addEventListener方法
        if (dom.addEventListener) {
   
            // 显示重定义on方法
            A.on = function (dom, type, fn) {
   
                dom.addEventListener(type, fn, false);
            };
            // 如果支持attachEvent方法（IE）
        } else if (dom.attachEvent) {
   
            // 显示重定义on方法
            A.on = function (dom, type, fn) {
   
                dom.attachEvent('on' + type, fn);
            };
            // 如果支持DOM0级事件绑定
        } else {
   
            // 显示重定义on方法
            A.on = function (dom, type, fn) {
   
                dom['on' + type] = fn;
            };
        }
        // 执行重定义on方法
        A.on(dom, type, fn);
    }
};

C.on($('c1'), 'click', function (e) {
   
    console.log(e.target, e);
});

特点：

惰性模式是一种拖延模式，由于对象的创建或者数据的计算会花费高昂的代价（如页面刚加载时无法辨别是该浏览器支持某个功能，此时创建对象是不够安全的），因此页面之处会延迟对这一类对象的创建。

• 惰性模式又分为两种：
  1. 文件加载后立即执行对象方法来重定义对象,由于文件加载时执行，因此会占用一些资源;
  2. 当第一次使用方法对象时重定义对象,由于在第一次使用时重定义对象，以致第一次执行时间增加
• 有时候两种方式对资源的开销都是可接受的，因此到底使用哪种方式，要看具体需求而定