经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » 程序设计 » 编程经验 » 查看文章
屎山代码风格指南(避免被优化&&避免被接盘)
来源:cnblogs  作者:有只橘猫  时间:2024/1/10 8:58:43  对本文有异议

欢迎补充!!!

序言

  1. 良好的代码结构Bad ????

    • 使用有意义的变量和函数名,遵循命名规范,使代码易于理解。
    • 组织代码,使用适当的文件和文件夹结构,保持模块化。
    • 避免全局变量的滥用,尽量使用局部作用域。
  2. 单一职责原则Bad ????

    • 每个函数或模块应该只负责一个特定的功能。这样的设计使得代码更容易维护和扩展。
  3. DRY 原则(不要重复自己):Bad ????

    • 避免复制粘贴代码,尽量将重复的逻辑提取成函数、类或模块。
    • 使用函数封装通用功能,以便在整个应用程序中重复使用。
  4. 注释和文档Bad ????

    • 写清晰、有意义的注释,解释代码的目的和特殊考虑。
    • 为 API、函数等提供良好的文档,使其他开发者能够轻松理解和使用你的代码。
  5. 代码复审Bad ????

    • 进行代码复审是避免屎山代码的重要步骤。同事可以提供不同的视角和建议,有助于发现潜在的问题。
  6. 测试驱动开发(TDD)Bad ????

    • 使用测试来确保代码的质量和稳定性。在编写代码之前先写测试,以确保代码的正确性。
  7. 使用设计模式Bad ????

    • 学习并应用设计模式,它们提供了一些通用的解决方案,有助于降低复杂性和提高代码的可维护性。
  8. 版本控制Bad ????

    • 使用版本控制系统(如 Git)来跟踪代码的变化,以便轻松地回滚到之前的版本,并且能够合理管理多人协作的情况。
  9. 性能优化和代码优化Bad ????

    • 注意代码的性能,避免写出低效的代码。使用工具和技术进行性能分析和优化。
  10. 学习和持续改进Bad ????

    • 不断学习新的技术和最佳实践,关注前端领域的最新发展。
    • 定期检讨自己的代码,寻找优化的机会,并从他人的经验中吸取教训。

 

以上不要尝试学习,不要写,给出这些建议就是避免这样写,不听的话,下周就是你提桶跑路的日子(划重点)Good ????

??

以下是我精心准备的福利大礼包Good ????

 

1.通用js,css,html系列

1-1.不要注释

  1. Bad ??(不要参考)
  2. // 关联的项目ID
  3. const businessId = ""
  4. Good ????(谨记)
  5. // 更多时候,应该包含一些“为什么”,而不是一些“是什么”。
  6. const businessId = ""

1-2.注释撒谎 

  1. Bad ??(不要参考)
  2. // 关联的项目ID
  3. const businessId = ""
  4. Good ????(谨记)
  5. // 列表或者详情的主键ID,传参使用 ??
  6. const businessId = ""

1-4.变量不要语义化

  1. Bad ??(不要参考)
  2. // 关联的项目ID
  3. const businessId = ""
  4. // 不要使用什么下面的命名方法
  5. // const camelCase = ''(小驼峰式命名法 —— 首字母小写)
  6. // const PascalCase = ''(大驼峰式命名法 —— 首字母大写)
  7. // const kebab-case = ''(短横线连接式)
  8. // const t_title = ''(下划线连接式)
  9. Good ????(谨记)
  10. const bId = "";
  11. const cc = "";
  12. const Pc = "";
  13. // 全拼音命名法
  14. // ”毕竟都是中国人嘛,全拼音命名大家应该都看得懂吧“,举个例子:dazhe.vue。但是同一个拼音可以翻译出不同的意思出来,他们之间是一对多的关系,因此不适合作为组件名;当然,全拼音命名还算是手下留情的,有的时候全拼音命名可能会很长,那就直接取首字母吧!
  15. // 拼音首字母命名法
  16. // 于是dazhe.vue变成了dz.vue,这个时候就成了猜谜语,有一首歌词写得好:女孩的心思男孩你别猜别猜别猜你猜来猜去也猜不明白,到了这里就是代码的心思你别猜,直接放弃吧!
  17. // 中西合璧命名法
  18. // 有些同学觉得光中文那不太高大上啊,要把英语也加进来才能显示自己的水平,所以这样命名:dzList.vue,照样还是让人看不懂
  19. // 英文首字母命名法
  20. // 我想这种方式命名的同学应该不多吧,毕竟已经拿起翻译工具翻译了,直接cv就可以了,为什么还要摘出首字母来呢?

1-5.不要使用母语写注释

  1. Bad ??(不要参考)
  2. // 关联的项目ID
  3. const businessId = ""
  4. Good ????(谨记)
  5. // Associated project ID(英语)
  6. // Inside fiction ID(法语)
  7. // (阿拉伯语)?????? ????? ???????
  8. const businessId = ""

1-6.代码写成一行

  1. Bad ??(不要参考)
  2. if (
  3. (
  4. lastKeyTime &&
  5. this.form.bidopenEtime &&
  6. new Date(this.form.bidopenEtime.replace(/-/g, "/")).getTime() < new Date(lastKeyTime.replace(/-/g, "/"))
  7. )
  8. ||
  9. textTrack
  10. ||
  11. textTrack.length > 0
  12. ||
  13. this.projectListDialog
  14. ) {
  15. }
  16. Good ????(谨记)
  17. //
  18. if ((lastKeyTime &&this.form.bidopenEtime &&new Date(this.form.bidopenEtime.replace(/-/g, "/")).getTime() < new Date(lastKeyTime.replace(/-/g, "/"))) || textTrack || textTrack.length > 0 || this.projectListDialog) {}

1-7.不要处理错误

  1. // 无论何时发现错误,都没有必要让任何人知道它。没有日志,没有错误弹框,最好不要写try catch
  2. Bad ??(不要参考)
  3. try {
  4. // 意料之外的情况。
  5. } catch (error) {
  6. setErrorMessage(error.message);
  7. // and/or
  8. logError(error);
  9. }
  10. Good ????(谨记)
  11. try {
  12. // 意料之外的情况。
  13. } catch (error) {
  14. // tss... ??
  15. }

1-8.尽可能的使用全局变量

  1. Bad ??(不要参考)
  2. let num = 5;
  3. function square(sub) {
  4. return sub ** 2;
  5. }
  6. num = square(x); // 现在x是25
  7. Good ????(谨记)
  8. let a = 5;
  9. var b = 2;
  10. function square(b) {
  11. a = a ** 2;
  12. b = a + b;
  13. }
  14. square(1);

1-9.尽量多的创建你不会使用的变量

  1. Bad ??(不要参考)
  2. function sum(a, b, c, d) {
  3. return a + b;
  4. }
  5. Good ????(谨记)
  6. function sum(a, b, c, d) {
  7. const tts = 1300;
  8. const arr = [];
  9. const res = a + b;
  10. return a + b;
  11. }

1-10.混合缩进或者有时候四格有时候两个缩进

  1. Bad ??(不要参考)
  2. <el-form-item label="投标人答复内容:" >
  3. <el-input
  4. type="textarea"
  5. disabled
  6. :autosize="{ minRows: 2, maxRows: 6}"
  7. placeholder="请输入内容"
  8. v-model="item.replyContent">
  9. </el-input>
  10. </el-form-item>
  11. const fruits = ['apple', 'orange', 'grape', 'pineapple'];
  12. const toppings = ['syrup', 'cream', 'jam', 'chocolate'];
  13. const desserts = [];
  14. fruits.forEach(fruit => {
  15. toppings.forEach(topping => {
  16. desserts.push([fruit, topping]);
  17. });
  18. })
  19. Good ????(谨记)
  20. // 这种
  21. <el-form-item label="投标人答复内容:" >
  22. <el-input
  23. type="textarea"
  24. disabled
  25. :autosize="{ minRows: 2, maxRows: 6}"
  26. placeholder="请输入内容"
  27. v-model="item.replyContent">
  28. </el-input>
  29. </el-form-item>
  30. // 这种
  31. const fruits = ['apple',
  32. 'orange', 'grape', 'pineapple'];
  33. const toppings = ['syrup', 'cream',
  34. 'jam',
  35. 'chocolate'];
  36. const desserts = [];
  37. fruits.forEach(fruit => {
  38. toppings.forEach(topping => {
  39. desserts.push([
  40. fruit,topping]);
  41. });})

1-11.写不能到达的代码

  1. Bad ??(不要参考)
  2. function dealData(num) {
  3. if (num) {
  4. return num ** 2;
  5. }
  6. return undefined;
  7. }
  8. Good ????(谨记)
  9. function dealData(num) {
  10. if (typeof num === 'undefined' || num === null || null === '') {
  11. return undefined;
  12. }else {
  13. return num ** 2;
  14. }
  15. return null; // 我也不知道干什么
  16. }

 1-12.不要删除代码,能保留的就保留,不能保留的注释掉,不要删除,这个是历史,是沉淀,是成长

  1. Bad ??(不要参考)
  2. Good ????(谨记)
  3. if (data.code == "1") {
  4. let resData= data.data;
  5. if(resData && resData.length > 0){
  6. resData.forEach(v => {
  7. v.titleName = v.name
  8. })
  9. this.attachmentList = resData;
  10. }else{
  11. this.attachmentList = [];
  12. }
  13. } else{
  14. this.attachmentList = [];
  15. }
  16. });
  17. // this.attachmentList = [
  18. // {
  19. // "appId": "123451234567890671234567890890",
  20. // "attFiles": [
  21. // {
  22. // "bizId": "123451234567890671234567890890",
  23. // "createDate": "2023-09-20 10:08:35",
  24. // "delFlag": "1",
  25. // "filePath": "/upload/eb5_jsgc_project_plan_att/123451234567890671234567890890.pdf",
  26. // "fileSize": 0,
  27. // "fileType": "1",
  28. // "hashCode": "",
  29. // "id": "123451234567890671234567890890",
  30. // "name": "结果公告.pdf",
  31. // "remark": "{comeform:GC}",
  32. // "sort": 1,
  33. // "updateDate": "2023-09-20 10:08:35"
  34. // },
  35. // {
  36. // "bizId": "37854334689723469098754780087",
  37. // "createDate": "2023-09-20 10:08:35",
  38. // "delFlag": "1",
  39. // "filePath": "/upload/eb5_jsgc_project_plan_att/37854334689723469098754780087.pdf",
  40. // "fileSize": 0,
  41. // "fileType": "1",
  42. // "hashCode": "",
  43. // "id": "37854334689723469098754780087",
  44. // "name": "测试 (1).pdf",
  45. // "remark": "{comeform:GC}",
  46. // "sort": 2,
  47. // "updateDate": "2023-09-20 10:08:35"
  48. // }
  49. // ],
  50. // "attributes": {},
  51. // "categoryCode": "dfsdfsdsd",
  52. // "categoryId": "5656536576sasd578as86da5s65da",
  53. // "createTime": "2023-04-14 13:49:21",
  54. // "createUser": "system",
  55. // "delFlag": false,
  56. // "fileType": "1",
  57. // "id": "224234234efwer234efsd24234242",
  58. // "titleName": "测试22",
  59. // "required": false,
  60. // "showFlag": false,
  61. // "sort": 1,
  62. // "systemFlag": true,
  63. // "updateTime": "2023-08-15 18:52:03",
  64. // "updateUser": "system",
  65. // "upload": false,
  66. // "value": "1"
  67. // }
  68. // ]
  69. }

1-12.循环里面最好if。if里面最好再有循环,这个是精髓

  1. Bad ??(不要参考)
  2. // 好的没有参考,自己发挥!!!
  3. Good ????(谨记)
  4. // 这样写别就看不懂,或者看懂的时间要花很久,这写多了就好了,最好不要对齐
  5. function dealData(num) {
  6. for (循环1) {
  7. if (判断1) {
  8. if (判断2) {
  9. asyncFunction(params, (result) => {
  10. if (result) {
  11. for (循环2) {
  12. if (判断3) {
  13. }
  14. }
  15. }
  16. })
  17. }
  18. }
  19. }
  20. }

 1-13.不要写ts,语言类型指定的,最好使用any大法

  1. Bad ??(不要参考)
  2. //
  3. function sum(a: number, b: number): ?number {
  4. // 当我们在JS中不做置换和/或流类型检查时,覆盖这种情况。
  5. if (typeof a !== 'number' && typeof b !== 'number') {
  6. return undefined;
  7. }
  8. return a + b;
  9. }
  10. // 这个应该在转换/编译期间失败。
  11. const guessWhat = sum([], {}); // -> undefined
  12. Good ????(谨记)
  13. // 简洁,清爽,体积小,极度推荐
  14. function sum(a, b) {
  15. return a + b;
  16. }

 1-14.尽可能的使用三目运算符

  1. Bad ??(不要参考)
  2. // 没有正确示范,我怕你变成了高级工程师了(函数处理)
  3. Good ????(谨记)
  4. // 简洁,清爽,极度推荐
  5. <Steps
  6. progressDot
  7. current={ lastTask && lastTask.taskKey === 'apply' ? 1 : lastTask && lastTask.taskKey === 'examine' && lastTask.status == 'agree' ? 2 : lastTask && lastTask.taskKey === 'approval' ? 3 : 0 }
  8. >

 1.15.函数长的比短的好(不要拆分组件,越长越好)

  1. Bad ??(不要参考)
  2. // 没有正确示范
  3. Good ????(谨记)
  4. // 不要把程序逻辑分成可读的部分
  5. // 一个文件中10000行代码是OK的。
  6. // 一个函数体有1000行代码是OK的。

 1.16.避免代码风格统一,拒绝格式化

  1. Bad ??(不要参考)
  2. // 没有正确示范
  3. Good ????(谨记)
  4. // 不要开启eslint
  5. // 不要安装Prettier

 1.17.构建项目不需要写 README 文档,让你猜

  1. Bad ??(不要参考)
  2. // 没有正确示范
  3. Good ????(谨记)

1.18.随意读取window对象的值

  1. Bad ??(不要参考)
  2. // 没有正确示范
  3. Good ????(谨记)
  4. // 作为大型项目,很容易需要依赖别的模板挂载到window对象的内容,读取的时候需要考虑到是否有可能拿不到window对象上的内容,从而导致js报错?例如:
  5. // window.tmeXXX.a.func();
  6. // 如果这个tmeXXX所在的js加载失败了,或者是某个版本中没有a这个属性或者func这个函数,那么页面就会白屏。

1.19.尽量操作DOM,使之降低

  1. Bad ??(不要参考)
  2. // 没有正确示范
  3. Good ????(谨记)
  4. // 简单易懂
  5. function manipulateDOM(selector, operation) {
  6. // 获取元素
  7. const element = document.querySelector(selector);
  8. // 根据操作执行相应的操作
  9. switch (operation) {
  10. case 'get':
  11. return element;
  12. case 'set':
  13. element.textContent = '新的内容';
  14. break;
  15. case 'add':
  16. element.innerHTML += '<div>新的元素</div>';
  17. break;
  18. case 'remove':
  19. element.removeChild(element.lastChild);
  20. break;
  21. default:
  22. throw new Error(`Invalid operation: ${operation}`);
  23. }
  24. }
  25. // 使用示例
  26. manipulateDOM('.my-element', 'set'); // 设置元素内容
  27. manipulateDOM('.my-element', 'add'); // 添加新的子元素
  28. manipulateDOM('.my-element', 'remove'); // 删除最后一个子元素

1.20.硬编码操作

  1. Bad ??(不要参考)
  2. // 没有正确示范
  3. Good ????(谨记)
  4. // 简单易懂
  5. function getScenevalue() {
  6. switch (detail.type){
  7. case "1":
  8. return 1;
  9. case "2":
  10. case "3":
  11. return 2;
  12. default:
  13. return 3;
  14. }
  15. }

1.21.不要封装组件,十分重要

  1. Bad ??(不要参考)
  2. // 没有正确示范
  3. Good ????(谨记)
  4. // 简单易懂
  5. <el-table size="small" :data="tableData" v-loading="dataListLoading" ref="expertExtractTable" stripe border>
  6. <el-table-column
  7. label="序号"
  8. type="index"
  9. fixed
  10. :index="indexMethod"
  11. width="50"
  12. align="center"
  13. :show-overflow-tooltip="true"
  14. ></el-table-column>
  15. <el-table-column label="操作" prop="governmentInvest" align="left" width="200" :show-overflow-tooltip="true">
  16. <template slot-scope="scope">
  17. <el-button
  18. style="color: #52c41a"
  19. v-if="scope.row.approvalStatus == 1"
  20. type="text"
  21. size="small"
  22. title="同意"
  23. @click="exportExcel(scope.row)"
  24. >导出</el-button>
  25. </template>
  26. </el-table-column>
  27. <el-table-column label="项目编号" prop="ProjectCode" align="left" width="120" :show-overflow-tooltip="true"></el-table-column>
  28. <el-table-column label="项目名称" prop="ProjectName" align="left" width="200" :show-overflow-tooltip="true"></el-table-column>
  29. <el-table-column label="包件编号" prop="Code" align="left" width="200" :show-overflow-tooltip="true"></el-table-column>
  30. <el-table-column label="包件名称" prop="Name" align="left" width="200" :show-overflow-tooltip="true"></el-table-column>
  31. <el-table-column label="项目属性" prop="area" align="left" width="200" :show-overflow-tooltip="true"></el-table-column>
  32. <el-table-column label="省内企业中标" prop="isTenType" align="left" width="200" :show-overflow-tooltip="true"></el-table-column>
  33. <el-table-column label="价款形式" prop="isTenType" align="left" width="200" :show-overflow-tooltip="true"></el-table-column>
  34. <el-table-column label="金额(万元)" prop="bidAmount" align="left" width="200" :show-overflow-tooltip="true"></el-table-column>
  35. <el-table-column label="合同估算价(万元)" prop="bidAmount" align="left" width="200" :show-overflow-tooltip="true"></el-table-column>
  36. <el-table-column label="节资额(万元)" prop="bidAmount" align="left" width="200" :show-overflow-tooltip="true"></el-table-column>
  37. <el-table-column label="日期" prop="busuetime" align="left" width="200" :show-overflow-tooltip="true"></el-table-column>
  38. </el-table>

1.22.乱用hooks,乱用useEffect,到处都是onMounted

  1. Bad ??(不要参考)
  2. // 没有正确示范
  3. Good ????(谨记)
  4. // 简单易懂 我想写哪里就写哪里onMounted
  5. onMounted(() =>{
  6. console.log("生命周期函数:onMounted")
  7. } )
  8. onMounted(() =>{
  9. console.log("生命周期函数:onMounted")
  10. } )
  11. // 简单易懂 useEffect我想写什么依赖就写什么依赖,我不写也可以 ,嘿嘿
  12. useEffect(() => {
  13. console.log('no deps=====')
  14. // code...
  15. });
  16. useEffect(() => {
  17. console.log('no deps=====')
  18. // code...
  19. },[appId]);
  20. useEffect(() => {
  21. console.log('no deps=====')
  22. // code...
  23. },[appId]);
  24. useEffect(() => {
  25. console.log('no deps=====')
  26. // code...
  27. },[appId]);
  28. const { pathname, query } = location;
  29. useEffect(() => {
  30. console.log('no deps=====')
  31. // code...
  32. },[window.location.hash]);
  33. useEffect(() => {
  34. console.log('no deps=====')
  35. // code...
  36. },[query]);

 

 

 2.小礼物

2.1.引入evil.js

 https://github.com/duo001/evil.js

  1. 什么?黑心996公司要让你提桶跑路了?
  2. 想在离开前给你们的项目留点小礼物?
  3. 偷偷地把本项目引入你们的项目吧,你们的项目会有但不仅限于如下的神奇效果:
  4. 当数组长度可以被7整除时,Array.includes 永远返回false
  5. 当周日时,Array.map 方法的结果总是会丢失最后一个元素。
  6. Array.filter 的结果有2%的概率丢失最后一个元素。
  7. setTimeout 总是会比预期时间慢1秒才触发。
  8. Promise.then 在周日时有10%不会注册。
  9. JSON.stringify 会把I(大写字母I)变成l(小写字母L)。
  10. Date.getTime() 的结果总是会慢一个小时。
  11. localStorage.getItem 5%几率返回空字符串。
  12. ...
  13. 声明:本包的作者不参与注入,因引入本包造成的损失本包作者概不负责。

 声明:本包的作者不参与注入,因引入本包造成的损失本包作者概不负责。

原文链接:https://www.cnblogs.com/dreamtt/p/17951651

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号