菜单

3页_javascript技巧_脚本之家

2020年3月23日 - www.2138.com

前言

这篇文章阐述的是一种函数式编程(functional-programming)设计模式,我称之为惰性函数定义(LazyFunctionDefinition)。我不止一次发现这种模式在JavaScript中大有用处,尤其是编写跨浏览器的、高效运行的库之时。
热身问题
编写一个函数foo,它返回的是Date对象,这个对象保存的是foo首次调用的时间。
方法一:上古时代的技术
这个最简陋的解决方案使用了全局变量t来保存Date对象。foo首次调用时会把时间保存到t中。接下来的再次调用,foo只会返回保存在t中的值。
复制代码 代码如下:vart; functionfoo{
returnt; } t=newDate(); returnt;
}但是这样的代码有两个问题。第一,变量t是一个多余的全局变量,并且在foo调用的间隔期间有可能被更改。第二,在调用时这些代码的效率并没有得到优化因为每次调用foo都必须去求值条件。虽然在这个例子中,求值条件并不显得低效,但在现实世界的实践例子中常常会有极为昂贵的条件求值,比如在if-else-else-…的结构中。
方法二:模块模式
我们可以通过被认为归功于Cornford和Crockford的模块模式来弥补第一种方法的缺陷。使用闭包可以隐藏全局变量t,只有在foo内的代码才可以访问它。
复制代码 代码如下:varfoo={ vart;
returnfunction{ returnt; }
t=newDate;但这仍然没有优化调用时的效率,因为每次调用foo依然需要求值条件。
虽然模块模式是一个强大的工具,但我坚信在这种情形下它用错了地方。
方法三:函数作为对象
由于JavaScript的函数也是对象,所以它可以带有属性,我们可以据此实现一种跟模块模式质量差不多的解决方案。
复制代码 代码如下:functionfoo{
returnfoo.t; } foo.t=newDate(); returnfoo.t;
}在一些情形中,带有属性的函数对象可以产生比较清晰的解决方案。我认为,这个方法在理念上要比模式模块方法更为简单。
这个解决方案避免了第一种方法中的全局变量t,但仍然解决不了foo每次调用所带来的条件求值。
123下一页阅读全文

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

需求

3页_javascript技巧_脚本之家。我们现在需要写一个 foo 函数,这个函数返回首次调用时的 Date
对象,注意是首次。

解决一:普通方法

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

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

解决二:闭包

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

var foo =  { var t; return function return t; t = new Date;

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

解决三:函数对象

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

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

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

解决四:惰性函数

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

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

更多应用

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

// 简化写法function addEvent  { if (window.addEventListener) { el.addEventListener; } else if{ el.attachEvent; }}

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

利用惰性函数,我们可以这样做:

function addEvent  { if (window.addEventListener) { addEvent = function  { el.addEventListener; } } else if{ addEvent = function  { el.attachEvent; } }}

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

var addEvent = { if (window.addEventListener) { return function  { el.addEventListener; } } else if{ return function  { el.attachEvent; } }})();

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

重要参考

Lazy Function Definition Pattern

总结

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

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图