JavaScript学习笔记之惰性函数示例详解

前言

本文主要给大家介绍了关于JavaScript惰性函数的相关内容，分享出来供大家参考学习，下面话不多说了，来一起看看详细的介绍吧。

需求

我们现在需要写一个 foo 函数，这个函数返回首次调用时的 Date 对象，注意是首次。

解决一：普通方法

var t;
function foo() {
 if (t) return t;
 t = new Date()
 return t;
}

问题有两个，一是污染了全局变量，二是每次调用 foo 的时候都需要进行一次判断。

解决二：闭包

我们很容易想到用闭包避免污染全局变量。

var foo = (function() {
 var t;
 return function() {
 if (t) return t;
 t = new Date();
 return t;
 }
})();

然而还是没有解决调用时都必须进行一次判断的问题。

解决三：函数对象

函数也是一种对象，利用这个特性，我们也可以解决这个问题。

function foo() {
 if (foo.t) return foo.t;
 foo.t = new Date();
 return foo.t;
}

依旧没有解决调用时都必须进行一次判断的问题。

解决四：惰性函数

不错，惰性函数就是解决每次都要进行判断的这个问题，解决原理很简单，重写函数。

var foo = function() {
 var t = new Date();
 foo = function() {
 return t;
 };
 return foo();
};

更多应用

DOM 事件添加中，为了兼容现代浏览器和 IE 浏览器，我们需要对浏览器环境进行一次判断：

// 简化写法
function addEvent (type, el, fn) {
 if (window.addEventListener) {
 el.addEventListener(type, fn, false);
 }
 else if(window.attachEvent){
 el.attachEvent('on' + type, fn);
 }
}

问题在于我们每当使用一次 addEvent 时都会进行一次判断。

利用惰性函数，我们可以这样做：

function addEvent (type, el, fn) {
 if (window.addEventListener) {
 addEvent = function (type, el, fn) {
  el.addEventListener(type, fn, false);
 }
 }
 else if(window.attachEvent){
 addEvent = function (type, el, fn) {
  el.attachEvent('on' + type, fn);
 }
 }
}

当然我们也可以使用闭包的形式：

var addEvent = (function(){
 if (window.addEventListener) {
 return function (type, el, fn) {
  el.addEventListener(type, fn, false);
 }
 }
 else if(window.attachEvent){
 return function (type, el, fn) {
  el.attachEvent('on' + type, fn);
 }
 }
})();

当我们每次都需要进行条件判断，其实只需要判断一次，接下来的使用方式都不会发生改变的时候，想想是否可以考虑使用惰性函数。

重要参考

Lazy Function Definition Pattern

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对我们的支持。

赞 (0)

相关推荐

  • JavaScript 函数惰性载入的实现及其优点介绍

    最近看JavaScript高级程序设计,大有收获,接下来几天写一下读书笔记.之前写了一篇Ajax初步理解的随笔,里面有个函数用来创建XmlHttpRequest对象,浏览器兼容性原因,写出的代码通过大量if判断或者try,catch语句将函数引导到正确代码处. 复制代码 代码如下: <script type="text/javascript"> function createXHR(){ var xhr = null; try { // Firefox, Opera 8.0

  • 利用函数的惰性载入提高javascript代码执行效率

    在 javascript 代码中,因为各浏览器之间的行为的差异,我们经常会在函数中包含了大量的 if 语句,以检查浏览器特性,解决不同浏览器的兼容问题. 例如,我们最常见的为 dom 节点添加事件的函数: 复制代码 代码如下: function addEvent (type, element, fun) { if (element.addEventListener) { element.addEventListener(type, fun, false); } else if(element.a

  • JavaScript AJAX之惰性载入函数

    在JS中有些内存只需执行一遍即可,如浏览器类型检测是最常用的一个功能,因为我们使用Ajax的时候需要检测浏览器的内置的XHR.我们可以在第一次检测的时候记录下类型,往后在使用Ajax的时候就不需要再去检测浏览器类型了.在JS中就算只有一个if也总比没有if的语句效率要高. 普通Ajax方法 复制代码 代码如下: /**  * JS惰性函数  */   function ajax(){     if(typeof XMLHttpRequest != "undefined"){      

  • js正则表达式惰性匹配和贪婪匹配用法分析

    本文实例讲述了js正则表达式惰性匹配和贪婪匹配用法.分享给大家供大家参考,具体如下: 在讲贪婪模式和惰性模式之前,先回顾一下JS正则基础: 写法基础: ①不需要双引号,直接用//包含 => /wehfwue123123/.test(); ②反斜杠\表示转义 =>/\.jpg$/ ③用法基础:.test(str); 语法: ①锚点类 /^a/=>以"a"开头 /\.jpg$/=>以".jpg"结尾 ②字符类 [abc]:a或b或c [0-9]:

  • JavaScript学习笔记之惰性函数示例详解

    前言 本文主要给大家介绍了关于JavaScript惰性函数的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 需求 我们现在需要写一个 foo 函数,这个函数返回首次调用时的 Date 对象,注意是首次. 解决一:普通方法 var t; function foo() { if (t) return t; t = new Date() return t; } 问题有两个,一是污染了全局变量,二是每次调用 foo 的时候都需要进行一次判断. 解决二:闭包 我们很容易想到用闭

  • Python学习笔记之自定义函数用法详解

    本文实例讲述了Python学习笔记之自定义函数用法.分享给大家供大家参考,具体如下: 函数能提高应用的模块性,和代码的重复利用率.Python提供了许多内建函数,比如print()等.也可以创建用户自定义函数. 函数定义 函数定义的简单规则: 函数代码块以def关键词开头,后接函数标识符名称和圆括号(),任何传入参数和自变量必须放在圆括号中间 函数内容以冒号起始,并且缩进 若有返回值,Return[expression] 结束函数:不带return 表达式相当于返回None 函数通常使用三个单引

  • React学习笔记之列表渲染示例详解

    前言 本文主要给大家介绍了关于React列表渲染的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 示例详解: 列表渲染也很简单,利用map方法返回一个新的渲染列表即可,例如: const numbers = [1, 2, 3, 4, 5]; const listItems = numbers.map((number) => <li>{number}</li> ); ReactDOM.render( <ul>{listItems}<

  • Python3学习笔记之列表方法示例详解

    前言 本文主要给大家介绍了关于Python3列表方法的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 1 使用[]或者list()创建列表 user = [] user = list() 2 使用list() 可以将其他类型转换成列表 # 将字符串转成列表 >>> list('abcde') ['a', 'b', 'c', 'd', 'e'] # 将元祖转成列表 >>> list(('a','b','c')) ['a', 'b', 'c']

  • C#学习笔记- 随机函数Random()的用法详解

    Random.Next() 返回非负随机数: Random.Next(Int) 返回一个小于所指定最大值的非负随机数 Random.Next(Int,Int) 返回一个指定范围内的随机数,例如(-100,0)返回负数 1.random(number)函数介绍 见帮助文档,简单再提一下,random(number)返回一个0~number-1之间的随机整数.参数number代表一个整数. 示例: trace(random(5)); 2.Math.random() 见帮助文档.返回一个有14位精度的

  • Python模块glob函数示例详解教程

    Python模块glob函数示例详解教程

    目录 本文大纲 支持4个常用的通配符 1)glob()函数 2)iglob()函数 3)escape()函数 总结 本文大纲 glob模块也是Python标准库中一个重要的模块,主要用来查找符合特定规则的目录和文件,并将搜索的到的结果返回到一个列表中.使用这个模块最主要的原因就是,该模块支持几个特殊的正则通配符,用起来贼方便,这个将会在下方为大家进行详细讲解. 支持4个常用的通配符 使用glob模块能够快速查找我们想要的目录和文件,就是由于它支持*.**.? .[ ]这三个通配符,那么它们到底是

  • 人工智能学习Pytorch梯度下降优化示例详解

    人工智能学习Pytorch梯度下降优化示例详解

    目录 一.激活函数 1.Sigmoid函数 2.Tanh函数 3.ReLU函数 二.损失函数及求导 1.autograd.grad 2.loss.backward() 3.softmax及其求导 三.链式法则 1.单层感知机梯度 2. 多输出感知机梯度 3. 中间有隐藏层的求导 4.多层感知机的反向传播 四.优化举例 一.激活函数 1.Sigmoid函数 函数图像以及表达式如下: 通过该函数,可以将输入的负无穷到正无穷的输入压缩到0-1之间.在x=0的时候,输出0.5 通过PyTorch实现方式

  • python神经网络学习数据增强及预处理示例详解

    python神经网络学习数据增强及预处理示例详解

    目录 学习前言 处理长宽不同的图片 数据增强 1.在数据集内进行数据增强 2.在读取图片的时候数据增强 3.目标检测中的数据增强 学习前言 进行训练的话,如果直接用原图进行训练,也是可以的(就如我们最喜欢Mnist手写体),但是大部分图片长和宽不一样,直接resize的话容易出问题. 除去resize的问题外,有些时候数据不足该怎么办呢,当然要用到数据增强啦. 这篇文章就是记录我最近收集的一些数据预处理的方式 处理长宽不同的图片 对于很多分类.目标检测算法,输入的图片长宽是一样的,如224,22

  • JavaScript稀疏数组与孔hole示例详解

    JavaScript稀疏数组与孔hole示例详解

    目录 稀疏数组是什么 JavaScript数组天生就是稀疏数组 JavaScript数组稀疏特性带来的“怪异现象” slice会复制孔 forEach.every会跳过孔(不对孔调用回调函数) map不对孔调用回调函数,但是孔会保留 filter不对孔调用回调函数,但是孔会被过滤掉 join会将孔转化为一个空字符串进行拼接,与undefined一样 初始化无孔数组的方法 Array.apply(null, Array(n))的原理 稀疏数组是什么 在绝大多数JavaScript的实现中,数组是稀

  • JavaScript实现基础排序算法的示例详解

    目录 前言 正文 1.冒泡排序 2.选择排序 3.插入排序 4.快速排序 前言 文本来总结常见的排序算法,通过 JvavScript  来实现 正文 1.冒泡排序 算法思想:比较相邻两个元素的大小,如果第一个比第二个大,就交换它们.从头遍历到尾部,当一轮遍历完后,数组最后一个元素是最大的.除去最后一个元素,对剩下的元素重复执行上面的流程,每次找出剩余元素中最大的,遍历完后,数组是升序的 算法分析:总共需要进行length * (length - 1) / 2 次比较,所以时间复杂度为O(n^2)

随机推荐