前言
好的代码是有生命力的, 程序是写给人读的, 顺便在机器上跑一下
当你在阅读别人的代码时, 据说评判一个项目的好坏, 就是看阅读代码人说脏话程度
无注释, 无文档, 命名千奇百怪等等, 对于后来者, 极其痛苦, 其实个人觉得一个非常好的产品, 一手代码非常重要, 既是标准, 往往又是参照
工作中, 往往令人尊敬的, 就是代码的产出, 少 bug, 写得又好又快, 毫无疑问是团队中最受敬仰的, 而好的命名往往可以看出一个程序员的功力
做一个自我要求高一点的工程师, 而不止于完成任务. 从代码规范做起, 什么是好代码, 可读性好, 可维护性高. 易拓展. 少 bug, 高质量, 这些硬技能并非一蹴而就. 非一日之功.
人人都喜欢和聪明人一起工作, 我们无法要求别人怎么样, 但可以要求自己.
无论团队人数多少, 代码应该同出一门. 下面这些规范不是硬性规定, 但不妨可以作为参照, 向大厂看齐~
文件夹 (项目) 命名规范
项目名全部采用小写方式, 以中划线分隔. 比如: my-project-name, 例如: ant-design-pro,ant-design-colors 等, 当项目名称有多个字符时, 不是说驼峰命名法 myProjectName 不行, 用横杠中划线进行连接, 已经是约定俗成的习惯, 一定要向大厂的标准看齐
下面以阿里的 ant design Team 团队出品为例
目录文件命名. PNG
子项目录名
当有复数结构时, 要采用复数命名法, 如有多个单词时, 用横杠连接, 比如说: scripts, styles, images, data-models
文件夹目录名称. PNG
值得一提的是: JavaScript 文件的存放的文件夹放在 web 应用目录中的 components 文件夹或其以业务组件, 应用小写标识命名子文件夹
文件夹功能命名. PNG
JavaScript 文件命名
所有的 JavaScript 文件均以. JS 结尾
所有 JS 文件名, 当遇到多个单词组成时, 采用中划线连接方式, 比如说: 比如检查 commit 提交文件, check-commit.JS, 首字母小写, 如下所示
当出现版本号时, 需要用字母 v 做为前缀, 小版本号用点号 (.) 隔开, global-v8.JS 或 detail-v2.2.JS, 有的公司项目的分支管理也按照这样去管理进行迭代开发的
如果 JS 和 CSS 压缩文件, 统一以 - min 结尾, 比如源码文件为 react.JS, 压缩后为 react-min.JS, 一般线上坏境端的, 为了减少体积, 一些额外的类库可以选用压缩版本的
- check-commit.JS // ok, 值得推荐
- Check-Commit.JS // avoid, 避免, 不是不可以, 如果项目里都是驼峰, 那就驼峰命名, 并且首字母小写, 文件名字统一
- cc.JS // avoid, 不要简写, 这是什么意思的
JavaScript 文件命名. PNG
CSS,Less,SCSS 文件命名
参照项目命名规则, 当遇到多个单词组成时, 采用中划线连接方式, 比如说: retina-sprites.SCSS
html 文件命名
同样参照项目命名, 多个单词组成时, 采用中划线连接方式, 比如说: error-report.HTML
图片资源命名
同样参照项目命名, 多个单词组成时, 采用中下划线连接方式, input_bg_search_default@2x.PNG, 组件类别功能状态 @2x.PNG, 对应的中文是: 输入框背景色搜索默认, 这种命名方式不是硬性的, 应当是灵活的, 语义化, 最棒的就是让人一看名字就能理解这图片代表的含义
上面的命名规范, 都适用于 HTML, CSS, JS, PNG, gif, jpg, 等前端维护的所有文件类型和相关目录.
对于文件以及目录或者是变量的命名, 的确是一个令人头疼的问题, 但对于程序员来说, 是问题, 肯定有人想办法去解决: 推荐一个变量命名神器网站[codeIf](https://unbug.github.io/codelf/, 当然也可以在 vscode 插件市场中搜索 CodeIf, 直接安装就可以了, 使用也很简单, 选中变量单词右键 codeIf 就可以进入这个变量命名神器网站的
codeIf 变量命名神器网站. PNG
有了它, 真的可以减少不少变量命名的痛苦.
codeIf 官方 GitHub 网站
注释规范
涉及到文档注释, 单行注释与多行注释, 变量, 语句, 函数注释
文档注释
当针对整个文件的注释, 必须放在 JS 文件的开头, 注释顺序及内容如下, 这个不是硬性规定的, 具体与自己的公司, 项目注释规范而定
版权信息, 如: Copyright © 2020, xxx company. All rights reserved.
产品及模块信息
创建日期 日期格式为: YYYY-MM-DD.
- // Good, 圆括号后有一空格
- if (condition) {
- // 如果你在此处完成, 则所有安全检查都通过了
- allowed();
- }
- var sName = "itclanCoder"; // 双斜线距离分号四个空格, 双斜线后始终保留一个空格
- // 获取窗口的宽度
- var nWidth = widow.screen.width;
- /* 监听表单输入 */
- const HANDLE_INPUT_VALUE = 'handle_input_value'
- /**
- * 函数功能详细 打开模态对话框
- * @param [参数 1] [参数说明]
- * @param [参数 2] [参数说明]
- * @return [返回值说明]
- */
- function openModelDialog(url, winName, width, height) {
- }
- <div class="main-nav">
- </div>
- <div class="skin-blue">
- </div>
- <div class="present-tab">
- 当前标签
- </div>
- <div class="jh-search">
- </div>
- <div class="jh-tab">
- </div>
来源: http://www.jianshu.com/p/645722090954