[关闭]
@chris-ren 2016-04-27T07:59:02.000000Z 字数 19618 阅读 1094

前端编码规范

ECMAScript JavaScript react 规范

本文主要介绍JavaScript编码规范以及基于JavaScript规范，针对ES6和React拟定的相关规范约定。
原文链接（需要查看详细信息请参照）：https://github.com/airbnb/javascript

JavaScript规范

目录

1.类型
2.对象
3.数组
4.字符串
5.函数
6.属性
7.变量
8.条件表达式和等号
9.块
10.注释
11.空白
12.逗号
13.分号
14.类型转换
15.命名约定
16.存取器
17.事件

类型

基本类型：访问基本类型时，应该直接操作类型值
- string
- number
- boolean
- null
- undefined

  1. var foo = 1,
  2.     bar = foo;
  4. bar = 9;
  5. console.log(foo, bar); // => 1, 9

复杂类型：访问复杂类型时，应该操作其引用
- object
- array
- function

  1. var foo = [1, 2],
  2.  bar = foo;
  3.     bar[0] = 9;
  4.     console.log(foo[0], bar[0]); // => 9, 9

对象

  1.    // bad
  2.     var superman = {
  3.       class: 'superhero',
  4.       default: { clark: 'kent' },
  5.       private: true
  6.     };
  8.     // good
  9.     var superman = {
  10.       klass: 'superhero',
  11.       defaults: { clark: 'kent' },
  12.       hidden: true
  13.     };

数组

  1. // bad
  2. var items = new Array();
  3. // good
  4. var items = [];
  1. var someStack = [];
  3. // bad
  4. someStack[someStack.length] = 'abracadabra';
  6. // good
  7. someStack.push('abracadabra');
  1. var len = items.length,
  2.     itemsCopy = [],
  3.     i;
  5. // bad
  6. for (i = 0; i < len; i++) {
  7.   itemsCopy[i] = items[i];
  8. }
  10. // good
  11. itemsCopy = items.slice();
  1. function trigger() {
  2.   var args = [].slice.apply(arguments);
  3.   ...
  4. }

字符串

  1. // bad
  2. var name = "Bob Parr";
  4. // good
  5. var name = 'Bob Parr';
  7. // bad
  8. var fullName = "Bob " + this.lastName;
  10. // good
  11. var fullName = 'Bob ' + this.lastName;
  1. // bad
  2. var errorMessage = 'This is a super long error that was thrown because of Batman. When you stop to think about how Batman had anything to do with this, you would get nowhere fast.';
  4. // bad
  5. var errorMessage = 'This is a super long error that \
  6. was thrown because of Batman. \
  7. When you stop to think about \
  8. how Batman had anything to do \
  9. with this, you would get nowhere \
  10. fast.';
  12. // good
  13. var errorMessage = 'This is a super long error that ' +
  14.   'was thrown because of Batman.' +
  15.   'When you stop to think about ' +
  16.   'how Batman had anything to do ' +
  17.   'with this, you would get nowhere ' +
  18.   'fast.';
  1. var items,
  2.     messages,
  3.     length, i;
  5. messages = [{
  6.     state: 'success',
  7.     message: 'This one worked.'
  8. },{
  9.     state: 'success',
  10.     message: 'This one worked as well.'
  11. },{
  12.     state: 'error',
  13.     message: 'This one did not work.'
  14. }];
  16. length = messages.length;
  18. // bad
  19. function inbox(messages) {
  20.   items = '<ul>';
  22.   for (i = 0; i < length; i++) {
  23.     items += '<li>' + messages[i].message + '</li>';
  24.   }
  26.   return items + '</ul>';
  27. }
  29. // good
  30. function inbox(messages) {
  31.   items = [];
  33.   for (i = 0; i < length; i++) {
  34.     items[i] = messages[i].message;
  35.   }
  37.   return '<ul><li>' + items.join('</li><li>') + '</li></ul>';
  38. }

函数

  1. // 匿名函数表达式
  2. var anonymous = function() {
  3.   return true;
  4. };
  6. // 有名函数表达式
  7. var named = function named() {
  8.   return true;
  9. };
  11. // 立即调用函数表达式
  12. (function() {
  13.   console.log('Welcome to the Internet. Please follow me.');
  14. })();
  1. // bad
  2. if (currentUser) {
  3.   function test() {
  4.     console.log('Nope.');
  5.   }
  6. }
  8. // good
  9. if (currentUser) {
  10.   var test = function test() {
  11.     console.log('Yup.');
  12.   };
  13. }
  1. // bad
  2. function nope(name, options, arguments) {
  3.   // ...stuff...
  4. }
  6. // good
  7. function yup(name, options, args) {
  8.   // ...stuff...
  9. }

属性

  1. var luke = {
  2.   jedi: true,
  3.   age: 28
  4. };
  6. function getProp(prop) {
  7.   return luke[prop];
  8. }
  10. var isJedi = getProp('jedi');

变量

  1. // bad
  2. superPower = new SuperPower();
  4. // good
  5. var superPower = new SuperPower();
  1. // bad
  2. var items = getItems();
  3. var goSportsTeam = true;
  4. var dragonball = 'z';
  6. // good
  7. var items = getItems(),
  8.     goSportsTeam = true,
  9.     dragonball = 'z';
  1. // bad
  2. var i, len, dragonball,
  3.     items = getItems(),
  4.     goSportsTeam = true;
  6. // bad
  7. var i, items = getItems(),
  8.     dragonball,
  9.     goSportsTeam = true,
  10.     len;
  12. // good
  13. var items = getItems(),
  14.     goSportsTeam = true,
  15.     dragonball,
  16.     length,
  17.     i;
  1. / bad
  2. function() {
  3.   test();
  4.   console.log('doing stuff..');
  6.   //..other stuff..
  8.   var name = getName();
  10.   if (name === 'test') {
  11.     return false;
  12.   }
  14.   return name;
  15. }
  17. // good
  18. function() {
  19.   var name = getName();
  21.   test();
  22.   console.log('doing stuff..');
  24.   //..other stuff..
  26.   if (name === 'test') {
  27.     return false;
  28.   }
  30.   return name;
  31. }
  33. // bad
  34. function() {
  35.   var name = getName();
  37.   if (!arguments.length) {
  38.     return false;
  39.   }
  41.   return true;
  42. }
  44. // good
  45. function() {
  46.   if (!arguments.length) {
  47.     return false;
  48.   }
  50.   var name = getName();
  52.   return true;
  53. }

条件表达式和等号

  1. if ([0]) {
  2.   // true
  3.   // An array is an object, objects evaluate to true
  4. }
  1. // bad
  2. if (name !== '') {
  3.   // ...stuff...
  4. }
  6. // good
  7. if (name) {
  8.   // ...stuff...
  9. }
  11. // bad
  12. if (collection.length > 0) {
  13.   // ...stuff...
  14. }
  16. // good
  17. if (collection.length) {
  18.   // ...stuff...
  19. }

块

  1. // bad
  2. if (test)
  3.   return false;
  5. // good
  6. if (test) return false;
  8. // good
  9. if (test) {
  10.   return false;
  11. }
  13. // bad
  14. function() { return false; }
  16. // good
  17. function() {
  18.   return false;
  19. }

注释

  1. // bad
  2. // make() returns a new element
  3. // based on the passed in tag name
  4. //
  5. // @param <String> tag
  6. // @return <Element> element
  7. function make(tag) {
  9.   // ...stuff...
  11.   return element;
  12. }
  14. // good
  15. /**
  16.  * make() returns a new element
  17.  * based on the passed in tag name
  18.  *  * @param <String> tag
  19.  * @return <Element> element
  20.  */
  21. function make(tag) {
  23.   // ...stuff...
  25.   return element;
  26. }
  1. // bad
  2. var active = true;  // is current tab
  4. // good
  5. // is current tab
  6. var active = true;
  8. // bad
  9. function getType() {
  10.   console.log('fetching type...');
  11.   // set the default type to 'no type'
  12.   var type = this._type || 'no type';
  14.   return type;
  15. }
  17. // good
  18. function getType() {
  19.   console.log('fetching type...');
  21.   // set the default type to 'no type'
  22.   var type = this._type || 'no type';
  24.   return type;
  25. }
  1. function Calculator() {
  3.   // FIXME: shouldn't use a global here
  4.   total = 0;
  6.   return this;
  7. }
  1. function Calculator() {
  3.   // TODO: total should be configurable by an options param
  4.   this.total = 0;
  6.   return this;
  7. }

空白

  1. // bad
  2. function() {
  3. ∙∙∙∙var name;
  4. }
  6. // bad
  7. function() {
  8. ∙var name;
  9. }
  11. // good
  12. function() {
  13. ∙∙var name;
  14. }
  1. // bad
  2. function test(){
  3.   console.log('test');
  4. }
  6. // good
  7. function test() {
  8.   console.log('test');
  9. }
  11. // bad
  12. dog.set('attr',{
  13.   age: '1 year',
  14.   breed: 'Bernese Mountain Dog'
  15. });
  17. // good
  18. dog.set('attr', {
  19.   age: '1 year',
  20.   breed: 'Bernese Mountain Dog'
  21. });
  1. // bad
  3. var x=y+5;
  5. // good
  7. var x = y + 5;

逗号

  1. // bad
  2. var once
  3.   , upon
  4.   , aTime;
  6. // good
  7. var once,
  8.     upon,
  9.     aTime;
  11. // bad
  12. var hero = {
  13.     firstName: 'Bob'
  14.   , lastName: 'Parr'
  15.   , heroName: 'Mr. Incredible'
  16.   , superPower: 'strength'
  17. };
  19. // good
  20. var hero = {
  21.   firstName: 'Bob',
  22.   lastName: 'Parr',
  23.   heroName: 'Mr. Incredible',
  24.   superPower: 'strength'
  25. };
  1. // bad
  2. var hero = {
  3.   firstName: 'Kevin',
  4.   lastName: 'Flynn',
  5. };
  7. var heroes = [
  8.   'Batman',
  9.   'Superman',
  10. ];
  12. // good
  13. var hero = {
  14.   firstName: 'Kevin',
  15.   lastName: 'Flynn'
  16. };
  18. var heroes = [
  19.   'Batman',
  20.   'Superman'
  21. ];

分号

  1. // bad
  2. (function() {
  3.   var name = 'Skywalker'
  4.   return name
  5. })()
  7. // good
  8. (function() {
  9.   var name = 'Skywalker';
  10.   return name;
  11. })();
  13. // good
  14. ;(function() {
  15.   var name = 'Skywalker';
  16.   return name;
  17. })();

类型转换

  1. var inputValue = '4';
  3. // bad
  4. var val = new Number(inputValue);
  6. // bad
  7. var val = +inputValue;
  9. // bad
  10. var val = inputValue >> 0;
  12. // bad
  13. var val = parseInt(inputValue);
  15. // good
  16. var val = Number(inputValue);
  18. // good
  19. var val = parseInt(inputValue, 10);
  21. // good
  22. /**
  23.  * parseInt was the reason my code was slow.
  24.  * Bitshifting the String to coerce it to a
  25.  * Number made it a lot faster.
  26.  */
  27. var val = inputValue >> 0;
  1. var age = 0;
  3. // bad
  4. var hasAge = new Boolean(age);
  6. // good
  7. var hasAge = Boolean(age);
  9. // good
  10. var hasAge = !!age;

命名约定

  1. // bad
  2. this.__firstName__ = 'Panda';
  3. this.firstName_ = 'Panda';
  5. // good
  6. this._firstName = 'Panda';

存取器

  1. // bad
  2. if (!dragon.age()) {
  3.   return false;
  4. }
  6. // good
  7. if (!dragon.hasAge()) {
  8.   return false;
  9. }
  1. function Jedi(options) {
  2.   options || (options = {});
  3.   var lightsaber = options.lightsaber || 'blue';
  4.   this.set('lightsaber', lightsaber);
  5. }
  7. Jedi.prototype.set = function(key, val) {
  8.   this[key] = val;
  9. };
  11. Jedi.prototype.get = function(key) {
  12.   return this[key];
  13. };

事件

  1. // bad
  2. $(this).trigger('listingUpdated', listing.id);
  4. ...
  6. $(this).on('listingUpdated', function(e, listingId) {
  7.   // do something with listingId
  8. });
  10. // good
  11. $(this).trigger('listingUpdated', { listingId : listing.id });
  13. ...
  15. $(this).on('listingUpdated', function(e, data) {
  16.   // do something with data.listingId
  17. });

针对ES6相关内容的规范

1.声明 Declarations
2.字符串 Strings
3.解构 Destructuring
4.数组 Arrays
5.函数 Functions
6.类 Classes
7.模块 Modules

声明

•1.1 变量

  1. // bad
  2. const variables;
  3. const globalObj = null; // 不是常量
  4. let globalObj = null;
  6. for (var i = 0; i < 5; i++) {
  7.   console.log(i);
  8. }
  9. console.log(i); // 4
  11. // good
  12. let variables;
  13. var globalObj = null;
  15. for (let i = 0; i < 5; i++) {
  16.   console.log(i);
  17. }
  18. console.log(i); // ReferenceError: i is not defined

•1.2 常量

  1. // bad
  2. let someNum = 123;
  3. const AnotherStr = '不变的字符串';
  4. let arr = ['不', '变', '数', '组'];
  5. var ANOTHER_OBJ = {
  6.   '不变对象': true
  7. };
  10. // good
  11. const someNum = 123;
  12. const anotherStr = '不变的字符串';
  13. const arr = ['不', '变', '数', '组'];
  14. const anotherObj = {
  15.   '不变对象': true
  16. };

字符串

•2.1 处理多行字符串，使用模板字符串，以反引号( ` )标示，可读性更强，代码更易编写。注意排版引起空格的问题，使用场景为声明HTML模板字符串

  1. // bad
  2. const tmpl = '<div class="content"> \n' +
  3.               '<h1>这是换行了。</h1> \n' +
  4.             '</div>';
  5. // good
  6. const tmpl = `
  7. <div class="content">
  8.   <h1>这是换行了。</h1>
  9. </div>`;

•2.2 处理字符串拼接变量时,使用模板字符串

  1.   // bad
  2.   function sayHi(name) {
  3.     return 'How are you, ' + name + '?';
  4.   }
  5.   // good
  6.   function sayHi(name) {
  7.     return `How are you, ${name}?`;
  8.   }

解构

•3.1 嵌套结构的对象层数不能超过3层

  1. // bad
  2. let obj = {
  3.   'one': [
  4.     {
  5.       'newTwo': [
  6.         {
  7.           'three': [
  8.             'four': '太多层了，头晕晕'
  9.           ]
  10.         }
  11.       ]
  12.     }
  13.   ]
  14. };
  16. // good
  17. let obj = {
  18.   'one': [
  19.     'two',
  20.     {
  21.       'twoObj': '结构清晰'
  22.     }
  23.   ]
  24. };

•3.2 解构语句中统一不使用圆括号

  1. // bad
  2. [(a)] = [11]; // a未定义
  3. let { a: (b) } = {}; // 解析出错
  6. // good
  7. let [a, b] = [11, 22];

•3.3 对象解构

•3.3.1 若函数形参为对象时，使用对象解构赋值

  1. // bad
  2. function someFun(opt) {
  3.   let opt1 = opt.opt1;
  4.   let opt2 = opt.opt2;
  5.   console.log(op1);
  6. }
  8. // good
  9. function someFun(opt) {
  10.   let { opt1, opt2 } = opt;
  11.   console.log(`$(opt1) 加上 $(opt2)`);
  12. }
  14. function someFun({ opt1, opt2 }) {
  15.   console.log(opt1);
  16. }

•3.3.2 若函数有多个返回值时，使用对象解构，不使用数组解构，避免添加顺序的问题

  1. // bad
  2. function anotherFun() {
  3.   const one = 1, two = 2, three = 3;
  4.   return [one, two, three];
  5. }
  6. const [one, three, two] = anotherFun(); // 顺序乱了
  7. // one = 1, two = 3, three = 2
  9. // good
  10. function anotherFun() {
  11.   const one = 1, two = 2, three = 3;
  12.   return { one, two, three };
  13. }
  14. const { one, three, two } = anotherFun(); // 不用管顺序
  15. // one = 1, two = 2, three = 3

•3.3.3 已声明的变量不能用于解构赋值（语法错误）

  1. // 语法错误
  2. let a;
  3. { a } = { b: 123};

•3.4 数组解构

•3.4.1 交换变量的值

  1. let x = 1;
  2. let y = 2;
  4. // bad
  5. let temp;
  6. temp = x;
  7. x = y;
  8. y = temp;
  10. // good
  11. [x, y] = [y, x]; // 交换变量

•3.4.2 将数组成员赋值给变量时，使用数组解构

  1. const arr = [1, 2, 3, 4, 5];
  2. // bad
  3. const one = arr[0];
  4. const two = arr[1];
  6. // good
  7. const [one, two] = arr;

数组

•4.1 将类数组(array-like)对象与可遍历对象(如 Set , Map )转为真正数组，采用 Array.from 进行转换

  1. // bad
  2. function foo() {
  3.   let args = Array.prototype.slice.call(arguments);
  4. }
  6. // good
  7. function foo() {
  8.   let args = Array.from(arguments);
  9. }

•4.2 数组去重

  1. // good
  2. function deduplication(arr) {
  3.   return Array.from(new Set(arr));
  4. }

•4.3 数组拷贝
- 采用数组扩展 ... 形式

  1. const items = [1, 2, 3];
  3. // bad
  4. const len = items.length;
  5. let copyTemp = [];
  6. for (let i = 0; i < len; i++) {
  7.   copyTemp[i] = items[i];
  8. }
  10. // good
  11. let copyTemp = [...items];

•4.4 将一组数值转为数组

  1. // bad
  2. let arr1 = new Array(2); // [undefined x 2]
  3. let arr2 = new Array(1, 2, 3); // [1, 2, 3]
  5. // good
  6. let arr1 = Array.of(2);  // [2]
  7. let arr2 = Array.of(1, 2, 3); // [1, 2, 3]

函数

•5.1 当要用函数表达式或匿名函数时，使用箭头函数(Arrow Functions)，箭头函数更加简洁，并且绑定了this

  1. // bad
  2. const foo = function(x) {
  3.   console.log(foo.name); // 返回'' ，函数表达式默认省略name属性
  4. };
  6. [1, 2, 3].map(function(x) {
  7.   return x + 1;
  8. });
  10. var testObj = {
  11.   name: 'testObj',
  12.   init() {
  13.     var _this = this; // 保存定义时的this引用
  14.     document.addEventListener('click', function() {
  15.       return _this.doSth();
  16.     }, false);
  17.   },
  18.   doSth() {
  19.     console.log(this.name);
  20.   }
  21. };
  23. // good
  24. const foo = (x) => {
  25.   console.log(foo.name); // 返回'foo'
  26. };
  28. [1, 2, 3].map( (x) => {
  29.   return x + 1;
  30. });
  32. var testObj = {
  33.   name: 'testObj',
  34.   init() {
  35.     // 箭头函数自动绑定定义时所在的对象
  36.     document.addEventListener('click', () => this.doSth(), false);
  37.   },
  38.   doSth() {
  39.     console.log(this.name);
  40.   }
  41. };

•5.1.1 箭头函数书写约定

  1. // good
  2. const foo = x => x + x; // 注意此处会隐性return x + x
  4. const foo = (x) => {
  5.   return x + x; // 若函数体有花括号语句块时须进行显性的return
  6. }; 
  8. [1, 2, 3].map( x => x * x);

•5.1.2 用箭头函数返回一个对象，应用括号包裹

  1. // bad
  2. let test = x => { x: x }; // 花括号会变成语句块，不表示对象
  4. // good
  5. let test = x => ({ x: x }); // 使用括号可正确return {x:x}

•5.2 立即调用函数，应该使用箭头函数

  1. // bad
  2. (function() {
  3.   console.log('哈');
  4. })();
  6. // good
  7. (() => {
  8.   console.log('哈');
  9. })();

•5.3 不使用 arguments , 采用rest语法 ... 代替

  1. // bad
  2. function foo() {
  3.   let args = Array.prototype.slice.call(arguments);
  4.   return args.join('');
  5. }
  7. // good
  8. function foo(...args) {
  9.   return args.join('');
  10. }

•5.4 函数参数指定默认值

  1. // bad
  2. function foo(opts) {
  3.   opts = opts || {};// 此处有将0，''等假值转换掉为默认值的副作用
  4. }
  6. // good
  7. function foo(opts = {}) {
  8.   console.log('更加简洁，安全');
  9. }

•5.5 对象中的函数方法使用缩写形式，更加简洁，函数方法不要使用箭头函数，避免this指向的混乱

  1. // bad
  2. const shopObj = {
  3.   des: '对象模块写法',
  4.   foo: function() {
  5.     console.log(this.des);
  6.   }
  7. };
  9. const shopObj = {
  10.   des: '对象模块写法',
  11.   foo: () => {
  12.     console.log(this.des); // 此处会变成undefined.des，因为指向顶层模块的this
  13.   }
  14. };
  16. // good
  17. const des = '对象模块写法'; // 使用对象属性值简写方式
  18. const shopObj = {
  19.   des,
  20.   foo() {
  21.     console.log(this.des);
  22.   }
  23. };

类

•6.1 类名应使用帕斯卡写法( PascalCased )

  1. // good
  2. class SomeClass {
  4. }

•6.1.1 类名与花括号须保留一个空格间距，类中的方法定义时，方法名与左括号 ( 之间【不保留】空格间距，类中的方法定义时，右括号 ) 须与花括号 { 【保留】一个空格间距

  1. // bad
  2. class Foo{
  3.   constructor(){
  4.     // 右括号 `)` 须与花括号 `{` 仅保留一个空格间距
  5.   }
  6.   sayHi()    {
  8.   }
  9.   _say () {
  10.     // 方法名与左括号 `(` 之间【不保留】空格间距
  11.   }
  13. }
  16. // good
  17. class Foo {
  18.   constructor() {
  19.     // 右括号 `)` 须与花括号 `{` 仅保留一个空格间距
  20.   }
  21.   sayHi() {
  23.   }
  24.   _say() {
  25.     // 方法名与左括号 `(` 之间【不保留】空格间距
  26.   }
  27. }

•6.2 定义类时，方法的顺序如下：

  1. // good
  2. class SomeClass {
  3.   constructor() {
  4.     // constructor
  5.   }
  7.   get aval() {
  8.     // public getter
  9.   }
  11.   set aval(val) {
  12.     // public setter
  13.   }
  15.   doSth() {
  16.     // 公用方法
  17.   }
  19.   get _aval() {
  20.     // private getter
  21.   }
  23.   set _aval() {
  24.     // private setter
  25.   }
  27.   _doSth() {
  28.     // 私有方法
  29.   }
  30. }

•6.3 如果不是class类，不使用 new 

  1. // bad
  2. function Foo() {
  4. }
  5. const foo = new Foo();
  7. // good
  8. class Foo {
  10. }
  11. const foo = new Foo();

•6.4 使用真正意思上的类Class写法，不使用 prototype 进行模拟扩展，Class更加简洁，易维护

  1. // bad
  2. function Dog(names = []) {
  3.   this._names = [...names];
  4. }
  5. Dog.prototype.bark = function() {
  6.   const currName = this._names[0];
  7.   alert(`one one ${currName}`);
  8. }
  10. // good
  11. class Dog {
  12.   constructor(names = []) {
  13.     this._names = [...names];
  14.   }
  15.   bark() {
  16.     const currName = this._names[0];
  17.     alert(`one one ${currName}`);
  18.   }
  19. }

•6.5 class应先定义后使用

  1. // bad
  2. let foo = new Foo();
  3. class SubFoo extends Foo {
  5. }
  6. class Foo {
  8. }
  10. // good
  11. class Foo {
  13. }
  14. let foo = new Foo();
  15. class SubFoo extends Foo {
  17. }

•6.6 this 的注意事项

  1. class Foo {
  2.   constructor(x, y) {
  3.     this.x = x;
  4.     this.y = y;
  5.   }
  6. }
  8. // bad
  9. class SubFoo extends Foo {
  10.   constructor(x, y, z) {
  11.     this.z = z; // 引用错误
  12.     super(x, y);
  13.   }
  14. }
  16. // good
  17. class SubFoo extends Foo {
  18.   constructor(x, y, z) {
  19.     super(x, y);
  20.     this.z = z; // this 放在 super 后调用
  21.   }
  22.   setHeight(height) {
  23.     this.height = height;
  24.     return this;
  25.   }
  26. }

模块

•7.1 使用 import / export 来做模块加载导出，不使用非标准模块写法

  1. // bad
  2. const colors  = require('./colors');
  4. module.exports = color.lightRed;
  7. // good
  8. import { lightRed } from './colors';
  9. export default lightRed;

•7.1.1 import / export 后面采用花括号 { } 引入模块的写法时，须在花括号内左右各保留一个空格

  1. // bad
  2. import {lightRed} from './colors';
  3. import { lightRed} from './colors';
  5. // good
  6. import { lightRed } from './colors';

•7.2 应确保每个module有且只有一个默认导出模块，方便调用方使用

  1. // bad
  2. const lightRed = '#F07';
  3. export lightRed;
  5. // good
  6. const lightRed = '#F07';
  7. export default lightRed;

•7.3 import 不使用统配符 * 进行整体导入，确保模块与模块之间的关系比较清晰

  1. // bad
  2. import * as colors from './colors';
  4. // good
  5. import colors from './colors';

•7.4 不要将 import 与 export 混合在一行，分开导入与导出，让结构更清晰，可读性更强

  1. // bad
  2. export { lightRed as default } from './colors';
  4. // good
  5. import { lightRed } from './colors';
  6. export default lightRed;

•7.5 多变量要导出时应采用对象解构形式，export 置于底部，使欲导出变量更加清晰

  1. // bad
  2. export const lightRed = '#F07';
  3. export const black  = '#000';
  4. export const white  = '#FFF';
  6. // good
  7. const lightRed = '#F07';
  8. const black  = '#000';
  9. const white  = '#FFF';
  11. export default { lightRed, black, white };

React/JSX规范

1.基本规则
2.命名
3.声明
4.对齐
5.引号
6.空格
7.属性
8.括号
9.标签
10.方法
11.顺序

基本规则

  1. // bad
  2. const Listing = React.createClass({
  3.   // ...
  4.   render() {
  5.     return <div>{this.state.hello}</div>;
  6.   }
  7. });
  9. // good
  10. class Listing extends React.Component {
  11.   // ...
  12.   render() {
  13.     return <div>{this.state.hello}</div>;
  14.   }
  15. }

如果你没有使用state或refs，最好不用类，而是使用普通函数（不是箭头函数）

  1. // bad
  2. class Listing extends React.Component {
  3.   render() {
  4.     return <div>{this.props.hello}</div>;
  5.   }
  6. }
  8. // bad (since arrow functions do not have a "name" property)
  9. const Listing = ({ hello }) => (
  10.   <div>{hello}</div>
  11. );
  13. // good
  14. function Listing({ hello }) {
  15.   return <div>{hello}</div>;
  16. }

命名

  1. // bad
  2. import reservationCard from './ReservationCard';
  4. // good
  5. import ReservationCard from './ReservationCard';
  7. // bad
  8. const ReservationItem = <ReservationCard />;
  10. // good
  11. const reservationItem = <ReservationCard />;
  1. // bad
  2. const Footer = require('./Footer/Footer.jsx')
  4. // bad
  5. const Footer = require('./Footer/index.jsx')
  7. // good
  8. const Footer = require('./Footer')

声明

  1. // bad
  2. export default React.createClass({
  3.   displayName: 'ReservationCard',
  4.   // stuff goes here
  5. });
  7. // good
  8. export default class ReservationCard extends React.Component {
  9. }

对齐

  1. // bad
  2.   <Foo superLongParam="bar"
  3.        anotherSuperLongParam="baz" />
  5.   // good
  6.   <Foo
  7.     superLongParam="bar"
  8.     anotherSuperLongParam="baz"
  9.   />
  11.   // if props fit in one line then keep it on the same line
  12.   <Foo bar="bar" />
  14.   // children get indented normally
  15.   <Foo
  16.     superLongParam="bar"
  17.     anotherSuperLongParam="baz"
  18.   >
  19.     <Spazz />
  20.   </Foo>

引号

  1.  // bad
  2.   <Foo bar='bar' />
  4.   // good
  5.   <Foo bar="bar" />
  7.   // bad
  8.   <Foo style={{ left: "20px" }} />
  10.   // good
  11.   <Foo style={{ left: '20px' }} />

空格

  1. // bad
  2. <Foo/>
  4. // very bad
  5. <Foo                 />
  7. // bad
  8. <Foo
  9.  />
  11. // good
  12. <Foo />
  1. // bad
  2. <Foo bar={ baz } />
  4. // good
  5. <Foo bar={baz} />

属性

  1. // bad
  2. <Foo
  3.   UserName="hello"
  4.   phone_number={12345678}
  5. />
  7. // good
  8. <Foo
  9.   userName="hello"
  10.   phoneNumber={12345678}
  11. />

括号

  1. // bad
  2.   render() {
  3.     return <MyComponent className="long body" foo="bar">
  4.              <MyChild />
  5.            </MyComponent>;
  6.   }
  8.   // good
  9.   render() {
  10.     return (
  11.       <MyComponent className="long body" foo="bar">
  12.         <MyChild />
  13.       </MyComponent>
  14.     );
  15.   }
  17.   // good, when single line
  18.   render() {
  19.     const body = <div>hello</div>;
  20.     return <MyComponent>{body}</MyComponent>;
  21.   }

标签

  1.   // bad
  2.   <Foo className="stuff"></Foo>
  4.   // good
  5.   <Foo className="stuff" />
  1. // bad
  2.   <Foo
  3.     bar="bar"
  4.     baz="baz" />
  6.   // good
  7.   <Foo
  8.     bar="bar"
  9.     baz="baz"
  10.   />

方法

  1. function ItemList(props) {
  2.   return (
  3.     <ul>
  4.       {props.items.map((item, index) => (
  5.         <Item
  6.           key={item.key}
  7.           onClick={() => doSomethingWith(item.name, index)}
  8.         />
  9.       ))}
  10.     </ul>
  11.   );
  12. }
  1. // bad
  2.   class extends React.Component {
  3.     onClickDiv() {
  4.       // do stuff
  5.     }
  7.     render() {
  8.       return <div onClick={this.onClickDiv.bind(this)} />
  9.     }
  10.   }
  12.   // good
  13.   class extends React.Component {
  14.     constructor(props) {
  15.       super(props);
  17.       this.onClickDiv = this.onClickDiv.bind(this);
  18.     }
  20.     onClickDiv() {
  21.       // do stuff
  22.     }
  24.     render() {
  25.       return <div onClick={this.onClickDiv} />
  26.     }
  27.   }
  1. // bad
  2. React.createClass({
  3.   _onClickSubmit() {
  4.     // do stuff
  5.   }
  7.   // other stuff
  8. });
  10. // good
  11. class extends React.Component {
  12.   onClickSubmit() {
  13.     // do stuff
  14.   }
  16.   // other stuff
  17. });

顺序

1.optional static methods
2.constructor
3.getChildContext
4.componentWillMount
5.componentDidMount
6.componentWillReceiveProps
7.shouldComponentUpdate
8.componentWillUpdate
9.componentDidUpdate
10.componentWillUnmount
11.clickHandlers or eventHandlers like onClickSubmit() or onChangeDescription()
12.getter methods for render like getSelectReason() or getFooterContent()
13.Optional render methods like renderNavigation() or renderProfilePicture()
14.render

  1. import React, { PropTypes } from 'react';
  3. const propTypes = {
  4.   id: PropTypes.number.isRequired,
  5.   url: PropTypes.string.isRequired,
  6.   text: PropTypes.string,
  7. };
  9. const defaultProps = {
  10.   text: 'Hello World',
  11. };
  13. class Link extends React.Component {
  14.   static methodsAreOk() {
  15.     return true;
  16.   }
  18.   render() {
  19.     return <a href={this.props.url} data-id={this.props.id}>{this.props.text}</a>
  20.   }
  21. }
  23. Link.propTypes = propTypes;
  24. Link.defaultProps = defaultProps;
  26. export default Link;

1.displayName
2.propTypes
3.contextTypes
4.childContextTypes
5.mixins
6.statics
7.defaultProps
8.getDefaultProps
9.getInitialState
10.getChildContext
11.componentWillMount
12.componentDidMount
13.componentWillReceiveProps
14.shouldComponentUpdate
15.componentWillUpdate
16.componentDidUpdate
17.componentWillUnmount
18.clickHandlers or eventHandlers like onClickSubmit() or onChangeDescription()
19.getter methods for render like getSelectReason() or getFooterContent()
20.Optional render methods like renderNavigation() or renderProfilePicture()
21.render

添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注