js 惰性载入函数( 能力检测 )

请叫我海龟先生 等级 113 0 0

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

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);
      }
    };
  }
})();

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

总结

额。。。好像发现研究的东西和本意关系不大,甚至还有点偏题,不过也算是误打误撞学习了一个知识点。

预览图
收藏
评论区