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

来源：刘伟波博客

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