谈谈函数式编程在前端开发中的应用.pptVIP

从Button到Network Osmos示例 一个更完整的小游戏demo 有游戏物体的产生与销毁 游戏物体之间也有交互（碰撞、吸收与被吸收） 有胜利和失败的判断 缺点 push模型 内存消耗大 有其它改进的实现方案 参考资料 Haskell社区的FRP相关论文， /haskellwiki/Research_papers/Functional_reactive_programming FrTime: Functional Reactive Programming in PLT Scheme Flapjax: A Programming Language for Ajax Applications 谢谢！ Lambda in Canvas 函数式编程在前端开发中的应用 关于我 @邓际锋, 网易杭研院前台技术中心程序员 个人研究兴趣 编程语言的设计与实现 交互式艺术及FP在该领域的应用 如何为儿童和非技术人员开发富有乐趣的创作工具 /ideamonad soloist.deng@ /soloist 一个简单的例子 - 计时器 计时器从0开始，每秒跳一次，页面不停刷新计时器的值 按下“重新计时”按钮，计时器便重新从0开始计时 传统版本之页面 body onload=startTimer() input id=reset type=button value=重新计时 onclick=resetElapsed()/ p流淌的时间/p div id=curTime /div /body 传统版本之脚本 var timerID = null, elapsedTime = 0; function doEverySecond() { elapsedTime += 1; document.getElementById(curTime) .innerHTML = elapsedTime; } function startTimer() { timerId = setInterval(doEverySecond(), 1000); } function resetElapsed() { elapsedTime = 0; } 更新计时 显示计时 设置为定时器的callback 重设计时 初始化计时 “重新计时”按钮点击的callback 非传统版本之页面 body onload=loader() input id=reset type=button value=重新计时/ p流淌的时间/p div id=curTime /div /body 非传统版本之脚本 function loader() { var nowB = ticksB(1000); var startTm = nowB.valueNow(); var clickTmsB = extractEventE(reset, click) .snapshotE(nowB).startsWith(startTm); var elapsedB = nowB - clickTmsB insertValueB(elapsedB, curTime, innerHTML); } 秒计时 “重新计时”按钮最近一次点击的时间 计时 显示计时 有什么不同？ 传统版本 事件队列 事件 事件循环 时钟回调 按钮回调 状态 非传统版本 计时器重置时刻 重置按钮click事件 减 当前时间 计时时间 组合 页面内容 没有回调 描述了数据依赖关系 把每条边的箭头反个向，代表的就是数据的流向 当时间变化以及按钮按下，页面内容都能自动做出响应 Reactive 对于y = f(x) , 如果x变化了，y会自动重新计算，那么y就对变化具有了反应能力 要想让程序具有Reactive能力，有多种方法 今天我们主要从函数式编程的角度谈谈如何构建一个Reactive系统 FRP Functional Reactive Programming FRP的基本思想 具有反应能力的数据被抽象为first-class value，称为信号(signal) 可以用函数对信号进行转换、过滤等各种处理以得到更复杂的信号 信号分为2种 信号之Behavior 行为象变量一样，总会有值，只是值会随时间变化 函数眼光看Behavior f time value 信号之Event Stream 无穷流，代表事件