GeruzoniAnsasu
2023-05-01 21:20:05 +08:00
感觉楼上都没说到点子上。
「喜欢用匿名函数」的原因是,你正在使用的 function 要求传入一个 transformer , 由于这个 transformer 往往是定域的局部逻辑,因此基本上不会复用。不会复用,也就不用非得为它赋予一个公共名字,不需要命名自然就不命名了。
然后,为什么 js 写的代码更容易见到「传入 transformer 」这样的约定,本质上是因为前端的代码究其根本就是一系列状态转换函数。我们可以把 fetch 后端数据到渲染成 html 这个流程抽象为有一个 函数 F ,对后端传来的 json O 应用 F() 得到我们想要的 html:document = F(O) = "<html>...</html>"
这时候应该就很容易理解这与函数式编程的理念和思维方法不谋而合,我们逐渐把 F 细分,F(O) = Apply(O, Render1, Render2, ...) = Apply(O, (o)=>{renderComponent1(o.part1),renderComponent2(o.part2)},Render2, ...) ,然后把其中的某个部分,比如 renderComponent1 挖空逻辑变为接口,它自然就要求实现者实现具体的逻辑了:
type O = {part1:any}
function renderComponent1(o:O,impl:(o:O)=>HTMLElement) { // 要求传入一个把 O 转换为 DOM 的函数
document.appendChild(impl(o))
}
//你实际要写的
export function impl(o:O):HTMLElement{
const e = new HTMLDivElement()
e.innerText = o.part1
return e
// return ( <div>{o.part1}</div> )
}
这时候应该可以理解为什么传递函数作为参数是必要且常见的写法了。
不过这时候还有另一个问题,为什么非得是匿名函数不能是 function
—— 一句话来说,只有匿名函数(箭头函数)才可以完美 capture 上下文,这与 js 的语言债有关,作为半吊子就不展开了,可以自行翻阅关于 this 的前端八股文。