乐趣区

自我总结代码规范欢迎修正

  1. 函数块不要太长,太长影响阅读,一个函数做一件事
  2. 避免冗余代码和重复代码
  3. 一个文件做一件事,整个文件代码不能太长,保持在 300~500 行以内
  4. 不要提交直接执行的 console.log 信息,影响它人调试
  5. 不要提交没用的注释代码,影响阅读和开发,如果要查看可以进行版本历史

我的代码规范原则

  • 影响阅读的代码,那就是不好代码
  • 很多很相似的代码,那一定是重复冗余了

以下是最近在某代码仓库 js 中发现不规范的代码,当然还有 css 规范了,有兴趣的可以自己上网搜索

代码规范和不规范举例

函数块不要太长,太长影响阅读,一个函数做一件事

  • 太长的函数块 : 建议函数块以编辑器的一屏为准,几乎不用滚动条可以看完整个函数
  • 可以看到这里的函数每行 30 行至更多。打开后必须滚动条才能看清楚这个函数

  • 改良后的函数块
  • 一个函数平均 10-20 行之间

避免冗余代码和重复代码

  • 冗余代码示例
  • 如果你发现了很多地方代码很相似,那肯定是代码重复冗余了

  • 改良后冗余代码示例
  • 发现重复和冗余的规律,统一用函数封装起来

一个文件做一件事,整个文件代码不能太长,保持在 300~500 行以内

  • 文件代码结构划分
  • 一个 method 可以拆分成文件夹,通过 index 入口导入
  • 一个文件做一件事,可以看到一个文件才不到 200 行
  • 还有文件顺序问题,比如 vue 钩子函数,建议不用把 created 写在最后

  • 文件夹结构
  • 公共的 css 提出来
  • 公共的方法用 mixin 提出来

不要提交直接执行的 console.log 信息,影响它人调试

  • 及时运行的 log 信息
  • 写代码的时候可以用,提交尽量不要提交 console.* 信息

  • 杂乱的 log 控制台

不要提交没用的注释代码,影响阅读和开发,如果要查看可以进行版本历史

  • 不要提交注释代码可在版本历史查看

  • 版本历史

一起努力吧


作者:刘伟波

链接:http://www.liuweibo.cn/p/252

来源:刘伟波博客

本文原创版权属于刘伟波,转载请注明出处,谢谢合作

退出移动版