前端
阅读量

前端开发规范整理

一、为什么要有规范

  • 降低新成员融入团队的成本, 同时也一定程度避免挖坑；
  • 提高开发效率、团队协作效率, 降低沟通成本；
  • 实现高度统一的代码风格，方便review, 另外一方面可以提高项目的可维护性；
  • 规范是实现自动化的基础；
  • 规范是一个团队知识沉淀的直接输出；

如果开发团队就一个人的话，那么自己写的代码就是规范，随着公司业务的扩展，团队不断壮大，这时候就要开始考虑协作和编码规范问题了。

二、html规范

html类型

  • doctype大写
  • 规定字符编码
  • IE兼容模式
  • 设备尺寸兼容
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    <!DOCTYPE html>
    <html lang="zh-cmn-Hans">
    <head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width,initial-scale=1.0">
      <title>title</title>
    </head>

    <body>
      <div id="app">

      </div>
    </body>
    </html>

html代码书写规范

缩进：使用 2 个空格或4个空格（一个 tab），嵌套的节点应该缩进
语义化标签：HTML5 中新增很多语义化标签，所以优先使用语义化标签，避免一个页面都是 div
分块注释：在每一个块状元素，列表元素和表格元素后，加上一对 HTML 注释
引号使用：使用双引号(“ “) 而不是单引号(’ ‘)

标签上属性的顺序

  • class ( class 是为高可复用组件设计的,所以应处在第一位)
  • id name (id 更加具体且应该尽量少使用,所以将它放在第二位)
  • data-*
  • src for type href value
  • placeholder title alt
  • aria-* role
  • required readonly disabled

html书写注意事项

  • 不要省略可选的结束标签
  • 特殊符号的使用HTML字符实体（如：空格   或 > ®）
  • td/th要在tr里，li要在ul/ol里；ul/ol里只能有li，不能包含其他元素
  • 行内元素不能包含块级元素
  • 注意不要使用重复属性
  • 不要在https的链接里写http的图片，图片（）
  • 编写HTML代码时，尽量避免多余的层级嵌套
  • 任何时候都要尽量使用最少的标签并保持最小的复杂度

三、css规范

css命名

  • 类名使用小写字母，以中划线分隔
  • id 采用驼峰式命名
  • 命名语义化
  • 尽量使用缩写、低代码

属性顺序

  • 位置属性 position top right z-index display float
  • 大小 width height padding margin
  • 文字系列 font line-height letter-spacing color text-align
  • 背景background border
  • 其他 animation transition

OOCSS规范

概念：Object Oriented CSS，面向对象的CSS，旨在编写高可复用、低耦合和高扩展的CSS代码。
OOCSS是以面向对象的思想去定义样式，将抽象和实现分离，抽离公共代码。
最典型的oocss规范使用案例：bootstrap

区分结构与样式

在定义一个可复用性的组件库时，我们仅创建基础的结构（html）和基础的类名，不应该创建类似于border, width, height, background等样式规则，这样使组件库更灵活和可扩展性。组件库在不同环境下的样式所要求不一样，若未能区分其结构和样式，给其添加样式，会使其变成一个特定的组件库，而难以复用。

css注意事项

  • 所有声明都必须以分好结尾
  • 避免0值指定单位，例如 margin:0; 代替 margin:0px;
  • 选择器中的属性加双引号，例如input[type=“text”]
  • 十六进制值应该全部小写，例如 #ff6600
  • 不要出现空的规则（声明块中没有声明语句）
  • 不要设置太大的z-index(一般在10以内)
  • 用border:0;代替border:none;
  • 对于属性值或颜色值参数，省略小于1的小数前面的0，例如（.5;代替0.5；）
  • important前插入一个空格

四、js规范

js书写

  • 变量和函数的命名规则
  • 空格、缩进规则统一
  • 注释的使用规则
  • 其他常用规范

变量命名

命名方法：小驼峰式命名法。
命名规范：前缀应当是名词。(函数的名字前缀为动词，以此区分变量和函数)
命名建议：尽量在变量名字中体现所属类型，如:length、count等表示数字类型；而包含name、title表示为字符串类型。

函数命名

命名方法：小驼峰式命名法。
命名规范：前缀应当是名词。(函数的名字前缀为动词，以此区分变量和函数)
命名建议：尽量在变量名字中体现所属类型，如:length、count等表示数字类型；而包含name、title表示为字符串类型。

常量命名

命名方法：名称全大写。
命名规范：使用大写字母和下划线组合命名。

构造函数命名

命名方法：大驼峰式命名，首字母大写。
命名规范：前缀为命名。

单行注释

① 单独一行：//(双斜线)与注释文字之间保留一个空格。
② 在代码后面添加注释：//(双斜线)与代码之间保留一个空格，并且//(双斜线)与注释文字之间保留一个空格。
③ 注释代码：//(双斜线)与代码之间保留一个空格。

多行注释

① 若开始(/)和结束(/)都在一行，推荐采用单行注释。
② 若至少三行注释时，第一行为/，最后行为/，其他行以开始，并且注释文字与保留一个空格。

函数(方法)注释

说明：函数(方法)注释也是多行注释的一种，但是包含了特殊的注释要求。
语法： 

1
2
3
4
 /**
* 函数说明
* @关键字
*/

js命名规则

  • 变量和函数为小驼峰法标识, 即除第一个单词之外，其他单词首字母大写（ lowerCamelCase）
  • 全局变量为大写 (UPPERCASE )
  • 常量 (如 PI) 为大写 (UPPERCASE )
  • 通常在 JavaScript 中被认为是减法，所以不允许使用。
  • 变量名不要以 $ 作为开始标记，会与很多 JavaScript 库冲突。

js注意事项

  • 所有命名最好使用英语表示。
  • 所有变量名应该明确而必要，尽量避免不必要的容易混淆的缩写。
  • 对应的方法应该使用对应的动词，例如：get/set, add/remove, create/destroy, * start/stop, insert/delete, begin/end。
  • 应该避免双重否定意义的变量，例如：bIsNotError, bIsNotFound，不可取。
  • 变量应该在最小的范围内定义，并尽可能的保持最少的活动时间。
  • 循环变量最好在循环中定义。例如for(var i=0,m=10;i++)
  • 尽量避免复杂的条件语句，可以使用临时的boolean变量代替。
  • 一定要避免在条件中执行语句，例如：if((i=3)>2){}，不可取。

五、其他规范

项目及目录

  • 项目命名：大写或小写，中划线分割
  • 目录命名：全部小写或小驼峰式
  • 文件命名：小驼峰式
  • 组件命名：大驼峰式
  • 尽量语义化

前端编辑器

  • vscode：无数大佬调侃过，微软这两年干的好事儿有两个，一个是推出了typescript，一个是推出了vscode。可见vscode的受欢迎程度。开源免费、插件多、很多漂亮主题。

  • WebStorm：WebStorm 是JetBrains公司旗下的前端开发工具。被称为最智能的JavaScriptIDE。具有很强的智能提示、强大的git管理。但需要破解使用。

  • HBuilderX：DCloud全新推出的一款HTML5的Web开发工具 HBuilderX，H是HTML的首字母，Builder是构造者，X是HBuilder的下一代版本，HBuilderX 是一款编辑器和IDE的完美结合，体积小巧，启动秒开，默认包含优秀的字处理能力，创新众多其他编辑器不具备的高效字处理模型。国产、uniapp。

  • sublime3：sublime text是一个轻量级的编辑器，也是支持各种编程语言，sublime text所有的强大功能都是支持插件的，而且快捷键十分的好用，可以极大的减少开发的劳动程度，使用sublime就是要使用其快捷键和插件。轻量级、启动快。

六、总结

好的代码每行都像一道风景，让人赏心悦目。
乱的代码会让人心情烦躁，甚至直接疯掉。
所以我们要养成好的编码习惯，
即有益于自己，也有益于他人。