制定本身团队的前端开发规范

时间 2019-11-05

标签制定本身团队前端开发规范繁體版

原文原文链接

篇幅可能会比较长，可是我感受有一套规范对于一个团队其实仍是很重要的，这样在维护起来也会很方便，若是接下来的规范感受对大家团队有帮助，但愿能够在团队中进行实践或者推荐给你的leader，代码规范参考自：腾讯alloyteam团队，但愿你们能够跟着看一遍，各取所需。css

后续的文章我也补充齐全了，一共有两篇，都是实战篇，一篇是制定本身团队的前端开发规范之 eslint，另一篇是手摸手带你实践标准的前端开发规范，但愿你们能够去看一下，而后把这套规范实践起来，让本身的开发存在更少的bug。html

若是能够的话，实践过程当中有用的不舒服的，麻烦给我进行反馈，这样才能知道这套规则适不适合大部分人去用，根据你们的意见，取其精华去其糟粕让这套规范变得更实用。前端

命名规范

项目命名

所有采用小写方式，如下划线分隔。例：my_project_namevue

目录命名

参照项目命名规则；jquery

有复数结构时，要采用复数命名法。git

例：scripts，styles，images，data_modelses6

vue的项目中，components下的组件目录名，使用大驼峰命令github

例：LeftBar数组

JS文件命名

参照项目命名规则。浏览器

例：account_model.js

CSS, SCSS文件命名

参照项目命名规则。

例：retina_sprites.css

HTML文件命名

参照项目命名规则。

例：error_log.html

HTML 规范

语法：

缩进使用 tab（2 个空格）；
嵌套的节点应该缩进；
在属性上，使用双引号，不要使用单引号；
属性名全小写，用中划线（-）作分隔符；
要在自动闭合标签结尾处使用斜线；

<!DOCTYPE html>
<html>
  <head>
    <title>Page title</title>
  </head>
  <body>
    <img src="images/company_logo.png" alt="Company" />

    <!-- 属性名全小写，用中划线（-）作分隔符 -->
    <h1 class="hello-world">Hello, world!</h1>
  </body>
</html>
复制代码

标准模式

在开头规定 doctype，来启动标准模式，doctype 要大写。

<!DOCTYPE html>
<html>
  ...
</html>
复制代码

规定字符编码

经过声明一个明确的字符编码，让浏览器轻松、快速的肯定适合网页内容的渲染方式，一般指定为'UTF-8'。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
  </head>
  ...
</html>
复制代码

IE 兼容模式

用 meta 标签指定页面应该使用什么版本的 IE 来渲染。

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
  </head>
  ...
</html>
复制代码

减小标签数量

在编写 HTML 代码时，须要尽可能避免多余的父节点；

<!-- bad -->
<span class="avatar">
  <img src="..." />
</span>

<!-- good -->
<img class="avatar" src="..." />
复制代码

语义化标签

html 的标签能使用语义化的，尽可能使用语义化标签，避免一个页面都是 div 或者 p 标签

<!-- bad -->
<div>
  <p></p>
</div>

<!-- good -->
<header></header>
<footer></footer>
复制代码

CSS 规范

缩进

使用 tab 缩进（2 个空格）

.element {
  border-radius: 10px;
  width: 50px;
  height: 50px;
}
复制代码

分号

每一个声明结束都要加分号

.element {
  border-radius: 10px;
  width: 50px;
  height: 50px;
}
复制代码

注释

注释统一使用 /* */

.element {
  /* border-radius: 10px; */
  width: 50px;
  height: 50px;
}
复制代码

引号

url 的内容要用引号
属性选择器中的属性值须要引号

.element:after {
  content: "";
  background-image: url("logo.png");
}

li[data-type="single"] {
  ...;
}
复制代码

命名

类名使用小写字母，以中划线分隔
id 采用驼峰式命名
scss 中的变量、函数、混合、placeholder 采用驼峰式命名

/* class */
.element-content {
  ...;
}

/* id */
#myDialog {
  ...;
}

/* 变量 */
$colorBlack: #000;

/* 混合 */
@mixin centerBlock {
  ...;
}
复制代码

JavaScript 规范

缩进

使用 tab 缩进（2 个空格）

if (x < y) {
  x += 10;
} else {
  x += 1;
}
复制代码

变量命名

标准变量采用驼峰式命名
'Android'在变量名中大写第一个字母
'iOS'在变量名中小写第一个，大写后两个字母
常量全大写，用下划线链接
构造函数，大写第一个字母
jquery 对象必须以'$'开头命名

var thisIsMyName;

var AndroidVersion;

var iOSVersion;

var MAX_COUNT = 10;

function Person(name) {
  this.name = name;
}

// not good
var body = $("body");

// good
var $body = $("body");
复制代码

变量声明

一个函数做用域中全部的变量声明尽可能提到函数首部。若是可使用 let 和 const 的，要使用 let 和 const。

function doSomethingWithItems(items) {
  // use one var
  let value = 10,
    result = value + 10,
    i,
    len;

  for (i = 0, len = items.length; i < len; i++) {
    result += 10;
  }
}
复制代码

单行长度

不要超过 100，但若是编辑器开启 word wrap 能够不考虑单行长度。

分号

统一要加分号。

空格

如下几种状况不用写空格：

对象的属性名后
函数调用括号前
不管是函数声明仍是函数表达式，'('前不要空格
数组的'['后和']'前
运算符'('后和')'前

如下几种状况必定要写空格：

三元运算符'?:'先后
逗号后必需要有空格
代码块'{'前
下列关键字前：else, while, catch, finally
下列关键字后：if, else, for, while, do, switch, case, try,catch, finally, with, return, typeof
单行注释'//'后（若单行注释和代码同行，则'//'前也须要），多行注释'*'后
对象的属性值前
for 循环，分号后留有一个空格，前置条件若是有多个，逗号后留一个空格
不管是函数声明仍是函数表达式，'{'前必定要有空格
函数的参数之间

这些后续会用 eslint 和 prettier 进行格式化

例：

// not good
var a = {
  b : 1
};

// good
var a = {
  b: 1
};

// not good
++x;
y++;
z = x ? 1:2;

// good
++x;
y++;
z = x ? 1 : 2;

// not good
var a = [ 1, 2 ];

// good
var a = [1, 2];

// good
var doSomething = function(a, b, c) {
  // do something
};

// good
doSomething(item);

// not good
for (let i = 0;i < 6;i++) {
  x++;
}

// good
for (let i = 0; i < 6; i++) {
  x++;
}
复制代码

空行

如下几种状况必定要有空行

变量声明后（当变量声明在代码块的最后一行时，则无需空行）
注释前（当注释在代码块的第一行时，则无需空行）
文件最后保留一个空行

var x = 1;

// 注释前要有空行
if (x >= 1) {
  var y = x + 1;
}
复制代码

换行

换行的地方，行末必须有','或者运算符；

如下几种状况不须要换行：

下列关键字后：else, catch, finally
代码块'{'前

如下几种状况须要换行：

代码块'{'后和'}'前
变量赋值后

// not good
var a = {
    b: 1
    , c: 2
};

x = y
    ? 1 : 2;

// good
var a = {
    b: 1,
    c: 2
};

x = y ? 1 : 2;

// good
if (condition) {
    ...
} else {
    ...
}

try {
    ...
} catch (e) {
    ...
} finally {
    ...
}

// not good
function test() {
    ...
}

// good
function test() {
    ...
}

// not good
var a, foo = 7, b,
    c, bar = 8;

// good
var a,
    foo = 7,
    b, c, bar = 8;
复制代码

注释

单行注释

注释单独一行的状况下，注释的//后面要跟一个空格
注释若是和代码同一行，代码分号结束后，要跟一个空格，注释的//后也要跟一个空格

例：

// 调用函数
foo();

var maxCount = 10; // 这是一个变量
复制代码

多行注释

多行注释使用下面这种形式：

/** * 代码注释1 * 代码注释2 */
复制代码

多行注释建议在如下几种状况使用：

难于理解的代码段
可能存在错误的代码段
浏览器特殊的 HACK 代码
业务逻辑强相关的代码

函数注释

复杂的函数，全部类，都必须进行函数注释，函数注释使用业界统一的规范，方便后续使用 jsdoc 生成文档。

例：

/** * 获取任务的名称 * @param id {Number} 传入须要获取名称的人物id * @return {String} 返回的姓名 * @author shi 2015/07/21 能够不写 * @version 1.1.0 能够不写 * @example 示例代码，能够不写 */
function getTaskName(id) {
  let name = "test";
  return name;
}
复制代码

引号

最外层统一使用单引号，除非字符串嵌套的状况。

// not good
var x = "test";

// good
var y = 'foo',
  z = '<div id="test"></div>';
复制代码

对象，数组

对象属性名不须要加引号，如对象属性名是中划线命名的须要加引号（eslint 的 rules）
对象以缩进的形式书写，不要写在一行（单个属性能够写一行，es6 导入方法时可使用单行）；
数组、对象最后不要有逗号。

// good
var a = {
  b: 1,
  c: 2
};
复制代码

括号

下列关键字后必须有大括号（即便代码块的内容只有一行）：if, else, for, while, do, switch, try, catch, finally, with。

// not good
if (condition) doSomething();

// good
if (condition) {
  doSomething();
}
复制代码

undefined

永远不要直接使用 undefined 进行变量判断；

使用 typeof 和字符串'undefined'对变量进行判断。

// not good
if (person === undefined) {
    ...
}

// good
if (typeof person === 'undefined') {
    ...
}
复制代码

不容许存在多层嵌套的条件判断和循环（最多三层）

条件判断能使用三目运算符和逻辑运算符解决的，就不要使用条件判断，可是谨记不要写太长的三目运算符。

例：

// bad
if (x === 10) {
  return 'valid';
} else {
  return 'invalid';
}

// good
return x === 10 ? 'valid' : 'invalid';

// bad
if (!x) {
  if (!y) {
    x = 1;
  } else {
    x = y;
  }
}

// good
x = x || y || 1;
复制代码

简单解释一下逻辑运算符，逻辑运算符主要有两种，一个是 || 逻辑或，一个是 && 逻辑与。

逻辑或 ||：当前一个为真时，返回前一个值，前一个为假时返回后一个值。

var x = 1;
console.log(x || 2); // 1

var y = 0;
console.log(y || 2); // 2
复制代码

逻辑与 &&：当前一个为真时，返回后一个值，前一个为假时返回前一个值。

var x = 1;
console.log(x && 2); // 2

var y = 0;
console.log(y && 2); // 0
复制代码

其余 ESlint

for-in 里必定要有 hasOwnProperty 的判断；
不要在内置对象的原型上添加方法，如 Array, Date；
变量不要先使用后声明；
不要在一句代码中单单使用构造函数，记得将其赋值给某个变量；
不要在同个做用域下声明同名变量；
不要在一些不须要的地方加括号，例：delete(a.b)；
不要使用未声明的变量；
debugger 不要出如今提交的代码里；
数组中不要存在空元素；
不要在循环内部声明函数；
不要直接 new 使用构造函数（new Vue() 除外）；
不要声明了变量却不使用；

这些均可以参考 eslint-config-alloy，有详细的 JS、TS、React、Vue 的规范，咱们后续配置 eslint 时也是引入腾讯的 eslint 规范。

// good
for (key in obj) {
  if (obj.hasOwnProperty(key)) {
    // be sure that obj[key] belongs to the object and was not inherited
    console.log(obj[key]);
  }
}

// not good
Array.prototype.count = function(value) {
  return 4;
};

// not good
function test() {
  console.log(x);

  var x = 1;
}

// not good
new Person();

// good
var person = new Person();

// not good
delete (obj.attr);

// good
delete obj.attr;

// not good
var a = [1, , , 2, 3];

// not good
var nums = [];

// not good
for (var i = 0; i < 10; i++) {
  (function(i) {
    nums[i] = function(j) {
      return i + j;
    };
  })(i);
}
复制代码

其余

换行符统一用'LF'；
对上下文 this 的引用只能使用'_this', 'that', 'self'其中一个来命名；
行尾不要有空白字符；
不容许有空的代码块（若是实在须要，能够在代码块中写注释）。

// not good
function Person() {
  // not good
  var me = this;

  // good
  var _this = this;

  // good
  var that = this;

  // good
  var self = this;
}

if (condition) {
}
复制代码

这一套规范我用 vuepress 作了一个网站进行存档，欢迎你们查看。www.shiyanping.top/code_rule，主要依附 github page 进行部署，也欢迎你们 star 个人 git 项目 github.com/Shiyanping/…。

阅读完后两部曲

很是感谢各位花时间阅读完，衷心但愿各位小伙伴能够花少许的时间帮忙作两件事：

动动你的手指，帮忙点个赞吧，你的点赞是对我最大的动力。
但愿各位关注一下个人公众号，新的文章第一时间发到公众号，公众号主要发一些我的随笔、读书笔记、还有一些技术热点和实时热点，而且还有很是吸引人的我我的自费抽奖活动哦~