JavaScript设计模式与开发实践——读书笔记1.高阶函数(上)
说来惭愧,4个多月未更新了。4月份以后就开始忙起来了,论文、毕设、毕业旅行等七七八八的事情占据了很多时间,毕业之后开始忙碌的工作,这期间一直想写博客,但是一直没能静下心写。这段时间在看《JavaScript设计模式与开发实践》,感觉很不错,受益匪浅。
这篇文章将围绕高阶函数是什么、高阶函数有什么作用等几个方面来进行介绍。
什么是高阶函数?
高阶函数是指至少满足下列条件之一的函数:
1.函数可以作为参数被传递
2.函数可以作为返回值输出
1.函数作为参数传递,这样我们可以抽离出一部分容易变化的业务逻辑,把这部分业务放在函数参数中,这样一来就可以分离业务代码中变化与不变的部分。常见的形式有:
1)回调函数
常见的回调如ajax中:当我们使用ajax发出请求,但是不知道请求返回的确切时间,我们可以使用回调来解决,将callback当作参数传入ajax请求的方法中,等请求完成后执行。
function getData(id, callback){
$.ajax({
type: 'GET',
url: 'http://163.com/?getData='+id,
dataType: 'json',
success: function(data){
callback(data);
}
})
}
getData(12345, function(data){console.log(data)})
回调函数不仅可以使用在异步请求中:
假如我们想在页面中创建一百个div节点,同时将这些节点都设置为隐藏,可以这么实现
function appendDiv(){
for(var i = 0; i < 100; i++){
var div = document.createElement('div');
div.innerHTML = i;
document.body.append(div);
div.style.display = 'none';
}
}
appendDiv()
这样写看似没有问题,但是当我们下次修改需求,将100个div改变背景颜色,这段代码就难以复用了。我们可以这样:
function appendDiv(callback){
for(var i = 0; i < 100; i++){
var div = document.createElement('div');
div.innerHTML = i;
document.body.append(div);
if(callback && typeof callback === 'function'){
callback(div)
}
}
}
appendDiv(function(node){
node.style.display = 'none'
})
通过使用回调,将业务代码将在回调函数中,可以抽离出一部分业务代码,对代码复用有很大的帮助。如果后期需要修改需求,改变颜色,改变大小等等只需要重新写回调函数即可。
2)Array.prototype.sort,该方法接受一个函数作为参数,这个函数告诉Array的排序规则,通过定义不同的方法实现不同的排序,使得sort非常灵活。
[1, 3, 4, 2].sort(function(a, b){
return a-b;
})
//输出[1, 2, 3, 4]
[1, 3, 4, 2].sort(function(a, b){
return b-a;
})
//输出[4, 3, 2, 1]
2.函数作为返回值输出
1)判断数据的类型
如之前的文章 http://www.cnblogs.com/ppforever/p/4362102.html 判断一个js对象是不是数组,将函数作为返回值。稍加扩展:
var isType = function(type){
//函数作为返回值
return function(obj){
return Object.prototype.toString.call(obj) === '[object '+ type +']';
}
}
var isArray = isType('Array');
var isString = isType('String');
var isNumber = isType('Number');
console.log(isArray([1, 6, 3]))
//true
我们也可以使用循环语句,批量注册isType方法:
var Type = {};
for(var i = 0, type; type = ['String', 'Array', 'Number'][i++]; ){
(function(type){
Type['is'+type] = function(obj){
return Object.prototype.toString.call(obj) === '[object '+ type +']';
}
})(type)
}
Type.isArray([]);
//true
Type.isString('abc');
//true
Type.isNumber(123);
//true
Type.isArray(123);
//false
上部分主要介绍高阶函数的常见形式,下部分将着重介绍高阶函数的高级应用。
JavaScript设计模式与开发实践——读书笔记1.高阶函数(上)的更多相关文章
- JavaScript设计模式与开发实践——读书笔记1.高阶函数(下)
上部分主要介绍高阶函数的常见形式,本部分将着重介绍高阶函数的高级应用. 1.currying currying指的是函数柯里化,又称部分求值.一个currying的函数会先接受一些参数,但不立即求值, ...
- Javascript设计模式与开发实践读书笔记(1-3章)
第一章 面向对象的Javascript 1.1 多态在面向对象设计中的应用 多态最根本好处在于,你不必询问对象“你是什么类型”而后根据得到的答案调用对象的某个行为--你只管调用行为就好,剩下的一切 ...
- javascript设计模式与开发实践阅读笔记(6)——代理模式
代理模式:是为一个对象提供一个代用品或占位符,以便控制对它的访问. 代理模式的关键是,当客户不方便直接访问一个对象或者不满足需要的时候,提供一个替身对象来控制对这个对象的访问,客户实际上访问的是替身对 ...
- javascript设计模式与开发实践阅读笔记(5)——策略模式
策略模式:定义一系列的算法,把它们一个个封装起来,并且使它们可以相互替换. 我的理解就是把各种方法封装成函数,同时存在一个可以调用这些方法的公共函数.这样做的好处是可以消化掉内部的分支判断,使代码效率 ...
- javascript设计模式与开发实践阅读笔记(8)——观察者模式
发布-订阅模式,也叫观察者模式:定义对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都将得到通知. 在JavaScript开发中,我们一般用事件模型来替代传统的观察者模式. ...
- javascript设计模式与开发实践阅读笔记(7)——迭代器模式
迭代器模式:指提供一种方法顺序访问一个聚合对象中的各个元素,而又不需要暴露该对象的内部表示. 迭代器模式可以把迭代的过程从业务逻辑中分离出来,在使用迭代器模式之后,即使不关心对象的内部构造,也可以按顺 ...
- javascript设计模式与开发实践阅读笔记(4)——单例模式
定义 单例模式:保证一个类仅有一个实例,并提供一个访问它的全局访问点. 具体来说,就是保证有些对象有且只有一个,比如线程池.全局缓存.浏览器中的window 对象等.在js中单例模式用途很广,比如登录 ...
- 《JavaScript设计模式与开发实践》笔记第八章 发布-订阅模式
第八章 发布-订阅模式 发布-订阅模式描述 发布-订阅模式又叫观察者模式,它定义对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都将得到通知. 发布-订阅模式可以广泛应用于 ...
- 《JavaScript设计模式与开发实践》笔记第一章
第一章 面向对象的JavaScript 动态类型语言和鸭子类型 编程语言按照数据类型大体可以分为两类:静态类型语言.动态类型语言. 静态类型语言:在编译时便已确定变量的类型. 优点: 在编译时就能发现 ...
随机推荐
- 对Feign的请求url 重写
需求:对当前请求的 url 重新构建 debug feign 的执行可知,重写 LoadBalancerFeignClient 类中的 execute 方法即可控制当前请求的url 代码分析 当引入 ...
- struts的标签
<%@ taglib uri="/struts-tags" prefix="s"%> <%@ taglib uri="/WEB-IN ...
- 【IDEA】与Eclipse "Link with Editor"等价功能设置
Link With Editor是Eclipse内置功能中十分小巧,但却异常实用的一个功能.这个开关按钮 (Toggle Button) 出现在各式导航器视图 ( 例如 Resource Explor ...
- DAY1-GO初识(概述)
一.概述 1.特征 1.1.语法简单:规则严谨.保留指针.但默认阻止指针运算.将切片和字典作为内置类型.更好的维护性: 1.2.并发模型:运行时用GOroutine,一个关键字.简单而自然:搭配cha ...
- UNIX环境高级编程学习笔记(十)为何 fork 函数会有两个不同的返回值【转】
转自:http://blog.csdn.net/fool_duck/article/details/46917377 以下是基于 linux 0.11 内核的说明. 在init/main.c第138行 ...
- libuv 一 环境搭建, hello TTY
引言 - 一时心起, libuv linux 搭建 有一天突然想起来想写个动画. 找了一下 ui 库太大. 后面想起以前弄过的 libuv. 但发现 libuv 相关资料也很少. 所以就有了这些内容. ...
- Django 1.10文档中文版Part2
目录 2.5 第一个Django app,Part 3:视图和模板 2.5.1 概览 2.5.2 编写更多的视图 2.5.3 编写能实际干点活的视图 2.5.4 404错误 2.5.5 使用模板系统 ...
- 轻量级运维工具-pssh,pscp,prsync,pslurp,pnuke
批量执行,并行传输,远程killall #yum安装 yum install pssh -y #yun安装后pscp改名为pscp.pssh #源码编译 wget https://pypi.pytho ...
- ubuntu下安装tftp服务器(转)
安装了好几次tftp服务器,每次在网上找安装方法,找到的都不一样,有的能用,有的不能用,先把一个能用的版本做一个备忘. 参考链接:http://www.cnblogs.com/geneil/archi ...
- 关于js函数 形参和局部变量名相同 的问题
原文:https://segmentfault.com/q/1010000007278354?_ea=1295176 问题: function f1(a) { console.log(a);// 10 ...