前端代码规范文档

前端代码规范文档

HTML代码规范
通用
页面模式
● [强制] 使用html5的doctype来启用标准模式，建议使用大写的 DOCTYPE。
● [强制] 页面必须使用精简形式，明确指定字符编码。指定字符编码的 meta 必须是 head 的第一个直接子元素。
● [强制] 页面必须包含 title 标签声明标题。
● [建议] 启用 IE Edge 模式。
● [建议] 在 html 标签上设置正确的 lang 属性, 目前web项目统一设置为’zh-CN‘。
favicon
● [强制] 保证favicon可访问
● [强制] 引入 CSS 时必须指明 rel="stylesheet"。
● [建议] 引入 CSS 和 JavaScript 时无须指明 type 属性。
● [建议] 在 head 中引入页面需要的所有 CSS 资源。
● [建议] JavaScript 应当放在页面末尾，或采用异步加载。
● [建议] 为兼容IE9及以下浏览器样式，有必要在head中使用CSS if IE条件注释。
代码风格
● 缩进与换行
● [强制] 使用4个空格作为缩进。
● 命名
● [强制] class 必须单词全字母小写，单词间以 - 分隔。
● [强制] 元素 id 必须保证页面唯一
● [强制] class 必须代表相应模块或部件的内容或功能，不得以样式信息进行命名。
● 标签
● [强制] 标签名必须使用小写字母。
● [强制] 标签使用必须符合标签嵌套规则。
● [强制] 属性名必须使用小写字母，属性值必须用双引号。
● [建议] 布尔类型的属性，建议不添加属性值。
● [建议] 自定义属性建议以 xxx- 为前缀，推荐使用 data-。
● [建议] 对于无需自闭合的标签，也需要自闭合。
● [建议] 标签的使用应尽量简洁，减少不必要的标签。
图片
●[强制] 禁止img的src取值为空。延迟加载的图片也要默认的src
●[强制] 项目本地图片大小不能找过2MB，北斗部署有限制，超过无法部署。
●[建议] 避免为img添加不必要的title属性。
●[建议] 添加width和height属性，以避免页面抖动。
●[建议] 有下载需求的图片采用 img 标签实现，无下载需求的图片采用 CSS 背景图实现。
●[建议] img 标签缺少alt属性时，sonar警告消除使用/ eslint-disable jsx-a11y/alt-text /。
表单
●按钮
●[强制] 使用 button 元素时必须指明 type 属性值。
●button 元素的默认 type 为 submit，如果被置于 form 元素中，点击后将导致表单提交。为显示区分其作用方便理解，必须给出 type 属性。
CSS编码规范
通用
●[建议] css文件使用无BOM的UTF-8编码，文件首行加上@charset "utf-8";。
●[强制] css文件中禁止使用@import导入css文件。
●[强制] 禁止使用Expression。
●[强制] 禁止使用*来选择元素。
●[强制] 小图片（必须）sprite 合并。
●[建议] 尽量不使用 !important 声明。
●[建议] 页面根样式命名使用”.page“， 组件根样式命名使用”.header“。
●[建议] 样式文件名称与页面文件名称保持一致 index.js === index.less。
注释
●[建议] 不建议使用单行注释。
格式
●使用2个空格作为缩进。
●类名使用建议使用破折号代替驼峰法。
●在一个规则声明中应用了多个选择器时，每个选择器独占一行。
●在规则声明的左大括号 { 前加上一个空格。
●在属性的冒号 : 后面加上一个空格，前面不加空格。
●规则声明的右大括号 } 独占一行。
●属性超过一条时定义另起一行。
●每个样式属性后（必须）加 ";"，方便压缩工具"断句"。
●样式结构与html结构保持一致。
●为节省不必要的字节同时也使阅读方便，我们将0px、0em、0%等值缩写为0。
命名
● Class命名中（禁止）出现大写字母，（必须）采用” - “对class中的字母分隔。
样式声明顺序
●[建议] 定义左到右，从上到下，根据css样式的属性，可以归为两大类：
○定位属性（影响文档流布局） -- 定位(Positioning) -- 盒子模型(Box model)
○自身属性（不影响文档流布局） -- 印刷样式(Typographic) -- 图像样式(Visual)
○好处：减少浏览器reflow（回流），提升浏览器渲染dom的性能。查看节点样式代码时，方便快速定位节点在文档中所处位置和尺寸。
●[建议] 如果属性间存在关联性，则不要隔开写。
选择器
●[建议] 避免使用属性选择器[class^="..."]，会存在性能问题。
●[建议] 选择器的嵌套层级应不大于3级，位置靠后的限定条件应尽可能精确。
●[建议] 在可以使用缩写的情况下，尽量使用属性缩写。
●[强制] 字体必须使用英文，引号包裹。
●[强制] 如无必要，不得为 id、class 选择器添加类型选择器进行限定。
id选择器
●在 CSS 中，虽然可以通过 ID 选择元素，但大家通常都会把这种方式列为反面教材。ID 选择器给你的规则声明带来了不必要的高优先级，而且 ID 选择器是不可重用的。
JavaScript 钩子
●[强制] 选择器尽量用class，id作为js预留钩子。
●[建议] 当class需要作为js预留钩子，命名时请以js-开头
TypeScript编码规范
变量和函数
●使用驼峰（camelCase）命名变量和函数名, 使用函数表达式代替函数声明
类
●使用帕斯卡（PascalCase）命名类名
接口
●使用帕斯卡（PascalCase）命名接口 使用驼峰（camelCase）命令成员 误使用 I 前缀 接口不应该为空
命名空间
●使用帕斯卡（PascalCase）命名
枚举
●使用帕斯卡（PascalCase）命名枚举及成员
包装器对象不能用于基本类型
●对基本类型使用包装器对象是不必要的。如果使用包装器对象构造函数进行类型转换，只需删除new关键字，就会自动获得一个原始值。如果使用包装器对象作为向原语添加属性的方法，则应该重新考虑设计。这样的使用被认为是不好的实践，应该进行重构。
建议使用for of 迭代替换 for / for in
●如果您有一个可迭代对象，例如数组、set或list，那么对其值进行循环的最佳选择是for of语法。用一个for/for in你会得到正确的行为，但你的代码不是那么干净或清晰。
NaN不能用作比较【bug】
●NaN不等于任何东西，甚至不等于它本身。
变量不应该被覆盖
●覆盖在外部作用域中声明的变量会严重影响一段代码的可读性，因此也会影响其可维护性。此外，它可能会导致维护人员引入错误，因为他们认为他们在使用一个变量，但实际上在使用另一个变量。
变量不应该自赋值【bug】
●没有理由将变量重新赋值给自身。要么这条语句是多余的，应该删除，要么重新赋值是错误的，应该使用其他值或变量来代替赋值。