前端

代码规范

代码规范主要作用是规范开发、提高开发效率、提高代码可读性以及便于后期维护。

链接 链接

引用

使用const、let 代替var

let const 是块级作用域，而不像 var 是函数作用域.

// const 和 let 只存在于他们定义的块中。
{
  let a = 1;
  const b = 1;
}
console.log(a); // Error
console.log(b); // Error

//内层变量覆盖外层变量
var tmp = new Date();
function f(){
  console.log(tmp);
  if(false){
    var tmp = "hello";
  }
}
f(); //undefined

注释与空白

1、使用 /** ... */ 来进行多行注释。

// bad
// make() returns a new element
// based on the passed in tag name
//
// @param {String} tag
// @return {Element} element
function make(tag) {
  // ...
  return element;
}
// good
/**
 * make() returns a new element
 * based on the passed-in tag name
 */
function make(tag) {
  // ...
  return element;
}

2、使用 // 进行单行注释。 将单行注释放在需要注释的行的上方新行。 在注释之前放一个空行，除非它在块的第一行。

// bad
const active = true;  // is current tab
function getType() {
  console.log('fetching type...');
  // set the default type to 'no type'
  const type = this.type || 'no type';
  return type;
}
// good
// is current tab
const active = true;
function getType() {
  console.log('fetching type...');
  // set the default type to 'no type'
  const type = this.type || 'no type';
  return type;
}
function getType() {
  // set the default type to 'no type'
  const type = this.type || 'no type';
  return type;
}

3、 用一个空格开始所有的注释。

// bad
/**
 *make() returns a new element
 *based on the passed-in tag name
 */
function make(tag) {
  // ...
  return element;
}
// good
/**
 * make() returns a new element
 * based on the passed-in tag name
 */
function make(tag) {
  // ...
  return element;
}

4、在主体前放置一个空格。

// bad
function test(){
  console.log('test');
}
// good
function test() {
  console.log('test');
}
// bad
dog.set('attr',{
  age: '1 year',
  breed: 'Bernese Mountain Dog',
});
// good
dog.set('attr', {
  age: '1 year',
  breed: 'Bernese Mountain Dog',
});

表达式、运算符

1、三目表达式不应该嵌套。

通常为单行表达式

// bad
const foo = maybe1 > maybe2
  ? "bar"
  : value1 > value2 ? "baz" : null;
// 分离为两个三目表达式
const maybeNull = value1 > value2 ? 'baz' : null;
// better
const foo = maybe1 > maybe2
  ? 'bar'
  : maybeNull;
// best
const foo = maybe1 > maybe2 ? 'bar' : maybeNull;

2、在使用一些混合运算符时，使用括号括起来。

// bad
const foo = a && b < 0 || c > 0 || d + 1 === 0;
// bad
// 可能陷入一种 (a || b) && c 的思考
if (a || b && c) {
  return d;
}
// good
const foo = (a && b < 0) || c > 0 || (d + 1 === 0);
// good
if (a || (b && c)) {
  return d;
}

3、使用 === 和 !== 而不是 == 和 !=

命名规范

1、避免单字母的名字。用你的命名来描述功能。

// bad
function q() {
  // ...
}
// good
function query() {
  // ...
}

2、在命名对象、函数和实例时使用驼峰命名法。

// bad
const OBJEcttsssss = {};
const this_is_my_object = {};
function c() {}
// good
const thisIsMyObject = {};
function thisIsMyFunction() {}

3、属性命名时不要使用前置或者后置下划线。

// bad
this.__firstName__ = 'Panda';
this.firstName_ = 'Panda';
this._firstName = 'Panda';
// good
this.firstName = 'Panda';

4、缩略词和缩写都必须是全部大写或者全部小写。

// bad
import SmsContainer from './containers/SmsContainer';
// bad
const HttpRequests = [
  // ...
];
// good
import SMSContainer from './containers/SMSContainer';
// good
const HTTPRequests = [
  // ...
];
// also good
const httpRequests = [
  // ...
];

模块

1、只从一个路径导入所有需要的东西。

// bad
import foo from 'foo';
// … 其他导入 … //
import { named1, named2 } from 'foo';
// good
import foo, { named1, named2 } from 'foo';
// good
import foo, {
  named1,
  named2,
} from 'foo';

2、将所有的 imports 语句放在所有非导入语句的之上。

// bad
import foo from 'foo';
foo.init();
import bar from 'bar';
// good
import foo from 'foo';
import bar from 'bar';
foo.init();

3、多行导入应该像多行数组和对象一样缩进。

// bad
import {longNameA, longNameB, longNameC, longNameD, longNameE} from 'path';
// good
import {
  longNameA,
  longNameB,
  longNameC,
  longNameD,
  longNameE,
} from 'path';

4、使用easycom 组件引入模式。

不管components目录下安装了多少组件，easycom打包后会自动剔除没有使用的组件，对组件库的使用尤为友好。

代码块

1、当有多行代码块的时候，使用大括号包裹。

// bad
if (test)
  return false;
// good
if (test) return false;
// good
if (test) {
  return false;
}
// bad
function foo() { return false; }
// good
function bar() {
  return false;
}

2、如果使用if、else的多行代码，else语句放在if闭括号同一行。

// bad
if (test) {
  thing1();
  thing2();
}
else {
  thing3();
}
// good
if (test) {
  thing1();
  thing2();
} else {
  thing3();
}

3、if条件与return。

如果一个if块总是执行一个return 语句，接下来的else块便可以省略。

// bad
function foo() {
  if (x) {
    return x;
  } else {
    return y;
  }
}
// good
function foo() {
  if (x) {
    return x;
  }
  return y;
}

release模式下删除调试信息

链接https://cn.vuejs.org/v2/style-guide/#%E7%A7%81%E6%9C%89-property-%E5%90%8D%E5%BF%85%E8%A6%81