举例说明：JavaScript 中数据流动和数值的处理

最近的工作需求是移动 Web 页面的编写，其中非常典型的涉及到了数据流动和数值的处理。

需求描述

音乐人的歌曲，乐迷可以花钱来支持。要求如下：

1. 歌曲有最低价，即乐迷单次能够支持最低的钱；也有最高价，即乐迷能够单次支持最高的钱；
2. input 输入框默认展示歌曲最低价；
3. 乐迷可以通过两种途径填写或者修改想要支持金额的数值： input 输入框和 加 或 减 的按钮；
4. 加 、 减 按钮的每次修改以 1 元 为最小操作数值；
5. 如果乐迷想要支持的数值低于最低价或者超出最高价时，需要对乐迷进行通知；
6. 不论乐迷如何更改 input 值 ，都需要在乐迷结束更改时，展示一个合理的数值；
7. 前端展示金额数值的单位为 元 ，保留两位小数。向后端 POST 时的单位为 分 。

简单的 Demo 如下：

JS Bin on jsbin.com

思考

从乐迷修改金额，到支付结束，流程如下所示：

修改金额 -> 数值格式化 -> 数值验证 -> 通知信息 -> 数值格式化 -> 展示修改的价格 -> 完成支付
    ↑                                                           ↓
    <———————————<———————————————<—————————————————————<——————————

从上面的流程，可以得到：

1. <input type="number">；
2. 整个流程中涉及到两次数值格式化：元 -> 分、分 -> 元；
3. 在用JavaScript进行计算时，保证数值的单位是 分；
4. 当乐迷使用 input 输入框对数值进行填写或者修改时，应该选择合适的 JavaScirpt事件 驱动流程的运行。

需要注意的地方

1. input.value 的值类型为 string ;
2. 因为 <input type="number">，所以可以避免很多奇葩的输入，比如 123asd 等等。但是还是要考虑 12.02.3.1 这样奇葩的输入值；
3. 在使用 Math 、 Number 等对象的方法时，要注意数值的隐式转换，还有返回值的值类型。最好加上类型判断。