最近在上手一个陈年 hybrid 前端项目，某模块代码充斥着各种各样的 [“魔法数字”](https://www.zhihu.com/question/22018894)，类似这些。 ```js if (xxxx) { return 347893; } if (xxxx) { return 23333; } ``` ```js this.setState({ titleStatus: 2, }); ...... this.setState({ titleStatus: submitAll === 1 || complete === 1 ? 0 : +data.status === 1 ? 2 : 1, }); ``` ```js if ([1, 2, 3].indexOf(xxxObj.type) !== -1) { ... } ``` ```js nativeInvoke('setLeftTitle', { enable: '1', border: '0', // 0-不显示边框 1-显示边框 text: '', }); ``` 异常痛苦，但毕竟受人钱财，替人消灾，不得不啃下去。这里也记录一些反面的例子，希望看到的后来人，尽可能少制造一点类似的痛苦吧～写代码遇到类似 `status` 的时候，应尽可能用枚举或常量去定义它们，尤其是涉及到不同模块之间通信的情况下。代码本应是写给人看的 = =

前端领域有的教程也传递了类似的不好习惯，比如说 XMLHttpRequest API 的 readyState 属性。很多 [教程](https://www.runoob.com/ajax/ajax-xmlhttprequest-onreadystatechange.html) 到处复制粘贴，写的是： ```js xmlhttp.onreadystatechange = function () { if (xmlhttp.readyState === 4 && xmlhttp.status === 200) { document.getElementById("myDiv").innerHTML = xmlhttp.responseText; } } ``` 其中 `4` 和 `200` 都属于 Magic Number 的范畴，200 是 HTTP 的返回码的一种，这个还好，但 `4` 这个数字就非常奇怪。比较好的 [教程](https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/onreadystatechange) 就很不一样： ```js var xhr= new XMLHttpRequest(), method = "GET", url = "https://developer.mozilla.org/"; xhr.open(method, url, true); xhr.onreadystatechange = function () { if(xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) { console.log(xhr.responseText) } } xhr.send(); ``` `XMLHttpRequest.DONE`，明显清晰不少。 [upl-image-preview url=https://static.0xffff.one/assets/files/2020-07-29/1596003644-407130-image.png]

@"NTL01"#p4320 不错，我选择问同事（狗头.jpg

@"c0nstexpr"#p4335 最致命的是它们分布在各个文件

@"0x0001"#p4342 那就只能骂人了（

@"0x0001"#p6202 在C里面定义常量也有使用enum的用法

魔法数字（Magic Number）

0x0001

最近在上手一个陈年 hybrid 前端项目，某模块代码充斥着各种各样的 “魔法数字”，类似这些。

if (xxxx) {
  return 347893;
}
if (xxxx) {
  return 23333;
}

this.setState({
  titleStatus: 2,
});
......
this.setState({
  titleStatus: submitAll === 1 || complete === 1 ? 0 : +data.status === 1 ? 2 : 1,
});

if ([1, 2, 3].indexOf(xxxObj.type) !== -1) {
  ...
}

nativeInvoke('setLeftTitle', {
  enable: '1',
  border: '0', // 0-不显示边框 1-显示边框
  text: '',
});

异常痛苦，但毕竟受人钱财，替人消灾，不得不啃下去。

这里也记录一些反面的例子，希望看到的后来人，尽可能少制造一点类似的痛苦吧～写代码遇到类似 status 的时候，应尽可能用枚举或常量去定义它们，尤其是涉及到不同模块之间通信的情况下。

代码本应是写给人看的 = =

0x0001

前端领域有的教程也传递了类似的不好习惯，比如说 XMLHttpRequest API 的 readyState 属性。

很多教程到处复制粘贴，写的是：

xmlhttp.onreadystatechange = function () {
  if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
    document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
  }
}

其中 4 和 200 都属于 Magic Number 的范畴，200 是 HTTP 的返回码的一种，这个还好，但 4 这个数字就非常奇怪。

比较好的教程就很不一样：

var xhr= new XMLHttpRequest(),
    method = "GET",
    url = "https://developer.mozilla.org/";

xhr.open(method, url, true);
xhr.onreadystatechange = function () {
  if(xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
    console.log(xhr.responseText)
  }
}
xhr.send();

XMLHttpRequest.DONE，明显清晰不少。

NTL01

几天前看到一个研究项目，用模糊逻辑解读这种情况的代码含义，我猜这方面已有成熟技术，题主不妨搜索一下。

0x0001

NTL01 不错，我选择问同事（狗头.jpg

Colin_Downey

return 31415926535

c0nstexpr

magic number在VS C++项目里面给Resharper设置为hint，像是-1 0 1 2 3 5 10这些简单数字应该出现没什么，其他东西还是得提取出来，不管现在能不能用到，总归能好看点

0x0001

c0nstexpr 最致命的是它们分布在各个文件

c0nstexpr

0x0001 那就只能骂人了（

0x0001

最近终于有机会重构了一波这里的代码，收获到一点经验：

把 Magic Number 都替换成 enum / const，然后把这个 const 都单独放在同一个文件（例如 utils/const.js），在这个文件里面针对各个值梳理清楚详细的注释，需要用到这个值的地方再引入这个文件。会让整个模块的逻辑清晰不少。

写代码的一大原则：尽可能不要节约起名字（明确概念）的时间。

c0nstexpr

0x0001 在C里面定义常量也有使用enum的用法