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

更新日期: 2023-09-17 阅读: 1.6k 标签: 错误

该篇文章讨论了网站开发人员可能会收到的糟糕建议。文章列举了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 传递状态是一种将组件层次耦合在一起并使重构变得更加困难的好方法。

image.png

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. 一直相信每个人

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


本文内容仅供个人学习、研究或参考使用,不构成任何形式的决策建议、专业指导或法律依据。未经授权,禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载,请保留原文来源信息,不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持!

链接: https://fly63.com/article/detial/12521

相关推荐

解决Cannot read property range of null 错误

vue工程npm run serve/start/dev启动时,node_modules文件报:Cannot read property range of null 错误,该问题是babel-eslint版本更新问题导致的;

开始使用Vue 3时应避免的10个错误

Vue 3 稳定已经有一段时间了。许多代码库正在生产中使用它,其他人最终也必须进行迁移。我有机会与它一起工作,并记录了我的错误,这可能是你想避免的。

HTTP 400 错误 - 请求无效 (Bad request)

在ajax请求后台数据时有时会报 HTTP 400 错误 - 请求无效 (Bad request);出现这个请求无效报错说明请求没有进入到后台服务里;原因:前端提交数据的字段名称或者是字段类型和后台的实体类不一致

nodejs提示 cross-device link not permitted, rename 错误解决方法

文件上传的功能时候,调用fs.renameSync方法错误,这个提示是跨区重命名文件出现的权限问题。先从源文件拷贝到另外分区的目标文件,然后再unlink,就可以了。

Js中使用innerHTML的缺点是什么?

如果在JavaScript中使用innerHTML,缺点是:内容随处可见;不能像“追加到innerHTML”一样使用;innerHTML不提供验证,因此我们可能会在文档中插入有效的和破坏性的HTML并将其中断

javascript如何抛出错误?

throw语句用来抛出一个用户自定义的异常。当前函数的执行将被停止(throw之后的语句将不会执行),并且控制将被传递到调用堆栈中的第一个catch块。如果调用者函数中没有catch块,程序将会终止。

解决typescript Cannot redeclare block-scoped variable

没有依赖框架来写typescript,纯粹新建一个ts文件,使用tsc编译成js后,ts文件里的声明的变量、函数名都会报错:其实我们写的ts代码是没有问题的,只是ts会对我们声明的变量、具名函数、class都放在了全局作用域

不能执行已释放Script的代码

父页面初始化声明变量a为数组(数组对象是引用类型,赋值传递的是地址),创建iframe子页面后给父页面变量a赋值,赋值后销毁iframe子页面,再次调用变量a的时候就会抛出异常‘SCRIPT5011:不能执行已释放Script的代码’。

避免那些可恶的cannot read property of undefined 错误

Uncaught TypeError: Cannot read property foo of undefined. 是一个我们在 JavaScript 开发中都遇到过的可怕错误。或许是某个 API 返回了意料外的空值,又或许是其它什么原因,这个错误是如此的普遍而广泛以至于我们无法判断

自定义错误及扩展错误

当我们在进行开发的时候,通常需要属于我们自己的错误类来反映任务中可能出现的特殊情况。对于网络操作错误,我们需要 HttpError,对于数据库操作错误,我们需要 DbError,对于搜索操作错误,我们需要 NotFoundError,等等

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!