返回函数的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 相关文章推荐
js 获取元素在页面上的偏移量的方法汇总
Apr 13 Javascript
javascript基于prototype实现类似OOP继承的方法
Dec 16 Javascript
JavaScript中文件上传API详解
Apr 01 Javascript
JavaScript实战之带收放动画效果的导航菜单
Aug 16 Javascript
学习vue.js中class与style绑定
Dec 03 Javascript
jQuery插件HighCharts绘制2D带有Legend的饼图效果示例【附demo源码下载】
Mar 10 Javascript
jquery拖动改变div大小
Jul 04 jQuery
JSONP原理及应用实例详解
Sep 13 Javascript
js实现点击展开隐藏效果(实例代码)
Sep 28 Javascript
Vue中使用canvas方法总结
Feb 12 Javascript
微信小程序和百度的语音识别接口详解
May 06 Javascript
jquery轻量级数字动画插件countUp.js使用详解
Oct 17 jQuery
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
php若干单维数组遍历方法的比较
2011/09/20 PHP
php中判断文件空目录是否有读写权限的函数代码
2012/08/07 PHP
php生成图片缩略图的方法
2015/04/07 PHP
wordpress自定义标签云与随机获取标签的方法详解
2019/03/22 PHP
微信JSSDK分享功能图文实例详解
2019/04/08 PHP
laravel5.6中的外键约束示例
2019/10/23 PHP
XAMPP升级PHP版本实现步骤解析
2020/09/04 PHP
jQuery Select(单选) 模拟插件 V1.3.62 改进版
2010/07/17 Javascript
jQuery-Tools-overlay 使用介绍
2012/07/14 Javascript
中止javascript执行的方法
2014/02/14 Javascript
jQuery将所有被选中的checkbox某个属性值连接成字符串的方法
2015/01/24 Javascript
使用AngularJS 应用访问 Android 手机的图片库
2015/03/24 Javascript
详细解读JavaScript的跨浏览器事件处理
2015/08/12 Javascript
jQuery实现三级菜单的代码
2016/05/09 Javascript
Javascript基础教程之比较null和undefined值
2016/05/16 Javascript
js格式化时间的简单实例
2016/11/27 Javascript
node.js中express中间件body-parser的介绍与用法详解
2017/05/23 Javascript
JavaScript使用FileReader实现图片上传预览效果
2020/03/27 Javascript
Vue实现微信支付功能遇到的坑
2019/06/05 Javascript
浅谈vue项目用到的mock数据接口的两种方式
2019/10/09 Javascript
[08:02]DOTA2牵红线 zhou神抱得美人归
2014/03/22 DOTA
[01:01:51]EG vs VG Supermajor小组赛B组 BO3 第二场 6.2
2018/06/03 DOTA
python多线程http下载实现示例
2013/12/30 Python
windows10系统中安装python3.x+scrapy教程
2016/11/08 Python
python使用arcpy.mapping模块批量出图
2017/03/06 Python
Django框架模板语言实例小结【变量,标签,过滤器,继承,html转义】
2019/05/23 Python
Python获取当前脚本文件夹(Script)的绝对路径方法代码
2019/08/27 Python
python 爬取B站原视频的实例代码
2020/09/09 Python
Windows下pycharm安装第三方库失败(通用解决方案)
2020/09/17 Python
美国在线面料商店:Fashion Fabrics Club
2020/01/31 全球购物
制定岗位职责的原则
2013/11/08 职场文书
教师自我鉴定
2013/12/13 职场文书
党务公开方案
2014/05/06 职场文书
2015年生活老师工作总结
2015/05/27 职场文书
小学生班干部竞选稿
2015/11/20 职场文书
springboot如何接收application/x-www-form-urlencoded类型的请求
2021/11/02 Java/Android