我运营着一个小型的房屋改造成本计算器网站(costto.build)——选择一个项目,即可获得包含材料和人工明细的低/平均/高估算值。表面上看很枯燥。有趣之处在于,每个页面在四个不同的位置显示同一个数字,而在一段时间内,这四个地方的数据并不一致。
这篇文章将探讨这个缺陷、它为何不可避免,以及那条使其无法复现的规则。
一个数字的四个真实来源
单个计算器页面——例如房间扩建页面——会在四个位置显示成本:
- 由
calculate()函数驱动的交互式小部件(低/平均/高)。 - 首屏上方的静态“按尺寸划分的成本”参考表。
- 用散文形式写出的几个具体示例(“一套 20×20 英尺的附属套房花费约……”)。
- 常见问题解答,其中包含其自身的成本区间。
在构建第一批内容时,我手动编写了所有这四个部分。小部件有其公式。表格中的数字是我从研究中录入的。散文示例中的数字是我在撰写段落时推导出来的。它们足够接近,以至于看起来没有任何问题。
随后,我进行了一次一致性检查,发现了这个问题:附属套房的具体示例显示为 62,300 美元。而小部件在输入完全相同的平方英尺数和装修等级后,返回的结果是 56,779 美元。
同一个项目。同一页面的两个部分。存在 5,500 美元的差距。
发生原因(以及为何这总是不可避免的)
这些数字并非随机产生——它们源于不同的假设,而没有人将这些假设记录下来。
散文示例假设扩建部分需要安装全新的暖通空调系统。calculate() 函数则假设你延伸现有的系统。两者都有道理。但是,前者存在于我深夜撰写段落时的脑海中,而后者存在于我两周前编写的 TypeScript 函数中。两者之间没有任何关联。
这是衍生数据的常见失败模式:当你将相同的事实存储在两个地方时,只要你一移开视线,它们就会开始产生偏差。 这符合不要重复自己原则,只不过重复的不是代码,而是函数已经知道如何生成的值。我只是选择重新输入它而已。
从定义上讲,“按尺寸划分的成本”静态表就是 calculate() 输出结果的表格。具体示例就是 calculate() 加上一句解释说明。我一直手动将函数的返回值复制到散文中,并称之为内容。
修复方案:从计算器生成页面
我最终确定的规则——我称之为“源优先”——包含两个部分。
第一部分:calculate() 是成本诞生的唯一场所。 其他所有内容都是在构建时从中衍生出来的。参考表不是手动输入的;它是通过在一系列尺寸上调用 calculate() 生成的。示例数字也是如此。
// 之前:一个独立腐化的手动输入表格
const costBySize = [
{ sqft: 200, low: 22000, avg: 32000, high: 48000 }, // 从“研究”中录入
免责声明:本文内容来自互联网,该文观点不代表本站观点。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,请到页面底部单击反馈,一经查实,本站将立刻删除。