js 惰性载入函数（能力检测） - HelloWorld开发者社区

今天在做项目时，需要对地址栏参数做处理，于是便作了如下处理

getUrlParam() {
        let params = {};
        const url = window.location.href.replace(/#\//g,'').replace(/\?/g,'&');

        url.replace(/[?&]+([^=&]+)=([^&]*)/gi,function(m, key, value) {
                params[key] = value;
            }
        );
        return params 
},

这个函数很简单，就是把导航栏参数转换为键值对，也没得什么难度，由于在项目中需要多次调用次函数，不免要多次截取地址栏参数，恍惚间记得以前好像看过有关纯函数的能力检测、记忆函数之类的操作，当然也可以直接把 url变量提到外面，或者重新写一个模块用来存 getUrlParam 返回的值，总之方法很多，目的就是对window.location实现求值一次就行了。

既然想到了能力检测、记忆函数那肯定得学习下

在 JavaScript高级程序设计（第3版）中有如下测试（浏览器环境 ajax兼容性），这里简单实现下，目的当然就是实现只检测一次能力检测

第一种，函数被调用的时候重新处理函数

function ajax() {
           const url = window.location.href;
           console.log('111111',url)
           if( typeof XMLHttpRequest != undefined ){
               ajax= function () {
                   console.log('有XMLHttpRequest',url)
               }
           }else {
               ajax= function () {
                   onsole.log('没有XMLHttpRequest')
               }
           }
           return ajax()
}
console.log(ajax());
console.log(ajax());
console.log(ajax());
console.log(ajax());

上面这个方法，无论你调用多少次 ajax()，都只会检测一次兼容性，为了直观看到效果，特地加了这句 console.log('111111',url)，也只会打印一次实现的道理也很简单，一次检测后就将 ajax 函数重新赋值，这样每次访问实际访问的检测后的值

第二种声明函数时，就指定合适的函数

export const on = (() => {
  if (!!document.addEventListener) {
    return (element, event, handler) => {
      if (element && event && handler) {
        element.addEventListener(event, handler, false);
      }
    };
  } else {
    return (element, event, handler) => {
      if (element && event && handler) {
        (element).attachEvent('on' + event, handler);
      }
    };
  }
})();

这种方式就是创建一个匿名、执行的函数，直接将函数赋值为检测后的值，两种方式都可以实现能力检测，实现性能优化。