javascript设计模式(四)----高阶函数

简介: javascript设计模式(四)----高阶函数

前言

这篇文章非常荣幸写了两遍,之前地铁上写完忘记保存,有点心酸。回归正题,前三章节我们分别介绍了js的原型模式以及闭包等知识,作为正式学习设计模式前知识准备的最后一章,这一章将给大家介绍相关高阶函数的知识,希望大家可以认真看完,因为对后面相关设计模式的设计与理解起到很大的作用


正文

高阶函数的定义

高阶函数是至少满足以下两种情况的函数:

  • 函数可以作为函数的参数传递
  • 函数可以作为函数的返回值输出

通常我们的函数以某种数据类型的变量作为参与者,但是js的弱类型特性明显可以满足高阶函数的条件,让函数体本身也作为函数设计的一部分参与进来,下面将结合相关的例子对高阶函数进行进一步的介绍说明

函数作为函数参数传递

将函数作为函数参数传递在设计模式中有大量的运用,我们可以把业务函数中可变的部分加入到提取出来加入参数中,这样函数体保留的就是不变的那一部分业务逻辑,来实现函数的一个兼容性的复用,下面举一个例子进一步说明

假设有一天产品经理给我们提了一个需求,要求在页面中定义10个块状区域,并且隐藏,要求我们封装成相关工具类保证后面的复用。我们可以像下面640.png这样封装。


这样我们每次调用appendDiv的时候,我们就可以在页面中增加10个隐藏的块状区域了,但是这样有一个问题就是,如果有一天产品经理不需要一个div隐藏了,要求背景颜色变红,那我们又不得不复制一个新的函数出来,所以这里我们可以把操作的部分提取出来,后面只需要改变传入appendDiv的参数就可以了

640.png

这样工具类就定义好了,后面不管产品经理需要我们对这10个块状区域做什么操作,我们都不需要再修改这个工具类本身了,这就是提取出可变业务逻辑的函数设计思想

函数作为函数返回值输出

相比把函数当作参数传递,函数当作返回值输出的应用场景可能更多,也更能体现函数式编程的巧妙,因为把函数作为返回值输出,意味着返回了一个函数,也就是说之前的函数计算在结束后被进一步延续了

下面给大家举一个很常见的例子,函数防抖,所谓防抖,就是在触发事件后,n秒内只能执行一次,如果在n秒内又触发了函数,就会重新计算时间,所以防抖在事件触发以后函数并没有结束,而是要在n秒内判断是否再次触发,从而延续了函数进程,是适合使用高阶函数来实现的

640.png

小节

这一章我们主要介绍了高阶函数,我们了解到高阶函数是满足函数作为参数或者函数作为返回值两个条件之一的函数,并且举例进一步说明了他们的应用,下一章节我们将正式开始设计模式的学习

小伙伴们今天的学习就到这里了,如果觉得本文对你有帮助的话,欢迎转发,评论,收藏,点赞!!!

目录
相关文章
|
3月前
|
设计模式 JavaScript 前端开发
js设计模式【详解】—— 职责链模式
js设计模式【详解】—— 职责链模式
67 8
|
3月前
|
设计模式 JavaScript 前端开发
js设计模式【详解】—— 组合模式
js设计模式【详解】—— 组合模式
45 7
|
18天前
|
JSON JavaScript 前端开发
JavaScript第五天(函数,this,严格模式,高阶函数,闭包,递归,正则,ES6)高级
JavaScript第五天(函数,this,严格模式,高阶函数,闭包,递归,正则,ES6)高级
|
2月前
|
设计模式 JavaScript 前端开发
从工厂到单例再到策略:Vue.js高效应用JavaScript设计模式
【8月更文挑战第30天】在现代Web开发中,结合使用JavaScript设计模式与框架如Vue.js能显著提升代码质量和项目的可维护性。本文探讨了常见JavaScript设计模式及其在Vue.js中的应用。通过具体示例介绍了工厂模式、单例模式和策略模式的应用场景及其实现方法。例如,工厂模式通过`NavFactory`根据用户角色动态创建不同的导航栏组件;单例模式则通过全局事件总线`eventBus`实现跨组件通信;策略模式用于处理不同的表单验证规则。这些设计模式的应用不仅提高了代码的复用性和灵活性,还增强了Vue应用的整体质量。
21 0
|
2月前
|
设计模式 JavaScript 前端开发
小白请看 JS大项目宝典:设计模式 教你如何追到心仪的女神
小白请看 JS大项目宝典:设计模式 教你如何追到心仪的女神
|
3月前
|
设计模式 JavaScript Go
js设计模式【详解】—— 状态模式
js设计模式【详解】—— 状态模式
46 7
|
3月前
|
设计模式 JavaScript
js设计模式【详解】—— 桥接模式
js设计模式【详解】—— 桥接模式
52 6
|
3月前
|
设计模式 JavaScript
js设计模式【详解】—— 原型模式
js设计模式【详解】—— 原型模式
42 6
|
3月前
|
设计模式 JavaScript 算法
js设计模式【详解】—— 模板方法模式
js设计模式【详解】—— 模板方法模式
41 6
|
3月前
|
设计模式 存储 JavaScript
js设计模式【详解】—— 享元模式
js设计模式【详解】—— 享元模式
46 6
下一篇
无影云桌面