原副标题：前端开发之表达式式程式设计课堂教学
一、表达式式程式设计概要
常用应用领域情景
1、ES6中的map、filter、reduce等表达式
[ 1, 2, 3, 4, 5].map( x=> x * 2).filter( x=> x > 5).reduce(( p,n) => p + n);2、React类模块 -> 表达式式模块+hooks、Vue3中的复合式API
3、RxJS、Lodash和Ramda等JS库
4、开发工具/应用领域程序，如Redux中的applyMiddleware开发工具同时实现
conststore = applyMiddleware(…middlewares)(createStore)(reducer, initialState)什么是表达式式程式设计
表达式式程式设计是一类程式设计本体论，它将流程抽象化为表达式和计算机程序，透过表达式调用来同时实现流程的机能，因此表达式能做为HTA给其它表达式。
在 Java 中，表达式式程式设计能同时实现面向对象程式设计的一些机能，比如抽象化、封装、继承和多态等。
它还能使用高阶表达式、柯里化、组合和延迟计算来同时实现表达式式程式设计的机能。
表达式式程式设计有哪些特性表达式是「一等公民」
表达式能当做HTA给其它表达式，也能做为表达式的返回值返回（高阶表达式）。惰性执行惰性执行是指在代码中的某些表达式调用，只有在它们的返回值被使用时才会被执行。
它利用了延迟计算的技术，使得表达式只在被调用时才会执行，而不是在编写代码时就被执行。
这样能提高性能，因为不需要无用的计算。
无副作用（纯表达式）表达式的执行不会改变流程的外部状态，也就是说表达式的执行不会影响流程的其它部分。
因为它只是单纯的计算结果，而不会产生其它的副作用。
二、常用表达式式概念
柯里化-currying
柯里化表达式是把接受多个参数的表达式变换成接受一个单一参数（最初表达式的第一个参数）的表达式，因此返回接受余下的参数而且返回结果的新表达式的技术。
表达式表达：f(a, b, c) => f(a)(b)(c)
简单同时实现（有兴趣的同学能研究下Lodash和Ramda库中的同时实现）
// 表达式柯里化 functioncurry( fn, args) { args = args || [] returnfunction( …params) { let_args = […args, …params] if(_args.length < fn.length){ returncurry(fn, _args) } returnfn.apply(this, _args) } } functionsum( a, b, c) { returna+b+c } // 自由组合参数 constcurrySum = curry(sum) console.log(currySum(1)( 2)( 3)) //6 console.log(currySum( 1)( 2, 3)) //6 console.log(currySum( 1, 2)( 3)) //6管道-pipe
管道pipe表达式是一个高阶表达式，它接受一系列表达式做为参数，将表达式串联起来，一步步将上一步的输出做为下一步的输入，这样能更加高效地处理复杂的业务逻辑。
表达式表达：pipe(f, g, t) => x => t(g(f(x))，进一步结合curry能同时实现pipe(f)(g)(t) => x => t(g(f(x))
借助reduce简单同时实现，支持异步和非异步表达式
exportconstpipe: any= ( …fns: Promise< Function>[] ) => (input: any) => fns.reduce( ( chain: Promise< Function>, func: Function| Promise< Function> |any) => chain.then(func), Promise.resolve(input));组合-compose
组合compose指的是将多个表达式组合成一个表达式，这样一个表达式的输出就能做为另一个表达式的输入，从而同时实现多个表达式的链式调用。
组合compose能提高代码的可读性和可维护性，减少重复代码的出现，更加便捷地同时实现表达式的复用。
表达式表达：compose(f, g, t) => x => f(g(t(x))，进一步结合curry能同时实现compose(f)(g)(t) => x => f(g(t(x))
借助reduceRight简单同时实现，和pipe的区别只是运算顺序不同
exportconstcompose: any= ( …fns: Promise< Function>[] ) => (input: any) => fns.reduceRight( ( chain: Promise< Function>, func:Function| Promise< Function> | any) => chain.then(func), Promise.resolve(input));三、表达式式程式设计课堂教学
需求背景介绍
AgileBI在线报表是一款报表应用领域工具：易学易用，零代码，透过简单拖拽操作，制作中国式复杂报表，轻松同时实现报表的多样展示、交互分析、数据导出等需求，在线体验
已有机能：在线报表中的每个单元格都能配置相关的属性：比如扩展方向、父格、单元格格式、过滤条件、条件属性等
新增需求：需要支持批量设置单元格，其中【文本类型】单元格支持扩展方向、父格的设置；【字段类型】、【公示类型】单元格支持所有配置；
大致设计思路
获取当前批量设置中，所有的配置项信息
为每个配置项设计一个处理器（高阶表达式）：主要处理【批量设置的配置信息】和【当前单元格的配置信息】合并或替换逻辑
透过管道的方式，加工每个单元格所有的配置项信息
核心同时实现•pipe表达式
privatepipe = ( …args: any) => { return( result: any, config?: any) => { returnargs.reduce( ( acc: any, fn:any) => fn(acc, config), result); }; };•高阶表达式处理每个配置项
// 扩展方向替换 privatehandleExpand(expandConf: string) { return( conf: any) => { if(expandConf) { conf.expandDirection = expandConf; } returnconf; }; } // 父行/父列替换 privatehandleParentCell(columnParentCell: any, rowParentCell: any) { return( conf: any) => { if(columnParentCell?.parentSelectType) { conf.columnParentCell = columnParentCell; } if(rowParentCell?.parentSelectType) { conf.rowParentCell = rowParentCell; } returnconf; }; } // 条件属性追加 privatehandleCondition(conditionBatchConf:any) { return( conf: any) => { conf.conditionConf = this.mergeCondition(conf?.conditionConf || [], conditionBatchConf); returnconf; }; } // 批量修改 privatemergeCondition(c1: any, c2: any) { for( letj = 0; j < c1.length; j++) { // 批量删除 if( c1[j]?.batchFlag && this.batchConf.conditionConf?.find( ( item: any) => item.uuid === c1[j]?.uuid) && !c2.find( ( item: any) => item.uuid === c1[j]?.uuid) ) { c1.splice(j, 1); } } for( letj = 0; j < c1.length; j++) { for( leti = 0; i < c2.length; i++) { // 如果字段已存在则替换 if(c2[i]?.uuid === c1[j]?.uuid) { c1.splice(j,1); } } } return[…c1, …c2]; } //…•
//… let handles: Array<any> = []; if(cell?.dataConf?.cellType ===“文本”) { handles = [ this.handleExpand(conf.expandDirection), this.handleParentCell(conf.columnParentCell, conf.rowParentCell) ]; } elseif(cell?.dataConf?.cellType === “字段”|| cell?.dataConf?.cellType ===“公式”) { handles = [ this.handleExpand(conf.expandDirection), this.handleParentCell(conf.columnParentCell, conf.rowParentCell), this.handleFormat(conf.dataFormatConf), this.handleFilter(conf.cellFilterConf), this.handleCondition(conf.conditionConf) ]; } if(handles.length > 0) { constmergeConf =this.pipe(…handles)(JSON.parse(JSON.stringify(cell.dataConf))); //… }四、总结
表达式式程式设计能可提高代码的可重用性，减少重复代码的开发时间；
表达式式程式设计能提高代码的可读性，使得代码更容易理解和调试；
表达式式程式设计能更容易同时实现表达式组合，以帮助提高可维护性；
组合优于继承；
END
2023 GOTC 全球开源技术峰会精彩回顾
这里有最新开源资讯、软件更新、技术干货等内容
