15个常见网站开发错误，谁都可能犯

首发于公众号大迁世界，欢迎关注。📝 每周7篇实用的前端文章 🛠️ 分享值得关注的开发工具 😜分享个人创业过程中的趣事

该篇文章讨论了网站开发人员可能会收到的糟糕建议。文章列举了15条糟糕的建议，这些建议可能会导致网站开发过程中的问题和挫折。

文章首先指出了一些关于代码质量和结构的糟糕建议，例如“永远不需要注释代码”和“忽略代码性能”。这些建议可能导致代码难以理解和维护，以及性能问题。

下面是正文

抽象层

尽可能使用多个抽象层，直到：

代码很难理解和调试
修改代码很困难
代码运行缓慢或效率低下
这段代码不能重复使用

2. 始终在拉取请求上请求更改

你应该在第一次审查时始终阻止拉取请求，以确立优势。一些变更请求的想法包括：

将变量名改长
缩短变量名称
重命名一个变量名
让代码更加DRY

3. 没有提交信息

好的提交信息需要花费时间来编写。与其浪费宝贵的时间写一些像这样的东西，

[JIRA-1234] build: replace vue-cli with vite

可以使用以下命令将您的代码推送到一个空的提交消息中

git commit --allow-empty-message -m "" && git push --force

4.使用魔法数字

经常使用魔法数字来表明你确切知道自己在做什么

window.scrollTo({
  top: 89,
  left: 12,
  behavior: "smooth",
});

5. 混合返回语句

永远不要让他们知道你的下一步行动，通过混合函数的返回语句

function shouldPayTax(income) {
  if(income.amount < 20_000) {
    return false
  }
  if(income.amount > 20_000 && income.country == 'USA') {
    return true
  }
  if(income.country == 'Panama') {
    return false
  }
  if(this.totalWorkingHoursPerWeek > 60) {
    return true
  }
  if(income.amount > 20_000 && income.isCelebrity == true) {
    return false
  }
  if(income.amount > 20_000) {
    return true
  }
}

6. Typescript

如果有人胆敢在项目中添加TypeScript，你可以通过在任何地方使用 any 来绕过类型检查。

function add(a:any, b:any):any {
  return a + b
}

7.使用双等号而不是三等号

在生产捆绑包中，以节省宝贵的字节为借口，使用 == 代替 === 。

8. 评论代码

除了编写难以理解的代码之外，留下毫无意义的误导性注释是让他人困惑的绝佳方式。

一些需要遵守的规则：

评论应该复制代码
评论原谅不清晰的代码
如果你能写一个清晰的评论，就不要写
评论应该引起困惑，而不是消除困惑
不要提供复制代码的原始来源链接
请不要在最有帮助的地方包含外部参考链接
修复错误时，永远不要添加注释（或测试）
不要使用注释来标记未完成的实现

9. 使用 Props 进行共享状态

使用 props 传递状态是一种将组件层次耦合在一起并使重构变得更加困难的好方法。

15个常见网站开发错误，谁都可能犯

10. 使用状态管理来管理组件状态

另一方面，组件状态应该被移动到一个全局存储中，这样每个人都可以修改它。

11. 长组件文件

以更好地了解组件的职责和能够在不同功能中重复使用变量的能力为借口，使用大型和单一的组件

12. 没有代码检查工具

一个代码检查工具可以分析你的代码，并检测潜在的错误、不一致性和偏离已建立的编码标准的情况，这显然是我们不希望出现的。

这两个片段之间的差异是显而易见的：

const props=defineProps({
elements:Array,
counter:{
type:Number,
default:0,
},
});
const{data,method}=useComposable();
const isEmpty=computed(()=>{returnprops.counter===0;});

watch(props.counter,()=>{console.log("Countervaluechanged");});
const emit=defineEmits(["event-name"]);

function emitEvent(){
emit("event-name");
}

function getParam(param){
return param;
}

const props = defineProps({
  elements: Array,
  counter: {
    type: Number,
    default: 0,
  },
});

const { data, method } = useComposable();

const isEmpty = computed(() => {
  return props.counter === 0;
});

watch(props.counter, () => {
  console.log("Counter value changed");
});

const emit = defineEmits(["event-name"]);

function emitEvent() {
  emit("event-name");
}

function getParam(param) {
  return param;
}

专业提示：唯一可接受的使用规则是强制文件的行数超过一定数量。1000是一个不错的起始数字。

13. 在翻译中使用HTML

使用硬编码字符串总是一个好主意。但有时使用包含HTML元素和类的翻译可能会更好。

translation.key.name = Hello <span class="red">World!</span>

14. 编写测试

不写测试是一个不错的选择，但是拥有一个糟糕的测试套件可能会引起更多的沮丧。作为一般准则，一个测试应该是：

[慢]——花足够的时间冲泡一杯咖
不可靠 — 产生不稳定的结果
相互关联 — 影响其他测试
[了解] - 尽可能了解应用程序的其他部分

15. 一直相信每个人

最后，防御性编程是给弱者和经验不足者准备的。为什么会有人想要伤害你呢？

总结

请不要因为这个而讨厌我，也不要因此而被解雇。 😅

交流

首发于公众号大迁世界，欢迎关注。📝 每周一篇实用的前端文章 🛠️ 分享值得关注的开发工具 ❓ 有疑问？我来回答
本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试完整考点、资料以及我的系列文章。

抽象层