什么是高阶函数
高阶函数就是接受一个函数作为参数,或者将一个函数作为返回值的函数。其实高阶函数并不是什么高大上的概念,常用的Array.prototype.forEach,Array.prototype.map,Array.prototype.reduce都是高阶函数。除此之外,防抖,节流所用的函数也是高阶函数。
小程序登录状态检测在早期的小程序里,用户一进入小程序,就会进行登录检测。如果用户没有登录,就直接跳转到登录页。这样做的优点是,在开发过程中可以省去在各个事件处理函数中判断用户是否登录的逻辑,因为如果用户没有登录,是看不到别的页面的。但是这种做法的缺点也很明显:首先,用户不登录就不能体验小程序的功能,而某些功能(如介绍页)可能是不需要登录才能看的;其次,从9月1日起,这么做的小程序可能通不过审核了。。。
于是,我们必须将原来一进入就登录的流程进行调整。将不需要登录的页面放出来,让游客也可以访问。把登录逻辑放到需要登录态的各个button的点击事件中去。
这时,我们就会遇到一个问题,那就是我们需要在原先的事件处理函数中重复插入这样的代码:
// 假设我们将登录态保存在app.globalData里 if (!getApp().globalData.login) { // 跳转到登录页面 this.toLogin() return } // 执行真正的事件处理逻辑,如点赞,购买,跳转等当我们需要在五六个地方做这样的处理时,就会觉得很烦恼了,因为重复意味着不好维护。所以我们希望把这种重复的逻辑抽离出来,比如使用高阶函数。
写一个检测登录态的高阶函数接下来我们就写一个可以复用的高阶函数。按照上面的思路和高阶函数的定义,我们的高阶函数应该接受一个事件处理函数,然后返回一个埋入判断登录逻辑的新的事件处理函数:
function checkLogin(handler, ctx) { return function(..args) { if (!getApp().globalData.login) { // 跳转到登录页面 this.toLogin() return; } handler.call(ctx, ...args) } }然后我们把这个函数写到模块里并导出:
// checkLogin.js export default function checkLogin(){ ... }当我们需要在某个事件处理函数中校验登录时,可以将这个函数使用我们之前的高阶函数包装一下:
import checkLogin from 'checkLogin.js' this.handler = checkLogin((event) => { //一个handler }, this)这样我们就实现了对登录逻辑的抽离和复用(本文完),如果大家有更好的方法,欢迎在评论区指出哦
分类: