篇幅可能会比较长,但是我感觉有一套规范对于一个团队其实还是很重要的,这样在维护起来也会很方便,代码规范参考自:腾讯alloyteam团队,希望大家可以跟着看一遍,各取所需。
eslint 也补充完了,大家可以去瞧一眼,传送门。如果可以的话,希望可以用到您的团队或者自己的项目中,实践过程中如果有用的不舒服的,希望可以给我反馈,这样才能知道这套规则适不适合大部分人去用。
通过留言区的反馈,将 html 规范进行了一些修改,有个哥们给反馈说可以做一个 eslint-config,这个是个好想法,先用一段时间,看程度差不多之后,会把自己的 eslint 的规范放到 npm 上,弄个自己的 eslint-config,具体想看的关注一下我,我后续上传之后写了教程第一时间发公众号或者掘金。
全部采用小写方式, 以下划线分隔。
例:my_project_name
参照项目命名规则;
有复数结构时,要采用复数命名法。
例:scripts
,styles
,images
,data_models
vue的项目中,components下的组件目录名,使用大驼峰命令
例:LeftBar
参照项目命名规则。
例:account_model.js
参照项目命名规则。
例:retina_sprites.css
参照项目命名规则。
例:error_log.html
<html>
<head>
<title>Page titletitle>
head>
<body>
<img src="images/company_logo.png" alt="Company" />
<h1 class="hello-world">Hello, world!h1>
body>
html>
在开头规定doctype,来启动标准模式,doctype要大写。
<html>
...
html>
通过声明一个明确的字符编码,让浏览器轻松、快速的确定适合网页内容的渲染方式,通常指定为’UTF-8’。
<html>
<head>
<meta charset="UTF-8">
head>
...
html>
用meta标签指定页面应该使用什么版本的IE来渲染。
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
head>
...
html>
在编写HTML代码时,需要尽量避免多余的父节点;
<span class="avatar">
<img src="...">
span>
<img class="avatar" src="...">
html的标签能使用语义化的,尽量使用语义化标签,避免一个页面都是div或者p标签
<div>
<p>p>
div>
<header>header>
<footer>footer>
使用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;
}
.element:after {
content: "";
background-image: url("logo.png");
}
li[data-type="single"] {
...
}
/* class */
.element-content {
...
}
/* id */
#myDialog {
...
}
/* 变量 */
$colorBlack: #000;
/* 混合 */
@mixin centerBlock {
...
}
使用tab缩进(2个空格)
if (x < y) {
x += 10;
} else {
x += 1;
}
var thisIsMyName;
var goodID;
var reportURL;
var AndroidVersion;
var iOSVersion;
var MAX_COUNT = 10;
function Person(name) {
this.name = name;
}
// not good
var body = $('body');
// good
var $body = $('body');
一个函数作用域中所有的变量声明尽量提到函数首部,用一个var声明,不允许出现两个连续的var声明。如果可以使用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;
}
}
不要超过80,但如果编辑器开启word wrap可以不考虑单行长度。
统一要加分号。
以下几种情况不用写空格:
以下几种情况一定要写空格:
例:
// 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];
// not good
var a = ( 1+2 )*3;
// good
var a = (1 + 2) * 3;
// good
var doSomething = function(a, b, c) {
// do something
};
// good
doSomething(item);
// not good
for(i=0;i<6;i++){
x++;
}
// good
for (i = 0; i < 6; i++) {
x++;
}
以下几种情况一定要有空行
var x = 1;
// 注释前要有空行
if (x >= 1) {
var y = x + 1;
}
换行的地方,行末必须有’,'或者运算符;
以下几种情况不需要换行:
以下几种情况需要换行:
// 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
*/
建议在以下几种情况使用:
复杂的函数,所有类,都必须进行函数注释,函数注释使用业界统一的规范,方便后续使用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 = '';
对象属性名不需要加引号;
对象以缩进的形式书写,不要写在一行;
数组、对象最后不要有逗号。
// not good
var a = {
'b': 1
};
var a = {b: 1};
var a = {
b: 1,
c: 2,
};
// 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进行变量判断;
使用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
===
, !==
代替==
, !=
,null 除外;// 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));
}
// not good
function Person() {
// not good
var me = this;
// good
var _this = this;
// good
var that = this;
// good
var self = this;
}
if (condition) {
}