|
valcount=Var( 0) @domdefstatus:Binding[ String] = { valstartTime=newDate"本页面初始化的时间是"+ startTime.toString + "。按钮被按过"+ count.bind.toString + "次。按钮最后一次按下的时间是"+ ( newDate).toString } @domdefrender={ <div> { status.bind } <button onclick={ event: Event=> count := count.get + 1}>更新状态</button> </div> } 以上代码可以在ScalaFiddle实际运行一下试试。 注意，status 并不是一个普通的函数，而是描述变量之间关系的特殊表达式，每次渲染时只执行其中一部分代码。比如，当 count 改变时，只有位于 count.bind 以后的代码才会重新计算。由于 val startTime = new Date 位于 count.bind 之前，并不会重新计算，所以会一直保持为打开网页首次执行时的初始值。 有些人在学习 ReactJS 或者 AngularJS 时，需要学习 key 、 shouldComponentUpdate 、 $apply 、 $digest 等复杂概念。这些概念在 Binding.scala 中根本不存在。因为 Binding.scala 的 @dom 方法描述的是变量之间的关系。所以，Binding.scala 框架知道精确数据绑定关系，可以自动检测出需要更新的最小部分。 结论 本文比较了虚拟 DOM 、脏检查和精确数据绑定三种渲染机制。 AngularJS ReactJS Binding.scala渲染机制 脏检查 虚拟DOM 精确数据绑定 数据变更时的运算步骤 重复检查数据是否更改 大范围更新页面，哪怕这部分页面根本没有修改 重新生成整个虚拟DOM 比较新旧虚拟DOM的差异 根据差异更新页面 直接根据数据映射关系，更新最小范围页面 检测页面更新范围的准确性 不准 默认情况下不准，需要人工提供key和shouldComponentUpdate才能准一点 准 需要前端工程师理解多少API和概念才能正确更新页面 很多 很多 只有@dom和bind两个概念 总体性能 非常差 差 好 这三种机制中，Binding.scala 的精确数据绑定机制概念更少，功能更强，性能更高。我将在下一篇文章中介绍 Binding.scala 如何在渲染 HTML 时静态检查语法错误和语义错误，从而避免 bug 。 相关链接 Binding.scala 项目主页 Binding.scala ? TodoMVC 项目主页 Binding.scala ? TodoMVC DEMO Binding.scala ? TodoMVC 以外的其他 DEMO Java 到 Scala.js 移植指南 Scala.js 项目主页 Scala API 参考文档 Scala.js API 参考文档 Scala.js DOM API 参考文档 Binding.scala快速上手指南 Binding.scala API参考文档 Binding.scala 的 Gitter 聊天室 (责任编辑：本港台直播) |