js 惰性载入函数（ 能力检测 ）

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

1getUrlParam() {
2		let params = {};
3		const url = window.location.href.replace(/#\//g,'').replace(/\?/g,'&');
4		
5		url.replace(/[?&]+([^=&]+)=([^&]*)/gi,function(m, key, value) {
6				params[key] = value;
7			}
8		);
9		return params 
10},

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

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

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

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

1function ajax() {
2           const url = window.location.href;
3           console.log('111111',url)
4           if( typeof XMLHttpRequest != undefined ){
5               ajax= function () {
6                   console.log('有XMLHttpRequest',url)
7               }
8           }else {
9               ajax= function () {
10                   onsole.log('没有XMLHttpRequest')
11               }
12           }
13           return ajax()
14}
15console.log(ajax());
16console.log(ajax());
17console.log(ajax());
18console.log(ajax());

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

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

1export const on = (() => {
2  if (!!document.addEventListener) {
3    return (element, event, handler) => {
4      if (element && event && handler) {
5        element.addEventListener(event, handler, false);
6      }
7    };
8  } else {
9    return (element, event, handler) => {
10      if (element && event && handler) {
11        (element).attachEvent('on' + event, handler);
12      }
13    };
14  }
15})();

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

总结

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