理解纯函数和非纯函数是向更清晰、更基于角色和可测试的代码的简单过渡。在这篇文章中，将通过查看一个简单的体重指数（BMI）计算器来探索纯函数和非纯函数，该计算器通过一些简单的身高和体重输入因素来估算“健康体重”。
概念
上文简单介绍了什么是纯函数和非纯函数，这里在简单列举一下：
- 纯函数：纯函数更容易理解，特别是因为代码库可以扩展，以及基于角色的函数可以完成一项工作并且做得很好。纯函数不会修改作用域之外的外部变量、状态、数据，并且在给定相同输入的情况下返回相同的输出，这样的函数就被认为是“纯”的。
- 非纯函数：在其作用域范围之外改变变量、状态、数据的函数，因此因此将其视为“不纯”。编写 JavaScript 的方法有很多种，从非纯/纯函数的角度考虑，可以编写更容易推理的代码。
下面以完全不纯的方式创建的 BMI 计算器，然后再将其重构为多个使用纯函数的函数。
HTML和事件
这是创建的用于捕获用户输入数据的表单：
<form name="bmi"> <h1>BMI计算器</h1> <label> <input type="text" name="weight" placeholder="体重 (kg)" /> </label> <label> <input type="text" name="height" placeholder="身高 (cm)" /> </label> <button type="submit">立即计算</button> <div class="calculation"> <div>BMI值： <span class="result"></span></div> <div>健康指数：<span class="health"></span></div> </div> </form>
下面为按钮增加事件监听器：
<script> (() => { const elForm = document.querySelector("form[name=bmi]"); const onSubmit = (event) => { event.preventDefault(); }; elForm.addEventListener("submit", onSubmit, false); })(); </script>
非纯的实现
现在将删除 IIFE 和事件处理程序的内容，并专注于 onSubmit 函数：
const onSubmit = (event) => { event.preventDefault(); let healthMessage; const result = elForm.querySelector(".result"); const health = elForm.querySelector(".health"); const weight = parseInt( elForm.querySelector("input[name=weight]").value, 10 ); const height = parseInt( elForm.querySelector("input[name=height]").value, 10 ); const bmi = (weight / (((height / 100) * height) / 100)).toFixed(1); if (bmi < 18.5) { healthMessage = "偏瘦体重"; } else if (bmi > 18.5 && bmi < 25) { healthMessage = "健康体重"; } else if (bmi > 25) { healthMessage = "肥胖体重"; } result.innerHTML = bmi; health.innerHTML = healthMessage; };
这就是 onSubmit 事件函数包含的所有内容，输入身高/体重，它就会用这些结果更新 DOM。现在，这就是非纯函数极难调试和理解的地方，特别是对于非前端开发人员来。当然为了代码的易读性，可以将其加些注释，如下：
const onSubmit = (event) => { // 阻止表单实际提交 event.preventDefault(); let healthMessage; // 获取DOM result 和 health 的 <span> 标签以将结果注入 const result = elForm.querySelector(".result"); const health = elForm.querySelector(".health"); // 根据重量和身高值解析为基数为 10 的整数 const weight = parseInt( elForm.querySelector("input[name=weight]").value, 10 ); const height = parseInt( elForm.querySelector("input[name=height]").value, 10 ); const bmi = (weight / (((height / 100) * height) / 100)).toFixed(1); if (bmi < 18.5) { healthMessage = "偏瘦体重"; } else if (bmi > 18.5 && bmi < 25) { healthMessage = "健康体重"; } else if (bmi > 25) { healthMessage = "肥胖体重"; } // 将结果插入到相应的 DOM result.innerHTML = bmi; health.innerHTML = healthMessage; };
看上去好像容易理解，然后需要大量的注释，很多时候都无法如何去描述。下面就以纯函数的方式对其重构。
纯函数的实现
在开始使用纯函数之前，在上面不纯的实现中，onSubmit 函数中做了太多的事情：
- 从 DOM 中读取值
- 将值解析为数字
- 从解析值计算BMI
- 有条件地检查 BMI 结果并将正确的消息分配给未定义的变量
healthMessage - 将值写入 DOM
为了提纯实现，将要实现处理这些操作的函数：
- 将值解析为数字并计算 BMI
- 将绑定到 DOM 的正确消息返回
开始提纯
先从输入值解析计算BMI开始，专门针对这一段代码：
const weight = parseInt(elForm.querySelector("input[name=weight]").value, 10); const height = parseInt(elForm.querySelector("input[name=height]").value, 10); const bmi = (weight / (((height / 100) * height) / 100)).toFixed(1);
这涉及 parseInt() 计算BMI的公式，当在应用程序中的某个时刻重构或添加更多功能时，这不是很灵活并且很可能很容易出错（客户端输入是不可靠的）。
为了重构，只需要单独获取每个输入的 value 属性，并将它们委托给一个 getBMI 函数：
const weight = elForm.querySelector("input[name=weight]").value; const height = elForm.querySelector("input[name=height]").value; const bmi = getBMI(weight, height);
这个 getBMI 函数将是 100% 纯的，因为它接受参数并根据这些参数返回一个新的数据，给定相同的输入，将获得相同的输出。具体代码如下：
const getBMI = (weight, height) => { const newWeight = parseInt(weight, 10); const newHeight = parseInt(height, 10); return (newWeight / (((newHeight / 100) * newHeight) / 100)).toFixed(1); };
此函数将 weight 和 height 作为参数，将它们转换为数字 parseInt ，然后执行 BMI 的计算。无论是将 String 还是 Number 作为每个参数传递，都可以安全检查。
进入下一个函数。healthMessage 的计算逻辑，如下：
health.innerHTML = getHealthMessage(bmi);
同样，开始实现 getHealthMessage 的逻辑：
const getHealthMessage = (bmiValue) => { let healthMessage; if (bmiValue < 18.5) { healthMessage = "偏瘦体重"; } else if (bmiValue > 18.5 && bmiValue < 25) { healthMessage = "健康体重"; } else if (bmiValue > 25) { healthMessage = "肥胖体重"; } return healthMessage; };
上面的函数也是 100% 的纯函数，输入输出固定。
至此，代码就完成了重构，完整代码如下：
<script> (() => { const elForm = document.querySelector("form[name=bmi]"); const getHealthMessage = (bmiValue) => { let healthMessage; if (bmiValue < 18.5) { healthMessage = "偏瘦体重"; } else if (bmiValue > 18.5 && bmiValue < 25) { healthMessage = "健康体重"; } else if (bmiValue > 25) { healthMessage = "肥胖体重"; } return healthMessage; }; const getBMI = (weight, height) => { let newWeight = parseInt(weight, 10); let newHeight = parseInt(height, 10); return ( newWeight / (((newHeight / 100) * newHeight) / 100) ).toFixed(1); }; const onSubmit = (event) => { event.preventDefault(); const result = elForm.querySelector(".result"); const health = elForm.querySelector(".health"); const weight = elForm.querySelector("input[name=weight]").value; const height = elForm.querySelector("input[name=height]").value; const bmi = getBMI(weight, height); result.innerHTML = bmi; health.innerHTML = getHealthMessage(bmi); }; elForm.addEventListener("submit", onSubmit, false); })(); </script>
在前端项目开发中很难保证所有函数都是纯函数，因为只要需要和 DOM 进行交互的函数就不是纯函数，因此在代码优化过程中，不要过份追求纯函数，尽可能的提纯函数即可。
