最近在上手一个陈年 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 的时候,应尽可能用枚举或常量去定义它们,尤其是涉及到不同模块之间通信的情况下。

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

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

很多 教程 到处复制粘贴,写的是:

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

其中 4200 都属于 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,明显清晰不少。

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

    5 天 后

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

      16 天 后
      9 个月 后

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

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

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

        1 年 后

        © 2018-2024 0xFFFF