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

请叫我海龟先生 等级 403 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);
      }
    };
  }
})();

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

总结

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

收藏
评论区

相关推荐

让你瞬间提高工作效率的常用js函数汇总(持续更新)
前言 本文总结了项目开发过程中常用的js函数和正则,意在提高大家平时的开发效率,具体内容如下: 1. 常用的正则校验 2. 常用的设备检测方式 3. 常用的日期时间函数 4.
项目实战之---AES 加密
ajax/index.js import axiosApi from '../js/fetch'; import { baseUrl, headerParams } from '../js/baseUrl'; // import引用AES源码js import CryptoJS from 'cryptojs/cryptojs'; console.lo
web性能优化的15条实用技巧
javascript在浏览器中运行的性能,可以认为是开发者所面临的最严重的可用性问题。这个问题因为javascript的阻塞性而变得复杂,事实上,多数浏览器使用单一进程来处理用户界面和js脚本执行,所以同一时刻只能做一件事。js执行过程耗时越久,浏览器等待响应的时间越长。 加载和执行 1.提高加载性能 1.IE8,FF,3.5,Safari 4和
每天学点 JS 编码规范(2):Objects
(给前端大全加星标,提升前端技能) 英文:AirBnB,翻译:Kakaka Hou 为什么要在前端大全推送这个系列? 前段时间有读者通过我的个人微信,提议能不能推送一些编程规范的文章。我们以前关注过 Airbnb 在 GitHub 上开源的 JS 编程规范(现在有10万 star,可见受欢迎程度),但因为篇幅太长,一直没有推送过。现在化整为零,设立这
js 惰性载入函数( 能力检测 )
今天在做项目时,需要对地址栏参数做处理,于是便作了如下处理 javascript getUrlParam() { let params {}; const url window.location.href.replace(/\//g,'').replace(/\?/g,'&'); url.replace(/?&(^&)
几个常用js库,别再重复造轮子了
年底了,总结下今年用到的一些有意思的《js轮子》(只是大概列出些比较有意思的库,每个标题都是超链接,可点击自行查阅) 希望能对您有用! 如有意思的 轮子 可以在评论列出一起讨论下 color(https://links.jianshu.com/go?tohttps%3A%2F%2Fwww.npmjs.com%2Fpackage%2Fco
前端面试题自检 JS CSS 部分
JS类型 JavaScript的简单数据类型Number , String , Boolean , Undefined , Null , Symbol typeof 操作符的返回值 number string boolean undefined object function
js异步的5种样式
js异步的5种样式 1.定时器 2.AJAX 3.Promise 4.Generator 5.asyns和awite  1.定时器     setTimeout() : 延时器        可以传入三个分别是            1)code:必
js-Answers一
JavaScript的组成 JavaScript 由以下三部分组成: 1. ECMAScript(核心):JavaScript 语言基础 2. DOM(文档对象模型):规定了访问HTML和XML的接口 3. BOM(浏览器对象模型):提供了浏览器窗口之间进行交互的对象和方法 JS的基本数据类型和引用数据类型
「组件」返回顶部按钮
样式如图1:在components文件夹下新建BackTop.vue js<template <div class"backTopBtn" <a href"javascript:;" <div vif"btnFlag" class"btn" @click"backTop"TOP</div
js去除字符串
js去除字符串js<DOCTYPE html<html<head <title</title</head<body</body<script type"text/javascript" function delHtmlTag(str){   return str.replace(/<^/g,""); } var s
js删除表格中的某一行
点击表格中的内容,删除某一行正文js代码如下 function removeTd(obj) { obj.parentNode.parentNode.remove();}
只听说过CSS in JS,怎么还有JS in CSS?
CSS in JS是一种解决css问题想法的集合,而不是一个指定的库。从CSS in JS的字面意思可以看出,它是将css样式写在JavaScript文件中,而不需要独立出.css、.less之类的文件。将css放在js中使我们更方便的使用js的变量、模块化、treeshaking。还解决了css中的一些问题,譬如:更方便解决基于状态的样式,更容易追溯依赖关
React - Fiber原理
浏览器渲染 屏幕刷新率(FPS) 浏览器的正常绘制频率是60次/秒,小于这个值时,用户会感觉到卡顿 绘制一次的称为一帧,平均每帧16.6ms 帧 每个帧的开头包括样式计算、布局和绘制 js的执行是单线程,js引擎和页面渲染引擎都占用主线程,GUI渲染和Javascript执行两者是互斥的 如果某个js任务执行时间过长,浏览器会推迟渲染,每
从 生成器 到 promise+async
本文主要讲解js中关于生成器的相关概念和作用,以及到后面结合 promise 实现 es7中的 async 原理,你将学习到js中异步流程控制相关知识 1、认识生成器思考如下代码:javascript let x 1 function foo() x++ bar() console.log(x) // 3 function bar(