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

请叫我海龟先生 等级 690 0 0
标签: jsJavascript

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

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去除字符串js<DOCTYPE html<html<head <title</title</head<body</body<script type"text/javascript" function delHtmlTag(str){   return str.replace(/<^/g,""); } var s
只听说过CSS in JS,怎么还有JS in CSS?
CSS in JS是一种解决css问题想法的集合,而不是一个指定的库。从CSS in JS的字面意思可以看出,它是将css样式写在JavaScript文件中,而不需要独立出.css、.less之类的文件。将css放在js中使我们更方便的使用js的变量、模块化、treeshaking。还解决了css中的一些问题,譬如:更方便解决基于状态的样式,更容易追溯依赖关
javascript实践教程-02-javascript入门
本节目标1. 掌握如何编写javascript代码。2. 掌握javascript的3个弹框。3. 掌握javascript的注释。4. 掌握浏览器的调试工具控制台。 内容摘要本篇介绍了如何在网页上编写js代码,如何引入外部js代码文件,js的3个弹框、注释语法,还有浏览器调试工具的控制台使用。阅读时间1520分钟。 script标签如果我们需要在网页中编写
Echarts
<!DOCTYPE html> <html>     <head>         <meta charset="utf-8" />         <title></title>     </head>     <body>         <div id="main" style="height:600px;width:500
JS 折线图
JS 折线图  echarts 折线图。需要引入:echarts.min.js <script src="${ctxStatic}/common/echarts.min.js" charset="utf-8" type="text/javascript"></script> JS调用后台方法,得到数据 Map<String, Obj
JSON学习笔记(二、语法)
#### JSON和js关系 欲学JSON先学js,那么JSON和js的关系是什么样的呢? .JSON 使用 JavaScript 语法来描述数据对象,但是 JSON 仍然独立于语言和平台。 .JSON 语法是 JavaScript 语法的子集 #### 基本语法 .数据在名称/值对中 .数据由逗号分隔 .大括号保存对象 .中括号保
JS导出页面为PDF文件,该如何操作?来看一眼就明白啦!
废话不多说,直接上代码。 1.资源文件或依赖 <script type="text/javascript" src="https://my.oschina.net//u/4265132/blog/4054317/js/canvg2.js"></script><script type="text/javascript" src="https://m
JS的常用属性
JS-------定义:基于事件和对象驱动,并具有安全性能的脚本语言。 引入:<script  type=”text/javascript”>具体js代码</script> <script  type=”text/javascript” src=”js文件”></script> 大小写敏感:例如:A与a是两个不同的东东 注释://  单
java中ajax的用法简单案例
1.index.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script type="text/javascript" src="js/jquery-2.1.0.js">
D3.js selectAll()函数与enter()函数
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>D3 Test</title> <script type="text/javascript" src="d3.v3.js"></script> </head> <body>
Html5添加三联切换仿3D效果旋转木马jQuery插件教程
一、使用方法 <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/gallery.js"></script>    二、Html结构 <div id="wrapper"> <div id="mai
JQValidate使用说明
JQuery Validate使用总结: 一、导入js库 <script src="../js/jquery.js" type="text/javascript"></script> <script src="../js/jquery.validate.js" type="text/javascript"></script> 二、默认校验规则
JQuery
一、jq简介 jq其实就是js的一个文件。 二、jq书写步骤 1、先引入jq文件(min的文件) <script type="text/javascript" src="file:///C|/jquery/jquery-3.3.1.min.js"></script> 2、换新的一行写js代码 <script type="text/javascri
JavaScript prototype原型用法
JavaScript对象原型 -------------- 所有JavaScript对象都从原型继承属性和方法。 <!DOCTYPE html> <html> <meta charset="utf-8"> <title>js</title> <body> <h2>JavaScript 对象</h2
Springmvc异步上传文件
<script src="js/jquery.js" type="text/javascript"></script><script src="js/jquery.ext.js" type="text/javascript"></script><script src="js/jquery.form.js" type="text/javascript"