react前端开发规范总结

代码规范

javascript格式规范

使用标准

ECMAScript 6

使用 ECMAScript 6 作为源码标准。

参见 ECMA-262 6th Edition

缩进

• 使用两个空格为一个缩进单位

[ 1, 2, 3, 4, 5 ].map( ( value, index, array ) => {
  return  value + index;
} );

变量

• 见名知意
• 常量使用 UPPER_CASE_WITH_UNDERLINE 规则
• 变量使用 lowerCamelCase 规则

// Good.
const PI = 3.141592653;
const TEAM_NAME =  'Front-end' ;
let followingProjects = [  'EPM UI' ,  'EPM UI Docs' ,  'and more'  ];

// Bad.
const Pi = 3.141592653;
const teamname =  'Front-end' ;
let p = [  'EPM UI' ,  'EPM UI Docs' ,  'and more'  ];

数组

• 单行定义的数组值间需在逗号后面带一个空格
• 单行定义的中括号内侧需各带一个空格

let array1 = [ 1, 2, 3, 4 ];

let array2 = [
  'Hello' ,
  'World!'
];

对象

• 单行定义的对象值间需在逗号后面带一个空格
• 单行定义的大括号内侧需各带一个空格
• 冒号左侧不需要带空格，右侧带一个空格

let obj1 = { key1:  'value1' , key2:  'value2' , key3:  'value3'  };

let obj2 = {
  key1:  'value1' ,
  key2:  'value2' ,
  key3:  'value3'
};

字符串

• 使用单引号定义字符串
• 当字符串中包含单引号的时候，可适当使用双引号定义字符串
• 适当使用模板字符串

let str =  'I am string.' ;

if  ( str ===  "I'm string."  ) {
  console.log( 'Great !' );
}

函数

• 函数名后紧跟括号
• 参数之间需在逗号后面加空格
• 括号内需在内侧加空格

function  sum( a, b, c ) {
  return  a + b + c;
}

if  (  true  ) {
  console.log( sum( 1, 2, 3 ) );
}

• 箭头函数中参数即便只有一个，仍须添加括号

代码块

• 无关代码块间需要换行

for  ( let i = 0; i < 100; i++ ) {
  // Do something cool here, such as save file for 100 times to ensure it has been saved successfully.
}

if  (  true  ) {
  console.log(  "You're fxxking genius!"  );
}

表达式

• 表达式中的运算符与操作数之间需要空格

// Good.
if  ( 0 ==  false  && ( 1 ==  true  ||  ''  ===  false  ) ) {
  let result = ( a / b ) % 10;
}

// Bad.
if  ( 0== false &&( 1== true || '' === false  ) ) {
  let result=( a/b )%10;
}

语句

• 语句组成部分间需空一格

// Good.
if  (  true  ) {
  while  (  false  ) {
    // Just an example here.
  }

  switch  ( someValue ) {
    case  'foo' :
      console.log(  'bar'  );
      break ;
    case  'bar' :
      console.log(  'foo'  );
      break ;
    default :
     console.log(  "What's that."  );
  }

  for  ( let i = 0; i < 100; i ++ ) {
    // Just an example here.
  }
}

// Bad.
if (  true  ){
  while (  false  ){
    // Just an example here.
  }
  switch ( someValue ){
    case  'foo ':
      console.log( ' bar ' );
      break;
    case ' bar ':
      console.log( ' foo ' );
      break;
    default:
      console.log( "What' s that." );
  }
  for ( let i = 0; i < 100; i ++ ){
    // Just an example here.
  }
}

注释

• 行内注释建议换行，并在所指示的语句之前
• 紧跟语句的注释需空两格
• 行内注释双斜杠与注释内容间需空一格
• 注释内容需为完整语句，中英文和数字间需空一格

for  ( let i = 0; i < 100; i++ ) {
  // This is a comment.
  console.log(  'Print something.'  );   // 这又是一个注释。
  // 中文与 English 相结合的注释，带数字 300166 的例子。
}

基本结构示例

import FooClass from  'foo' ;
import { coolUtil } from  'utilities' ;

class CoolClass extends FooClass {

  constructor( ...args ) {
    super ( ...args );
  }

}

export { CoolClass };
export  default  CoolClass;

jsx规范

• 大括号内需空格，其中的表达式遵循 JavaScript 规范
• 无子节点的节点直接结束，结束符号前加一个空格
• 类 XML 结构属性赋值等号两边无需添加空格
• 使用两个空格作为缩进

< Table  dataSource = "ajax/table" >
  < Column  title = "姓名"  dataIndex = "name" >
    { ( value ) => < a >{ value } a > }
  Column >
  < Column  title = "年龄"  dataIndex = "age"  />
  < Column  title = "地址"  dataIndex = "address"  />
Table >