返回函数的JavaScript函数


Posted in Javascript onJune 14, 2016

几个星期前,我发了一条微博说我喜欢返回函数的函数。很快就出现了几个回复,基本是都是….什么东东?!对于一个程序员来说,理解返回函数的函数是一个非常重要的技能,使用它你能节省很多代码,让JavaScript更高效,让你进一步理解JavaScript的强大之处。下面是我写的几个简单的例子,我希望通过它你能理解我所表达的意思。

假设你有一个对象,包含有两个子对象,它们都有get方法,这两个方法非常相似,稍有不同:

var accessors = {
 sortable: {
 get: function() {
  return typeof this.getAttribute('sortable') != 'undefined';
 }
 },
 droppable: {
 get: function() {
  return typeof this.getAttribute('droppable') != 'undefined';
 }
 }
};

重复的代码不是一个好的现象,所以我们要创建一个外部函数,接受一个属性名称:

function getAttribute(attr) {
 return typeof this.getAttribute(attr) != 'undefined';
}

var accessors = {
 sortable: {
 get: function() {
  return getAttribute('sortable');
 }
 },
 droppable: {
 get: function() {
  return getAttribute('droppable');
 }
 }
};

这样好多了,但仍不完美,因为还是有些多余的部分,更好的方法是要让它直接返回最终需要的函数——这样能消除多余的函数执行:

function generateGetMethod(attr) {
 return function() {
 return typeof this.getAttribute(attr) != 'undefined';
 };
}

var accessors = {
 sortable: {
 get: generateGetMethod('sortable')
 },
 droppable: {
 get: generateGetMethod('droppable')
 }
};

/* 它跟最初的方法是完全等效的:*/

var accessors = {
 sortable: {
 get: function() {
  return typeof this.getAttribute('sortable') != 'undefined';
 }
 },
 droppable: {
 get: function() {
  return typeof this.getAttribute('droppable') != 'undefined';
 }
 }
};

*/

上面你看到的就是一个返回函数的函数;每个子对象里都有了自己的get方法,但却去掉了多余的函数嵌套执行过程。

这是一种非常有用的技术,能帮你消除重复相似的代码,如果使用的恰当,能让你的代码更可读,更易维护!

大家理解了吗?

Javascript 相关文章推荐
用正则获取指定路径文件的名称
Feb 27 Javascript
IE event.srcElement和FF event.target 功能比较
Mar 01 Javascript
jquery实现实时改变网页字体大小、字体背景色和颜色的方法
Aug 05 Javascript
基于jQuery实现的双11天猫拆红包抽奖效果
Dec 01 Javascript
基于javascript实现图片滑动效果
May 07 Javascript
项目实践一图片上传之form表单还是base64前端图片压缩(前端图片压缩)
Jul 28 Javascript
利用AngularJs实现京东首页轮播图效果
Sep 08 Javascript
详解javascript表单的Ajax提交插件的使用
Dec 29 Javascript
React Js 微信禁止复制链接分享禁止隐藏右上角菜单功能
May 26 Javascript
微信小程序使用scroll-view标签实现自动滑动到底部功能的实例代码
Nov 09 Javascript
VUE引入第三方js包及调用方法讲解
Mar 01 Javascript
vue 获取视频时长的实例代码
Aug 20 Javascript
js数组的五种迭代方法及两种归并方法(推荐)
Jun 14 #Javascript
Web程序员必备的7个JavaScript函数
Jun 14 #Javascript
Javascript中的迭代、归并方法详解
Jun 14 #Javascript
JavaScript接口的实现三种方式(推荐)
Jun 14 #Javascript
jQuery处理XML文件的几种方法
Jun 14 #Javascript
你不需要jQuery(三) 新AJAX方法fetch()
Jun 14 #Javascript
深入理解jQuery 事件处理
Jun 14 #Javascript
You might like
2020年4月新番动漫目录 官方宣布4月播出的作品一览
2020/03/08 日漫
PHP用SAX解析XML的实现代码与问题分析
2011/08/22 PHP
解析php session_set_save_handler 函数的用法(mysql)
2013/06/29 PHP
浅谈PHP正则表达式中修饰符/i, /is, /s, /isU
2014/10/21 PHP
discuz目录文件资料汇总
2014/12/30 PHP
标准版Eclipse搭建PHP环境的详细步骤
2015/11/18 PHP
PHP读取文本文件并逐行输出该行使用最多的字符与对应次数的方法
2016/11/25 PHP
PHP实现二维数组按照指定的字段进行排序算法示例
2019/04/23 PHP
css3元素简单的闪烁效果实现(html5 jquery)
2013/12/28 Javascript
javascript实现无缝上下滚动特效
2015/12/16 Javascript
JQuery datepicker 用法详解
2015/12/25 Javascript
js事件驱动机制 浏览器兼容处理方法
2016/07/23 Javascript
Javascript使用uploadify来实现多文件上传
2016/11/16 Javascript
如何在vue中使用ts的示例代码
2018/02/28 Javascript
Vue2.0中集成UEditor富文本编辑器的方法
2018/03/03 Javascript
vue动态删除从数据库倒入列表的某一条方法
2018/09/29 Javascript
vue组件中iview的modal组件爬坑问题之modal的显示与否应该是使用v-show
2019/04/12 Javascript
小程序如何使用分包加载的实现方法
2019/05/22 Javascript
详解Python中find()方法的使用
2015/05/18 Python
Python利用带权重随机数解决抽奖和游戏爆装备问题
2016/06/16 Python
python监控键盘输入实例代码
2018/02/09 Python
Python爬虫之网页图片抓取的方法
2018/07/16 Python
pycharm显示远程图片的实现
2019/11/04 Python
Python中base64与xml取值结合问题
2019/12/22 Python
日本卡普空电视游戏软件公司官方购物网站:e-CAPCOM
2018/07/17 全球购物
美国NBA官方商店:NBA Store
2019/04/12 全球购物
物流仓管员岗位职责
2013/12/04 职场文书
小学红领巾中秋节广播稿
2014/01/13 职场文书
《陈毅探母》教学反思
2014/05/01 职场文书
煤矿安全生产标语
2014/06/06 职场文书
安全生产知识竞赛活动总结
2014/07/07 职场文书
庆祝三八妇女节标语
2014/10/09 职场文书
2015元旦晚会主持人开场白+结束语
2014/12/14 职场文书
悬空寺导游词
2015/02/05 职场文书
2015年幼儿园德育工作总结
2015/05/25 职场文书
Redis 限流器
2022/05/15 Redis