Example: Reactive Strings — helloExpressions Template

同学们，我们来看一个非常实用的例子，叫 helloExpressions。这个组件把咱们之前学到的反应性、数据绑定和 getter 巧妙地结合在了一起。 想象一下，页面上有两个很简单的输入框，分别让用户填名字和姓氏。这两个输入框，用的都是 Lightning 的闪电输入组件，而且它们都通过 onchange 事件，也就是每次内容变化时，同时触发同一个叫 deliverChange 的处理函数。 当用户打字的时候，底层的数据就会被更新。然后，在显示区域，我们不是直接显示数据，而是通过一个叫 uppercasedFullName 的 getter，把名字和姓氏拼在一起，并且全部转成大写字母再展示出来。为了让布局好看一点，我们还用了 Salesforce Lightning Design System 里的工具类，加了一点间距。 这里最关键的就是反应性系统在暗中工作。只要 firstName 或者 lastName 的值发生了变化，uppercasedFullName 这个 getter 就会自动重新计算，页面上的显示也会立刻刷新，完全不用我们手动去更新。 总结一下，这就是一个很经典的开发模式：用输入字段捕捉用户数据，用事件处理器更新组件的状态，再用计算型的 getter 把状态转换成需要展示的样子。整个过程都由反应性系统驱动，代码简洁，维护起来也特别轻松。