diff --git a/es5/README.md b/es5/README.md
index 08db3ee6ce..7b37079b20 100644
--- a/es5/README.md
+++ b/es5/README.md
@@ -1,1743 +1,3 @@
-[](https://gitter.im/airbnb/javascript?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge)
+# Airbnb JavaScript 风格指南() {
-# Airbnb JavaScript Style Guide() {
-
-*A mostly reasonable approach to JavaScript*
-
-
-## Table of Contents
-
- 1. [Types](#types)
- 1. [Objects](#objects)
- 1. [Arrays](#arrays)
- 1. [Strings](#strings)
- 1. [Functions](#functions)
- 1. [Properties](#properties)
- 1. [Variables](#variables)
- 1. [Hoisting](#hoisting)
- 1. [Comparison Operators & Equality](#comparison-operators--equality)
- 1. [Blocks](#blocks)
- 1. [Comments](#comments)
- 1. [Whitespace](#whitespace)
- 1. [Commas](#commas)
- 1. [Semicolons](#semicolons)
- 1. [Type Casting & Coercion](#type-casting--coercion)
- 1. [Naming Conventions](#naming-conventions)
- 1. [Accessors](#accessors)
- 1. [Constructors](#constructors)
- 1. [Events](#events)
- 1. [Modules](#modules)
- 1. [jQuery](#jquery)
- 1. [ECMAScript 5 Compatibility](#ecmascript-5-compatibility)
- 1. [Testing](#testing)
- 1. [Performance](#performance)
- 1. [Resources](#resources)
- 1. [In the Wild](#in-the-wild)
- 1. [Translation](#translation)
- 1. [The JavaScript Style Guide Guide](#the-javascript-style-guide-guide)
- 1. [Chat With Us About Javascript](#chat-with-us-about-javascript)
- 1. [Contributors](#contributors)
- 1. [License](#license)
-
-## Types
-
- - **Primitives**: When you access a primitive type you work directly on its value.
-
- + `string`
- + `number`
- + `boolean`
- + `null`
- + `undefined`
-
- ```javascript
- var foo = 1;
- var bar = foo;
-
- bar = 9;
-
- console.log(foo, bar); // => 1, 9
- ```
- - **Complex**: When you access a complex type you work on a reference to its value.
-
- + `object`
- + `array`
- + `function`
-
- ```javascript
- var foo = [1, 2];
- var bar = foo;
-
- bar[0] = 9;
-
- console.log(foo[0], bar[0]); // => 9, 9
- ```
-
-**[⬆ back to top](#table-of-contents)**
-
-## Objects
-
- - Use the literal syntax for object creation.
-
- ```javascript
- // bad
- var item = new Object();
-
- // good
- var item = {};
- ```
-
- - Don't use [reserved words](http://es5.github.io/#x7.6.1) as keys. It won't work in IE8. [More info](https://github.com/airbnb/javascript/issues/61).
-
- ```javascript
- // bad
- var superman = {
- default: { clark: 'kent' },
- private: true
- };
-
- // good
- var superman = {
- defaults: { clark: 'kent' },
- hidden: true
- };
- ```
-
- - Use readable synonyms in place of reserved words.
-
- ```javascript
- // bad
- var superman = {
- class: 'alien'
- };
-
- // bad
- var superman = {
- klass: 'alien'
- };
-
- // good
- var superman = {
- type: 'alien'
- };
- ```
-
-**[⬆ back to top](#table-of-contents)**
-
-## Arrays
-
- - Use the literal syntax for array creation.
-
- ```javascript
- // bad
- var items = new Array();
-
- // good
- var items = [];
- ```
-
- - Use Array#push instead of direct assignment to add items to an array.
-
- ```javascript
- var someStack = [];
-
-
- // bad
- someStack[someStack.length] = 'abracadabra';
-
- // good
- someStack.push('abracadabra');
- ```
-
- - When you need to copy an array use Array#slice. [jsPerf](http://jsperf.com/converting-arguments-to-an-array/7)
-
- ```javascript
- var len = items.length;
- var itemsCopy = [];
- var i;
-
- // bad
- for (i = 0; i < len; i++) {
- itemsCopy[i] = items[i];
- }
-
- // good
- itemsCopy = items.slice();
- ```
-
- - To convert an array-like object to an array, use Array#slice.
-
- ```javascript
- function trigger() {
- var args = Array.prototype.slice.call(arguments);
- ...
- }
- ```
-
-**[⬆ back to top](#table-of-contents)**
-
-
-## Strings
-
- - Use single quotes `''` for strings.
-
- ```javascript
- // bad
- var name = "Bob Parr";
-
- // good
- var name = 'Bob Parr';
-
- // bad
- var fullName = "Bob " + this.lastName;
-
- // good
- var fullName = 'Bob ' + this.lastName;
- ```
-
- - Strings longer than 80 characters should be written across multiple lines using string concatenation.
- - Note: If overused, long strings with concatenation could impact performance. [jsPerf](http://jsperf.com/ya-string-concat) & [Discussion](https://github.com/airbnb/javascript/issues/40).
-
- ```javascript
- // bad
- 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.';
-
- // bad
- 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.';
-
- // good
- 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.';
- ```
-
- - When programmatically building up a string, use Array#join instead of string concatenation. Mostly for IE: [jsPerf](http://jsperf.com/string-vs-array-concat/2).
-
- ```javascript
- var items;
- var messages;
- var length;
- var i;
-
- messages = [{
- state: 'success',
- message: 'This one worked.'
- }, {
- state: 'success',
- message: 'This one worked as well.'
- }, {
- state: 'error',
- message: 'This one did not work.'
- }];
-
- length = messages.length;
-
- // bad
- function inbox(messages) {
- items = '';
-
- for (i = 0; i < length; i++) {
- items += '- ' + messages[i].message + '
';
- }
-
- return items + '
';
- }
-
- // good
- function inbox(messages) {
- items = [];
-
- for (i = 0; i < length; i++) {
- // use direct assignment in this case because we're micro-optimizing.
- items[i] = '' + messages[i].message + '';
- }
-
- return '';
- }
- ```
-
-**[⬆ back to top](#table-of-contents)**
-
-
-## Functions
-
- - Function expressions:
-
- ```javascript
- // anonymous function expression
- var anonymous = function() {
- return true;
- };
-
- // named function expression
- var named = function named() {
- return true;
- };
-
- // immediately-invoked function expression (IIFE)
- (function() {
- console.log('Welcome to the Internet. Please follow me.');
- })();
- ```
-
- - Never declare a function in a non-function block (if, while, etc). Assign the function to a variable instead. Browsers will allow you to do it, but they all interpret it differently, which is bad news bears.
- - **Note:** ECMA-262 defines a `block` as a list of statements. A function declaration is not a statement. [Read ECMA-262's note on this issue](http://www.ecma-international.org/publications/files/ECMA-ST/Ecma-262.pdf#page=97).
-
- ```javascript
- // bad
- if (currentUser) {
- function test() {
- console.log('Nope.');
- }
- }
-
- // good
- var test;
- if (currentUser) {
- test = function test() {
- console.log('Yup.');
- };
- }
- ```
-
- - Never name a parameter `arguments`. This will take precedence over the `arguments` object that is given to every function scope.
-
- ```javascript
- // bad
- function nope(name, options, arguments) {
- // ...stuff...
- }
-
- // good
- function yup(name, options, args) {
- // ...stuff...
- }
- ```
-
-**[⬆ back to top](#table-of-contents)**
-
-
-
-## Properties
-
- - Use dot notation when accessing properties.
-
- ```javascript
- var luke = {
- jedi: true,
- age: 28
- };
-
- // bad
- var isJedi = luke['jedi'];
-
- // good
- var isJedi = luke.jedi;
- ```
-
- - Use subscript notation `[]` when accessing properties with a variable.
-
- ```javascript
- var luke = {
- jedi: true,
- age: 28
- };
-
- function getProp(prop) {
- return luke[prop];
- }
-
- var isJedi = getProp('jedi');
- ```
-
-**[⬆ back to top](#table-of-contents)**
-
-
-## Variables
-
- - Always use `var` to declare variables. Not doing so will result in global variables. We want to avoid polluting the global namespace. Captain Planet warned us of that.
-
- ```javascript
- // bad
- superPower = new SuperPower();
-
- // good
- var superPower = new SuperPower();
- ```
-
- - Use one `var` declaration per variable.
- It's easier to add new variable declarations this way, and you never have
- to worry about swapping out a `;` for a `,` or introducing punctuation-only
- diffs.
-
- ```javascript
- // bad
- var items = getItems(),
- goSportsTeam = true,
- dragonball = 'z';
-
- // bad
- // (compare to above, and try to spot the mistake)
- var items = getItems(),
- goSportsTeam = true;
- dragonball = 'z';
-
- // good
- var items = getItems();
- var goSportsTeam = true;
- var dragonball = 'z';
- ```
-
- - Declare unassigned variables last. This is helpful when later on you might need to assign a variable depending on one of the previous assigned variables.
-
- ```javascript
- // bad
- var i, len, dragonball,
- items = getItems(),
- goSportsTeam = true;
-
- // bad
- var i;
- var items = getItems();
- var dragonball;
- var goSportsTeam = true;
- var len;
-
- // good
- var items = getItems();
- var goSportsTeam = true;
- var dragonball;
- var length;
- var i;
- ```
-
- - Assign variables at the top of their scope. This helps avoid issues with variable declaration and assignment hoisting related issues.
-
- ```javascript
- // bad
- function() {
- test();
- console.log('doing stuff..');
-
- //..other stuff..
-
- var name = getName();
-
- if (name === 'test') {
- return false;
- }
-
- return name;
- }
-
- // good
- function() {
- var name = getName();
-
- test();
- console.log('doing stuff..');
-
- //..other stuff..
-
- if (name === 'test') {
- return false;
- }
-
- return name;
- }
-
- // bad - unnessary function call
- function() {
- var name = getName();
-
- if (!arguments.length) {
- return false;
- }
-
- this.setFirstName(name);
-
- return true;
- }
-
- // good
- function() {
- var name;
-
- if (!arguments.length) {
- return false;
- }
-
- name = getName();
- this.setFirstName(name);
-
- return true;
- }
- ```
-
-**[⬆ back to top](#table-of-contents)**
-
-
-## Hoisting
-
- - Variable declarations get hoisted to the top of their scope, but their assignment does not.
-
- ```javascript
- // we know this wouldn't work (assuming there
- // is no notDefined global variable)
- function example() {
- console.log(notDefined); // => throws a ReferenceError
- }
-
- // creating a variable declaration after you
- // reference the variable will work due to
- // variable hoisting. Note: the assignment
- // value of `true` is not hoisted.
- function example() {
- console.log(declaredButNotAssigned); // => undefined
- var declaredButNotAssigned = true;
- }
-
- // The interpreter is hoisting the variable
- // declaration to the top of the scope,
- // which means our example could be rewritten as:
- function example() {
- var declaredButNotAssigned;
- console.log(declaredButNotAssigned); // => undefined
- declaredButNotAssigned = true;
- }
- ```
-
- - Anonymous function expressions hoist their variable name, but not the function assignment.
-
- ```javascript
- function example() {
- console.log(anonymous); // => undefined
-
- anonymous(); // => TypeError anonymous is not a function
-
- var anonymous = function() {
- console.log('anonymous function expression');
- };
- }
- ```
-
- - Named function expressions hoist the variable name, not the function name or the function body.
-
- ```javascript
- function example() {
- console.log(named); // => undefined
-
- named(); // => TypeError named is not a function
-
- superPower(); // => ReferenceError superPower is not defined
-
- var named = function superPower() {
- console.log('Flying');
- };
- }
-
- // the same is true when the function name
- // is the same as the variable name.
- function example() {
- console.log(named); // => undefined
-
- named(); // => TypeError named is not a function
-
- var named = function named() {
- console.log('named');
- }
- }
- ```
-
- - Function declarations hoist their name and the function body.
-
- ```javascript
- function example() {
- superPower(); // => Flying
-
- function superPower() {
- console.log('Flying');
- }
- }
- ```
-
- - For more information refer to [JavaScript Scoping & Hoisting](http://www.adequatelygood.com/2010/2/JavaScript-Scoping-and-Hoisting) by [Ben Cherry](http://www.adequatelygood.com/).
-
-**[⬆ back to top](#table-of-contents)**
-
-
-
-## Comparison Operators & Equality
-
- - Use `===` and `!==` over `==` and `!=`.
- - Conditional statements such as the `if` statement evaluate their expression using coercion with the `ToBoolean` abstract method and always follow these simple rules:
-
- + **Objects** evaluate to **true**
- + **Undefined** evaluates to **false**
- + **Null** evaluates to **false**
- + **Booleans** evaluate to **the value of the boolean**
- + **Numbers** evaluate to **false** if **+0, -0, or NaN**, otherwise **true**
- + **Strings** evaluate to **false** if an empty string `''`, otherwise **true**
-
- ```javascript
- if ([0]) {
- // true
- // An array is an object, objects evaluate to true
- }
- ```
-
- - Use shortcuts.
-
- ```javascript
- // bad
- if (name !== '') {
- // ...stuff...
- }
-
- // good
- if (name) {
- // ...stuff...
- }
-
- // bad
- if (collection.length > 0) {
- // ...stuff...
- }
-
- // good
- if (collection.length) {
- // ...stuff...
- }
- ```
-
- - For more information see [Truth Equality and JavaScript](http://javascriptweblog.wordpress.com/2011/02/07/truth-equality-and-javascript/#more-2108) by Angus Croll.
-
-**[⬆ back to top](#table-of-contents)**
-
-
-## Blocks
-
- - Use braces with all multi-line blocks.
-
- ```javascript
- // bad
- if (test)
- return false;
-
- // good
- if (test) return false;
-
- // good
- if (test) {
- return false;
- }
-
- // bad
- function() { return false; }
-
- // good
- function() {
- return false;
- }
- ```
-
- - If you're using multi-line blocks with `if` and `else`, put `else` on the same line as your
- `if` block's closing brace.
-
- ```javascript
- // bad
- if (test) {
- thing1();
- thing2();
- }
- else {
- thing3();
- }
-
- // good
- if (test) {
- thing1();
- thing2();
- } else {
- thing3();
- }
- ```
-
-
-**[⬆ back to top](#table-of-contents)**
-
-
-## Comments
-
- - Use `/** ... */` for multi-line comments. Include a description, specify types and values for all parameters and return values.
-
- ```javascript
- // bad
- // make() returns a new element
- // based on the passed in tag name
- //
- // @param {String} tag
- // @return {Element} element
- function make(tag) {
-
- // ...stuff...
-
- return element;
- }
-
- // good
- /**
- * make() returns a new element
- * based on the passed in tag name
- *
- * @param {String} tag
- * @return {Element} element
- */
- function make(tag) {
-
- // ...stuff...
-
- return element;
- }
- ```
-
- - Use `//` for single line comments. Place single line comments on a newline above the subject of the comment. Put an empty line before the comment.
-
- ```javascript
- // bad
- var active = true; // is current tab
-
- // good
- // is current tab
- var active = true;
-
- // bad
- function getType() {
- console.log('fetching type...');
- // set the default type to 'no type'
- var type = this._type || 'no type';
-
- return type;
- }
-
- // good
- function getType() {
- console.log('fetching type...');
-
- // set the default type to 'no type'
- var type = this._type || 'no type';
-
- return type;
- }
- ```
-
- - Prefixing your comments with `FIXME` or `TODO` helps other developers quickly understand if you're pointing out a problem that needs to be revisited, or if you're suggesting a solution to the problem that needs to be implemented. These are different than regular comments because they are actionable. The actions are `FIXME -- need to figure this out` or `TODO -- need to implement`.
-
- - Use `// FIXME:` to annotate problems.
-
- ```javascript
- function Calculator() {
-
- // FIXME: shouldn't use a global here
- total = 0;
-
- return this;
- }
- ```
-
- - Use `// TODO:` to annotate solutions to problems.
-
- ```javascript
- function Calculator() {
-
- // TODO: total should be configurable by an options param
- this.total = 0;
-
- return this;
- }
- ```
-
-**[⬆ back to top](#table-of-contents)**
-
-
-## Whitespace
-
- - Use soft tabs set to 2 spaces.
-
- ```javascript
- // bad
- function() {
- ∙∙∙∙var name;
- }
-
- // bad
- function() {
- ∙var name;
- }
-
- // good
- function() {
- ∙∙var name;
- }
- ```
-
- - Place 1 space before the leading brace.
-
- ```javascript
- // 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'
- });
- ```
-
- - Place 1 space before the opening parenthesis in control statements (`if`, `while` etc.). Place no space before the argument list in function calls and declarations.
-
- ```javascript
- // bad
- if(isJedi) {
- fight ();
- }
-
- // good
- if (isJedi) {
- fight();
- }
-
- // bad
- function fight () {
- console.log ('Swooosh!');
- }
-
- // good
- function fight() {
- console.log('Swooosh!');
- }
- ```
-
- - Set off operators with spaces.
-
- ```javascript
- // bad
- var x=y+5;
-
- // good
- var x = y + 5;
- ```
-
- - End files with a single newline character.
-
- ```javascript
- // bad
- (function(global) {
- // ...stuff...
- })(this);
- ```
-
- ```javascript
- // bad
- (function(global) {
- // ...stuff...
- })(this);↵
- ↵
- ```
-
- ```javascript
- // good
- (function(global) {
- // ...stuff...
- })(this);↵
- ```
-
- - Use indentation when making long method chains. Use a leading dot, which
- emphasizes that the line is a method call, not a new statement.
-
- ```javascript
- // bad
- $('#items').find('.selected').highlight().end().find('.open').updateCount();
-
- // bad
- $('#items').
- find('.selected').
- highlight().
- end().
- find('.open').
- updateCount();
-
- // good
- $('#items')
- .find('.selected')
- .highlight()
- .end()
- .find('.open')
- .updateCount();
-
- // bad
- var leds = stage.selectAll('.led').data(data).enter().append('svg:svg').classed('led', true)
- .attr('width', (radius + margin) * 2).append('svg:g')
- .attr('transform', 'translate(' + (radius + margin) + ',' + (radius + margin) + ')')
- .call(tron.led);
-
- // good
- var leds = stage.selectAll('.led')
- .data(data)
- .enter().append('svg:svg')
- .classed('led', true)
- .attr('width', (radius + margin) * 2)
- .append('svg:g')
- .attr('transform', 'translate(' + (radius + margin) + ',' + (radius + margin) + ')')
- .call(tron.led);
- ```
-
- - Leave a blank line after blocks and before the next statement
-
- ```javascript
- // bad
- if (foo) {
- return bar;
- }
- return baz;
-
- // good
- if (foo) {
- return bar;
- }
-
- return baz;
-
- // bad
- var obj = {
- foo: function() {
- },
- bar: function() {
- }
- };
- return obj;
-
- // good
- var obj = {
- foo: function() {
- },
-
- bar: function() {
- }
- };
-
- return obj;
- ```
-
-
-**[⬆ back to top](#table-of-contents)**
-
-## Commas
-
- - Leading commas: **Nope.**
-
- ```javascript
- // bad
- var story = [
- once
- , upon
- , aTime
- ];
-
- // good
- var story = [
- once,
- upon,
- aTime
- ];
-
- // bad
- var hero = {
- firstName: 'Bob'
- , lastName: 'Parr'
- , heroName: 'Mr. Incredible'
- , superPower: 'strength'
- };
-
- // good
- var hero = {
- firstName: 'Bob',
- lastName: 'Parr',
- heroName: 'Mr. Incredible',
- superPower: 'strength'
- };
- ```
-
- - Additional trailing comma: **Nope.** This can cause problems with IE6/7 and IE9 if it's in quirksmode. Also, in some implementations of ES3 would add length to an array if it had an additional trailing comma. This was clarified in ES5 ([source](http://es5.github.io/#D)):
-
- > Edition 5 clarifies the fact that a trailing comma at the end of an ArrayInitialiser does not add to the length of the array. This is not a semantic change from Edition 3 but some implementations may have previously misinterpreted this.
-
- ```javascript
- // bad
- var hero = {
- firstName: 'Kevin',
- lastName: 'Flynn',
- };
-
- var heroes = [
- 'Batman',
- 'Superman',
- ];
-
- // good
- var hero = {
- firstName: 'Kevin',
- lastName: 'Flynn'
- };
-
- var heroes = [
- 'Batman',
- 'Superman'
- ];
- ```
-
-**[⬆ back to top](#table-of-contents)**
-
-
-## Semicolons
-
- - **Yup.**
-
- ```javascript
- // bad
- (function() {
- var name = 'Skywalker'
- return name
- })()
-
- // good
- (function() {
- var name = 'Skywalker';
- return name;
- })();
-
- // good (guards against the function becoming an argument when two files with IIFEs are concatenated)
- ;(function() {
- var name = 'Skywalker';
- return name;
- })();
- ```
-
- [Read more](http://stackoverflow.com/a/7365214/1712802).
-
-**[⬆ back to top](#table-of-contents)**
-
-
-## Type Casting & Coercion
-
- - Perform type coercion at the beginning of the statement.
- - Strings:
-
- ```javascript
- // => this.reviewScore = 9;
-
- // bad
- var totalScore = this.reviewScore + '';
-
- // good
- var totalScore = '' + this.reviewScore;
-
- // bad
- var totalScore = '' + this.reviewScore + ' total score';
-
- // good
- var totalScore = this.reviewScore + ' total score';
- ```
-
- - Use `parseInt` for Numbers and always with a radix for type casting.
-
- ```javascript
- var inputValue = '4';
-
- // bad
- var val = new Number(inputValue);
-
- // bad
- var val = +inputValue;
-
- // bad
- var val = inputValue >> 0;
-
- // bad
- var val = parseInt(inputValue);
-
- // good
- var val = Number(inputValue);
-
- // good
- var val = parseInt(inputValue, 10);
- ```
-
- - If for whatever reason you are doing something wild and `parseInt` is your bottleneck and need to use Bitshift for [performance reasons](http://jsperf.com/coercion-vs-casting/3), leave a comment explaining why and what you're doing.
-
- ```javascript
- // good
- /**
- * parseInt was the reason my code was slow.
- * Bitshifting the String to coerce it to a
- * Number made it a lot faster.
- */
- var val = inputValue >> 0;
- ```
-
- - **Note:** Be careful when using bitshift operations. Numbers are represented as [64-bit values](http://es5.github.io/#x4.3.19), but Bitshift operations always return a 32-bit integer ([source](http://es5.github.io/#x11.7)). Bitshift can lead to unexpected behavior for integer values larger than 32 bits. [Discussion](https://github.com/airbnb/javascript/issues/109). Largest signed 32-bit Int is 2,147,483,647:
-
- ```javascript
- 2147483647 >> 0 //=> 2147483647
- 2147483648 >> 0 //=> -2147483648
- 2147483649 >> 0 //=> -2147483647
- ```
-
- - Booleans:
-
- ```javascript
- var age = 0;
-
- // bad
- var hasAge = new Boolean(age);
-
- // good
- var hasAge = Boolean(age);
-
- // good
- var hasAge = !!age;
- ```
-
-**[⬆ back to top](#table-of-contents)**
-
-
-## Naming Conventions
-
- - Avoid single letter names. Be descriptive with your naming.
-
- ```javascript
- // bad
- function q() {
- // ...stuff...
- }
-
- // good
- function query() {
- // ..stuff..
- }
- ```
-
- - Use camelCase when naming objects, functions, and instances.
-
- ```javascript
- // bad
- var OBJEcttsssss = {};
- var this_is_my_object = {};
- var o = {};
- function c() {}
-
- // good
- var thisIsMyObject = {};
- function thisIsMyFunction() {}
- ```
-
- - Use PascalCase when naming constructors or classes.
-
- ```javascript
- // bad
- function user(options) {
- this.name = options.name;
- }
-
- var bad = new user({
- name: 'nope'
- });
-
- // good
- function User(options) {
- this.name = options.name;
- }
-
- var good = new User({
- name: 'yup'
- });
- ```
-
- - Use a leading underscore `_` when naming private properties.
-
- ```javascript
- // bad
- this.__firstName__ = 'Panda';
- this.firstName_ = 'Panda';
-
- // good
- this._firstName = 'Panda';
- ```
-
- - When saving a reference to `this` use `_this`.
-
- ```javascript
- // bad
- function() {
- var self = this;
- return function() {
- console.log(self);
- };
- }
-
- // bad
- function() {
- var that = this;
- return function() {
- console.log(that);
- };
- }
-
- // good
- function() {
- var _this = this;
- return function() {
- console.log(_this);
- };
- }
- ```
-
- - Name your functions. This is helpful for stack traces.
-
- ```javascript
- // bad
- var log = function(msg) {
- console.log(msg);
- };
-
- // good
- var log = function log(msg) {
- console.log(msg);
- };
- ```
-
- - **Note:** IE8 and below exhibit some quirks with named function expressions. See [http://kangax.github.io/nfe/](http://kangax.github.io/nfe/) for more info.
-
- - If your file exports a single class, your filename should be exactly the name of the class.
- ```javascript
- // file contents
- class CheckBox {
- // ...
- }
- module.exports = CheckBox;
-
- // in some other file
- // bad
- var CheckBox = require('./checkBox');
-
- // bad
- var CheckBox = require('./check_box');
-
- // good
- var CheckBox = require('./CheckBox');
- ```
-
-**[⬆ back to top](#table-of-contents)**
-
-
-## Accessors
-
- - Accessor functions for properties are not required.
- - If you do make accessor functions use getVal() and setVal('hello').
-
- ```javascript
- // bad
- dragon.age();
-
- // good
- dragon.getAge();
-
- // bad
- dragon.age(25);
-
- // good
- dragon.setAge(25);
- ```
-
- - If the property is a boolean, use isVal() or hasVal().
-
- ```javascript
- // bad
- if (!dragon.age()) {
- return false;
- }
-
- // good
- if (!dragon.hasAge()) {
- return false;
- }
- ```
-
- - It's okay to create get() and set() functions, but be consistent.
-
- ```javascript
- function Jedi(options) {
- options || (options = {});
- var lightsaber = options.lightsaber || 'blue';
- this.set('lightsaber', lightsaber);
- }
-
- Jedi.prototype.set = function(key, val) {
- this[key] = val;
- };
-
- Jedi.prototype.get = function(key) {
- return this[key];
- };
- ```
-
-**[⬆ back to top](#table-of-contents)**
-
-
-## Constructors
-
- - Assign methods to the prototype object, instead of overwriting the prototype with a new object. Overwriting the prototype makes inheritance impossible: by resetting the prototype you'll overwrite the base!
-
- ```javascript
- function Jedi() {
- console.log('new jedi');
- }
-
- // bad
- Jedi.prototype = {
- fight: function fight() {
- console.log('fighting');
- },
-
- block: function block() {
- console.log('blocking');
- }
- };
-
- // good
- Jedi.prototype.fight = function fight() {
- console.log('fighting');
- };
-
- Jedi.prototype.block = function block() {
- console.log('blocking');
- };
- ```
-
- - Methods can return `this` to help with method chaining.
-
- ```javascript
- // bad
- Jedi.prototype.jump = function() {
- this.jumping = true;
- return true;
- };
-
- Jedi.prototype.setHeight = function(height) {
- this.height = height;
- };
-
- var luke = new Jedi();
- luke.jump(); // => true
- luke.setHeight(20); // => undefined
-
- // good
- Jedi.prototype.jump = function() {
- this.jumping = true;
- return this;
- };
-
- Jedi.prototype.setHeight = function(height) {
- this.height = height;
- return this;
- };
-
- var luke = new Jedi();
-
- luke.jump()
- .setHeight(20);
- ```
-
-
- - It's okay to write a custom toString() method, just make sure it works successfully and causes no side effects.
-
- ```javascript
- function Jedi(options) {
- options || (options = {});
- this.name = options.name || 'no name';
- }
-
- Jedi.prototype.getName = function getName() {
- return this.name;
- };
-
- Jedi.prototype.toString = function toString() {
- return 'Jedi - ' + this.getName();
- };
- ```
-
-**[⬆ back to top](#table-of-contents)**
-
-
-## Events
-
- - When attaching data payloads to events (whether DOM events or something more proprietary like Backbone events), pass a hash instead of a raw value. This allows a subsequent contributor to add more data to the event payload without finding and updating every handler for the event. For example, instead of:
-
- ```js
- // bad
- $(this).trigger('listingUpdated', listing.id);
-
- ...
-
- $(this).on('listingUpdated', function(e, listingId) {
- // do something with listingId
- });
- ```
-
- prefer:
-
- ```js
- // good
- $(this).trigger('listingUpdated', { listingId : listing.id });
-
- ...
-
- $(this).on('listingUpdated', function(e, data) {
- // do something with data.listingId
- });
- ```
-
- **[⬆ back to top](#table-of-contents)**
-
-
-## Modules
-
- - The module should start with a `!`. This ensures that if a malformed module forgets to include a final semicolon there aren't errors in production when the scripts get concatenated. [Explanation](https://github.com/airbnb/javascript/issues/44#issuecomment-13063933)
- - The file should be named with camelCase, live in a folder with the same name, and match the name of the single export.
- - Add a method called `noConflict()` that sets the exported module to the previous version and returns this one.
- - Always declare `'use strict';` at the top of the module.
-
- ```javascript
- // fancyInput/fancyInput.js
-
- !function(global) {
- 'use strict';
-
- var previousFancyInput = global.FancyInput;
-
- function FancyInput(options) {
- this.options = options || {};
- }
-
- FancyInput.noConflict = function noConflict() {
- global.FancyInput = previousFancyInput;
- return FancyInput;
- };
-
- global.FancyInput = FancyInput;
- }(this);
- ```
-
-**[⬆ back to top](#table-of-contents)**
-
-
-## jQuery
-
- - Prefix jQuery object variables with a `$`.
-
- ```javascript
- // bad
- var sidebar = $('.sidebar');
-
- // good
- var $sidebar = $('.sidebar');
- ```
-
- - Cache jQuery lookups.
-
- ```javascript
- // bad
- function setSidebar() {
- $('.sidebar').hide();
-
- // ...stuff...
-
- $('.sidebar').css({
- 'background-color': 'pink'
- });
- }
-
- // good
- function setSidebar() {
- var $sidebar = $('.sidebar');
- $sidebar.hide();
-
- // ...stuff...
-
- $sidebar.css({
- 'background-color': 'pink'
- });
- }
- ```
-
- - For DOM queries use Cascading `$('.sidebar ul')` or parent > child `$('.sidebar > ul')`. [jsPerf](http://jsperf.com/jquery-find-vs-context-sel/16)
- - Use `find` with scoped jQuery object queries.
-
- ```javascript
- // bad
- $('ul', '.sidebar').hide();
-
- // bad
- $('.sidebar').find('ul').hide();
-
- // good
- $('.sidebar ul').hide();
-
- // good
- $('.sidebar > ul').hide();
-
- // good
- $sidebar.find('ul').hide();
- ```
-
-**[⬆ back to top](#table-of-contents)**
-
-
-## ECMAScript 5 Compatibility
-
- - Refer to [Kangax](https://twitter.com/kangax/)'s ES5 [compatibility table](http://kangax.github.com/es5-compat-table/).
-
-**[⬆ back to top](#table-of-contents)**
-
-
-## Testing
-
- - **Yup.**
-
- ```javascript
- function() {
- return true;
- }
- ```
-
-**[⬆ back to top](#table-of-contents)**
-
-
-## Performance
-
- - [On Layout & Web Performance](http://kellegous.com/j/2013/01/26/layout-performance/)
- - [String vs Array Concat](http://jsperf.com/string-vs-array-concat/2)
- - [Try/Catch Cost In a Loop](http://jsperf.com/try-catch-in-loop-cost)
- - [Bang Function](http://jsperf.com/bang-function)
- - [jQuery Find vs Context, Selector](http://jsperf.com/jquery-find-vs-context-sel/13)
- - [innerHTML vs textContent for script text](http://jsperf.com/innerhtml-vs-textcontent-for-script-text)
- - [Long String Concatenation](http://jsperf.com/ya-string-concat)
- - Loading...
-
-**[⬆ back to top](#table-of-contents)**
-
-
-## Resources
-
-
-**Read This**
-
- - [Annotated ECMAScript 5.1](http://es5.github.com/)
-
-**Tools**
-
- - Code Style Linters
- + [JSHint](http://www.jshint.com/) - [Airbnb Style .jshintrc](https://github.com/airbnb/javascript/blob/master/linters/jshintrc)
- + [JSCS](https://github.com/jscs-dev/node-jscs) - [Airbnb Style Preset](https://github.com/jscs-dev/node-jscs/blob/master/presets/airbnb.json)
-
-**Other Styleguides**
-
- - [Google JavaScript Style Guide](http://google-styleguide.googlecode.com/svn/trunk/javascriptguide.xml)
- - [jQuery Core Style Guidelines](http://docs.jquery.com/JQuery_Core_Style_Guidelines)
- - [Principles of Writing Consistent, Idiomatic JavaScript](https://github.com/rwldrn/idiomatic.js/)
- - [JavaScript Standard Style](https://github.com/feross/standard)
-
-**Other Styles**
-
- - [Naming this in nested functions](https://gist.github.com/4135065) - Christian Johansen
- - [Conditional Callbacks](https://github.com/airbnb/javascript/issues/52) - Ross Allen
- - [Popular JavaScript Coding Conventions on Github](http://sideeffect.kr/popularconvention/#javascript) - JeongHoon Byun
- - [Multiple var statements in JavaScript, not superfluous](http://benalman.com/news/2012/05/multiple-var-statements-javascript/) - Ben Alman
-
-**Further Reading**
-
- - [Understanding JavaScript Closures](http://javascriptweblog.wordpress.com/2010/10/25/understanding-javascript-closures/) - Angus Croll
- - [Basic JavaScript for the impatient programmer](http://www.2ality.com/2013/06/basic-javascript.html) - Dr. Axel Rauschmayer
- - [You Might Not Need jQuery](http://youmightnotneedjquery.com/) - Zack Bloom & Adam Schwartz
- - [ES6 Features](https://github.com/lukehoban/es6features) - Luke Hoban
- - [Frontend Guidelines](https://github.com/bendc/frontend-guidelines) - Benjamin De Cock
-
-**Books**
-
- - [JavaScript: The Good Parts](http://www.amazon.com/JavaScript-Good-Parts-Douglas-Crockford/dp/0596517742) - Douglas Crockford
- - [JavaScript Patterns](http://www.amazon.com/JavaScript-Patterns-Stoyan-Stefanov/dp/0596806752) - Stoyan Stefanov
- - [Pro JavaScript Design Patterns](http://www.amazon.com/JavaScript-Design-Patterns-Recipes-Problem-Solution/dp/159059908X) - Ross Harmes and Dustin Diaz
- - [High Performance Web Sites: Essential Knowledge for Front-End Engineers](http://www.amazon.com/High-Performance-Web-Sites-Essential/dp/0596529309) - Steve Souders
- - [Maintainable JavaScript](http://www.amazon.com/Maintainable-JavaScript-Nicholas-C-Zakas/dp/1449327680) - Nicholas C. Zakas
- - [JavaScript Web Applications](http://www.amazon.com/JavaScript-Web-Applications-Alex-MacCaw/dp/144930351X) - Alex MacCaw
- - [Pro JavaScript Techniques](http://www.amazon.com/Pro-JavaScript-Techniques-John-Resig/dp/1590597273) - John Resig
- - [Smashing Node.js: JavaScript Everywhere](http://www.amazon.com/Smashing-Node-js-JavaScript-Everywhere-Magazine/dp/1119962595) - Guillermo Rauch
- - [Secrets of the JavaScript Ninja](http://www.amazon.com/Secrets-JavaScript-Ninja-John-Resig/dp/193398869X) - John Resig and Bear Bibeault
- - [Human JavaScript](http://humanjavascript.com/) - Henrik Joreteg
- - [Superhero.js](http://superherojs.com/) - Kim Joar Bekkelund, Mads Mobæk, & Olav Bjorkoy
- - [JSBooks](http://jsbooks.revolunet.com/) - Julien Bouquillon
- - [Third Party JavaScript](http://manning.com/vinegar/) - Ben Vinegar and Anton Kovalyov
- - [Effective JavaScript: 68 Specific Ways to Harness the Power of JavaScript](http://amzn.com/0321812182) - David Herman
- - [Eloquent JavaScript](http://eloquentjavascript.net) - Marijn Haverbeke
- - [You Don't Know JS](https://github.com/getify/You-Dont-Know-JS) - Kyle Simpson
-
-**Blogs**
-
- - [DailyJS](http://dailyjs.com/)
- - [JavaScript Weekly](http://javascriptweekly.com/)
- - [JavaScript, JavaScript...](http://javascriptweblog.wordpress.com/)
- - [Bocoup Weblog](http://weblog.bocoup.com/)
- - [Adequately Good](http://www.adequatelygood.com/)
- - [NCZOnline](http://www.nczonline.net/)
- - [Perfection Kills](http://perfectionkills.com/)
- - [Ben Alman](http://benalman.com/)
- - [Dmitry Baranovskiy](http://dmitry.baranovskiy.com/)
- - [Dustin Diaz](http://dustindiaz.com/)
- - [nettuts](http://net.tutsplus.com/?s=javascript)
-
-**Podcasts**
-
- - [JavaScript Jabber](http://devchat.tv/js-jabber/)
-
-
-**[⬆ back to top](#table-of-contents)**
-
-## In the Wild
-
- This is a list of organizations that are using this style guide. Send us a pull request or open an issue and we'll add you to the list.
-
- - **Aan Zee**: [AanZee/javascript](https://github.com/AanZee/javascript)
- - **Adult Swim**: [adult-swim/javascript](https://github.com/adult-swim/javascript)
- - **Airbnb**: [airbnb/javascript](https://github.com/airbnb/javascript)
- - **American Insitutes for Research**: [AIRAST/javascript](https://github.com/AIRAST/javascript)
- - **Apartmint**: [apartmint/javascript](https://github.com/apartmint/javascript)
- - **Avalara**: [avalara/javascript](https://github.com/avalara/javascript)
- - **Billabong**: [billabong/javascript](https://github.com/billabong/javascript)
- - **Compass Learning**: [compasslearning/javascript-style-guide](https://github.com/compasslearning/javascript-style-guide)
- - **DailyMotion**: [dailymotion/javascript](https://github.com/dailymotion/javascript)
- - **Digitpaint** [digitpaint/javascript](https://github.com/digitpaint/javascript)
- - **Evernote**: [evernote/javascript-style-guide](https://github.com/evernote/javascript-style-guide)
- - **ExactTarget**: [ExactTarget/javascript](https://github.com/ExactTarget/javascript)
- - **Flexberry**: [Flexberry/javascript-style-guide](https://github.com/Flexberry/javascript-style-guide)
- - **Gawker Media**: [gawkermedia/javascript](https://github.com/gawkermedia/javascript)
- - **GeneralElectric**: [GeneralElectric/javascript](https://github.com/GeneralElectric/javascript)
- - **GoodData**: [gooddata/gdc-js-style](https://github.com/gooddata/gdc-js-style)
- - **Grooveshark**: [grooveshark/javascript](https://github.com/grooveshark/javascript)
- - **How About We**: [howaboutwe/javascript](https://github.com/howaboutwe/javascript)
- - **InfoJobs**: [InfoJobs/JavaScript-Style-Guide](https://github.com/InfoJobs/JavaScript-Style-Guide)
- - **Intent Media**: [intentmedia/javascript](https://github.com/intentmedia/javascript)
- - **Jam3**: [Jam3/Javascript-Code-Conventions](https://github.com/Jam3/Javascript-Code-Conventions)
- - **JSSolutions**: [JSSolutions/javascript](https://github.com/JSSolutions/javascript)
- - **Kinetica Solutions**: [kinetica/javascript](https://github.com/kinetica/javascript)
- - **Mighty Spring**: [mightyspring/javascript](https://github.com/mightyspring/javascript)
- - **MinnPost**: [MinnPost/javascript](https://github.com/MinnPost/javascript)
- - **ModCloth**: [modcloth/javascript](https://github.com/modcloth/javascript)
- - **Money Advice Service**: [moneyadviceservice/javascript](https://github.com/moneyadviceservice/javascript)
- - **Muber**: [muber/javascript](https://github.com/muber/javascript)
- - **National Geographic**: [natgeo/javascript](https://github.com/natgeo/javascript)
- - **National Park Service**: [nationalparkservice/javascript](https://github.com/nationalparkservice/javascript)
- - **Nimbl3**: [nimbl3/javascript](https://github.com/nimbl3/javascript)
- - **Nordic Venture Family**: [CodeDistillery/javascript](https://github.com/CodeDistillery/javascript)
- - **Orion Health**: [orionhealth/javascript](https://github.com/orionhealth/javascript)
- - **Peerby**: [Peerby/javascript](https://github.com/Peerby/javascript)
- - **Razorfish**: [razorfish/javascript-style-guide](https://github.com/razorfish/javascript-style-guide)
- - **reddit**: [reddit/styleguide/javascript](https://github.com/reddit/styleguide/tree/master/javascript)
- - **REI**: [reidev/js-style-guide](https://github.com/reidev/js-style-guide)
- - **Ripple**: [ripple/javascript-style-guide](https://github.com/ripple/javascript-style-guide)
- - **SeekingAlpha**: [seekingalpha/javascript-style-guide](https://github.com/seekingalpha/javascript-style-guide)
- - **Shutterfly**: [shutterfly/javascript](https://github.com/shutterfly/javascript)
- - **StudentSphere**: [studentsphere/javascript](https://github.com/studentsphere/javascript)
- - **Target**: [target/javascript](https://github.com/target/javascript)
- - **TheLadders**: [TheLadders/javascript](https://github.com/TheLadders/javascript)
- - **T4R Technology**: [T4R-Technology/javascript](https://github.com/T4R-Technology/javascript)
- - **Userify**: [userify/javascript](https://github.com/userify/javascript)
- - **VoxFeed**: [VoxFeed/javascript-style-guide](https://github.com/VoxFeed/javascript-style-guide)
- - **Weggo**: [Weggo/javascript](https://github.com/Weggo/javascript)
- - **Zillow**: [zillow/javascript](https://github.com/zillow/javascript)
- - **ZocDoc**: [ZocDoc/javascript](https://github.com/ZocDoc/javascript)
-
-## Translation
-
- This style guide is also available in other languages:
-
- -  **Brazilian Portuguese**: [armoucar/javascript-style-guide](https://github.com/armoucar/javascript-style-guide)
- -  **Bulgarian**: [borislavvv/javascript](https://github.com/borislavvv/javascript)
- -  **Catalan**: [fpmweb/javascript-style-guide](https://github.com/fpmweb/javascript-style-guide)
- -  **Chinese(Traditional)**: [jigsawye/javascript](https://github.com/jigsawye/javascript)
- -  **Chinese(Simplified)**: [sivan/javascript-style-guide](https://github.com/sivan/javascript-style-guide)
- -  **French**: [nmussy/javascript-style-guide](https://github.com/nmussy/javascript-style-guide)
- -  **German**: [timofurrer/javascript-style-guide](https://github.com/timofurrer/javascript-style-guide)
- -  **Italian**: [sinkswim/javascript-style-guide](https://github.com/sinkswim/javascript-style-guide)
- -  **Japanese**: [mitsuruog/javacript-style-guide](https://github.com/mitsuruog/javacript-style-guide)
- -  **Korean**: [tipjs/javascript-style-guide](https://github.com/tipjs/javascript-style-guide)
- -  **Polish**: [mjurczyk/javascript](https://github.com/mjurczyk/javascript)
- -  **Russian**: [uprock/javascript](https://github.com/uprock/javascript)
- -  **Spanish**: [paolocarrasco/javascript-style-guide](https://github.com/paolocarrasco/javascript-style-guide)
- -  **Thai**: [lvarayut/javascript-style-guide](https://github.com/lvarayut/javascript-style-guide)
-
-## The JavaScript Style Guide Guide
-
- - [Reference](https://github.com/airbnb/javascript/wiki/The-JavaScript-Style-Guide-Guide)
-
-## Chat With Us About JavaScript
-
- - Find us on [gitter](https://gitter.im/airbnb/javascript).
-
-## Contributors
-
- - [View Contributors](https://github.com/airbnb/javascript/graphs/contributors)
-
-
-## License
-
-(The MIT License)
-
-Copyright (c) 2014 Airbnb
-
-Permission is hereby granted, free of charge, to any person obtaining
-a copy of this software and associated documentation files (the
-'Software'), to deal in the Software without restriction, including
-without limitation the rights to use, copy, modify, merge, publish,
-distribute, sublicense, and/or sell copies of the Software, and to
-permit persons to whom the Software is furnished to do so, subject to
-the following conditions:
-
-The above copyright notice and this permission notice shall be
-included in all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND,
-EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
-MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
-IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
-CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
-TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
-SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-
-**[⬆ back to top](#table-of-contents)**
-
-# };
+中文版参见 https://github.com/sivan/javascript-style-guide/tree/master/es5
\ No newline at end of file
diff --git a/react/README.md b/react/README.md
index afcf1020ad..58aa1efc4d 100644
--- a/react/README.md
+++ b/react/README.md
@@ -1,242 +1,3 @@
-# Airbnb React/JSX Style Guide
+# Airbnb React/JSX 风格指南
-*A mostly reasonable approach to React and JSX*
-
-## Table of Contents
-
- 1. [Basic Rules](#basic-rules)
- 1. [Naming](#naming)
- 1. [Declaration](#declaration)
- 1. [Alignment](#alignment)
- 1. [Quotes](#quotes)
- 1. [Spacing](#spacing)
- 1. [Props](#props)
- 1. [Parentheses](#parentheses)
- 1. [Tags](#tags)
- 1. [Methods](#methods)
- 1. [Ordering](#ordering)
-
-## Basic Rules
-
- - Only include one React component per file.
- - Always use JSX syntax.
- - Do not use `React.createElement` unless you're initializing the app from a file that does not transform JSX.
-
-## Naming
-
- - **Extensions**: Use `.jsx` extension for React components.
- - **Filename**: Use PascalCase for filenames. E.g., `ReservationCard.jsx`.
- - **Reference Naming**: Use PascalCase for React components and camelCase for their instances:
- ```javascript
- // bad
- const reservationCard = require('./ReservationCard');
-
- // good
- const ReservationCard = require('./ReservationCard');
-
- // bad
- const ReservationItem = ;
-
- // good
- const reservationItem = ;
- ```
-
- **Component Naming**: Use the filename as the component name. For example, `ReservationCard.jsx` should have a reference name of `ReservationCard`. However, for root components of a directory, use `index.jsx` as the filename and use the directory name as the component name:
- ```javascript
- // bad
- const Footer = require('./Footer/Footer.jsx')
-
- // bad
- const Footer = require('./Footer/index.jsx')
-
- // good
- const Footer = require('./Footer')
- ```
-
-
-## Declaration
- - Do not use displayName for naming components. Instead, name the component by reference.
-
- ```javascript
- // bad
- export default React.createClass({
- displayName: 'ReservationCard',
- // stuff goes here
- });
-
- // good
- const ReservationCard = React.createClass({
- // stuff goes here
- });
- export default ReservationCard;
- ```
-
-## Alignment
- - Follow these alignment styles for JS syntax
-
- ```javascript
- // bad
-
-
- // good
-
-
- // if props fit in one line then keep it on the same line
-
-
- // children get indented normally
-
-
-
- ```
-
-## Quotes
- - Always use double quotes (`"`) for JSX attributes, but single quotes for all other JS.
- ```javascript
- // bad
-
-
- // good
-
-
- // bad
-
-
- // good
-
- ```
-
-## Spacing
- - Always include a single space in your self-closing tag.
- ```javascript
- // bad
-
-
- // very bad
-
-
- // bad
-
-
- // good
-
- ```
-
-## Props
- - Always use camelCase for prop names.
- ```javascript
- // bad
-
-
- // good
-
- ```
-
-## Parentheses
- - Wrap JSX tags in parentheses when they span more than one line:
- ```javascript
- /// bad
- render() {
- return
-
- ;
- }
-
- // good
- render() {
- return (
-
-
-
- );
- }
-
- // good, when single line
- render() {
- const body = hello
;
- return {body};
- }
- ```
-
-## Tags
- - Always self-close tags that have no children.
- ```javascript
- // bad
-
-
- // good
-
- ```
-
- - If your component has multi-line properties, close its tag on a new line.
- ```javascript
- // bad
-
-
- // good
-
- ```
-
-## Methods
- - Do not use underscore prefix for internal methods of a React component.
- ```javascript
- // bad
- React.createClass({
- _onClickSubmit() {
- // do stuff
- }
-
- // other stuff
- });
-
- // good
- React.createClass({
- onClickSubmit() {
- // do stuff
- }
-
- // other stuff
- });
- ```
-
-## Ordering
- - Always follow the following order for methods in a React component:
-
- 1. displayName
- 2. mixins (as of React v0.13, mixins are deprecated)
- 3. statics
- 4. propTypes
- 5. getDefaultProps
- 6. getInitialState
- 7. componentWillMount
- 8. componentDidMount
- 9. componentWillReceiveProps
- 10. shouldComponentUpdate
- 11. componentWillUpdate
- 12. componentDidUpdate
- 13. componentWillUnmount
- 14. *clickHandlers or eventHandlers* like onClickSubmit() or onChangeDescription()
- 15. *getter methods for render* like getSelectReason() or getFooterContent()
- 16. *Optional render methods* like renderNavigation() or renderProfilePicture()
- 17. render
-
-**[⬆ back to top](#table-of-contents)**
+中文版参见 https://github.com/JasonBoy/javascript/tree/master/react
\ No newline at end of file