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


Posted in Javascript onAugust 27, 2017

前言

本文主要给大家介绍了关于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

总结

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

Javascript 相关文章推荐
javascript同步Import,同步调用外部js的方法
Jul 08 Javascript
javascript 图片上一张下一张链接效果代码
Mar 12 Javascript
javascript中onclick(this)用法介绍
Apr 19 Javascript
基于jquery实现智能表单验证操作
May 09 Javascript
javascript基础知识
Jun 07 Javascript
微信小程序 Page()函数详解
Oct 17 Javascript
使用AngularJS 跨站请求如何解决jsonp请求问题
Jan 16 Javascript
你可能不知道的JSON.stringify()详解
Aug 17 Javascript
vue实现验证码按钮倒计时功能
Apr 10 Javascript
vue插件实现v-model功能
Sep 10 Javascript
vue项目中使用tinymce编辑器的步骤详解
Sep 11 Javascript
vue滚动tab跟随切换效果
Jun 29 Javascript
Vue实现typeahead组件功能(非常靠谱)
Aug 26 #Javascript
vue下跨域设置的相关介绍
Aug 26 #Javascript
客户端(vue框架)与服务器(koa框架)通信及服务器跨域配置详解
Aug 26 #Javascript
微信小程序实现顶部普通选项卡效果(非swiper)
Jun 19 #Javascript
微信小程序实现顶部选项卡(swiper)
Jun 19 #Javascript
js实现本地时间同步功能
Aug 26 #Javascript
基于jQuery实现图片推拉门动画效果的两种方法
Aug 26 #jQuery
You might like
PHP 中执行系统外部命令
2006/10/09 PHP
提示Trying to clone an uncloneable object of class Imagic的解决
2011/10/27 PHP
php动态函数调用方法
2015/05/21 PHP
在PHP 7下安装Swoole与Yar,Yaf的方法教程
2017/06/02 PHP
基于php编程规范(详解)
2017/08/17 PHP
PHP函数用法详解【初始化、嵌套、内置函数等】
2020/06/02 PHP
jquery获取div宽度的实现思路与代码
2013/01/13 Javascript
js二级地域选择的实现方法
2013/06/17 Javascript
Angular directive递归实现目录树结构代码实例
2017/05/05 Javascript
原生js实现trigger方法示例代码
2019/05/22 Javascript
小程序点击图片实现png转jpg
2019/10/22 Javascript
对vue中的事件穿透与禁止穿透实例详解
2019/10/28 Javascript
浅析js实现网页截图的两种方式
2019/11/01 Javascript
VueX模块的具体使用(小白教程)
2020/06/05 Javascript
jQuery实时统计输入框字数及限制
2020/06/24 jQuery
vue中的循环对象属性和属性值用法
2020/09/04 Javascript
vant中的toast轻提示实现代码
2020/11/04 Javascript
[01:41]DOTA2超级联赛专访YYF 称一辈子难忘TI2
2013/05/28 DOTA
在Python的setuptools框架下生成egg的教程
2015/04/13 Python
Python简单实现socket信息发送与监听功能示例
2018/01/03 Python
python模拟实现分发扑克牌
2020/04/22 Python
如何理解Python中的变量
2020/06/01 Python
Python3爬虫关于识别检验滑动验证码的实例
2020/07/30 Python
Python pexpect模块及shell脚本except原理解析
2020/08/03 Python
python实现文件+参数发送request的实例代码
2021/01/05 Python
python中编写函数并调用的知识点总结
2021/01/13 Python
CSS3弹性伸缩布局之box布局
2016/07/12 HTML / CSS
美体小铺美国官网:The Body Shop美国
2017/11/10 全球购物
sleep()方法和wait()方法的区别是什么
2012/11/17 面试题
副处级干部考察材料
2014/05/17 职场文书
数学兴趣小组活动总结
2014/07/08 职场文书
2014年前台个人工作总结
2014/11/14 职场文书
老乡会致辞
2015/07/28 职场文书
教师正风肃纪心得体会
2016/01/15 职场文书
2016会计专业自荐信范文
2016/01/28 职场文书
Python编程编写完善的命令行工具
2021/09/15 Python