diff --git a/README.md b/README.md index c31d41b5e9..ea24bb5841 100644 --- a/README.md +++ b/README.md @@ -191,7 +191,7 @@ Other Style Guides ``` - - [3.4](#es6-computed-properties) Use computed property names when creating objects with dynamic property names. + - [3.4](#es6-computed-properties) **Use computed property names when creating objects with dynamic property names.** > Why? They allow you to define all the properties of an object in one place. @@ -240,7 +240,7 @@ Other Style Guides ``` - - [3.6](#es6-object-concise) Use property value shorthand. eslint: [`object-shorthand`](http://eslint.org/docs/rules/object-shorthand.html) jscs: [`requireEnhancedObjectLiterals`](http://jscs.info/rule/requireEnhancedObjectLiterals) + - [3.6](#es6-object-concise) **Use property value shorthand**. eslint: [`object-shorthand`](http://eslint.org/docs/rules/object-shorthand.html) jscs: [`requireEnhancedObjectLiterals`](http://jscs.info/rule/requireEnhancedObjectLiterals) > Why? It is shorter to write and descriptive. @@ -336,9 +336,11 @@ Other Style Guides // good someStack.push('abracadabra'); ``` +这里push有什么特别好处？ + - - [4.3](#es6-array-spreads) Use array spreads `...` to copy arrays. + - [4.3](#es6-array-spreads) **Use array spreads `...` to copy arrays.** ```javascript // bad @@ -355,7 +357,7 @@ Other Style Guides ``` - - [4.4](#arrays--from) To convert an array-like object to an array, use [Array.from](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/from). + - [4.4](#arrays--from) **To convert an array-like object to an array, use [Array.from](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/from).** ```javascript const foo = document.querySelectorAll('.foo'); @@ -416,7 +418,7 @@ Other Style Guides ## Destructuring - - [5.1](#destructuring--object) Use object destructuring when accessing and using multiple properties of an object. jscs: [`requireObjectDestructuring`](http://jscs.info/rule/requireObjectDestructuring) + - [5.1](#destructuring--object) **Use object destructuring when accessing and using multiple properties of an object. jscs: [`requireObjectDestructuring`](http://jscs.info/rule/requireObjectDestructuring)** > Why? Destructuring saves you from creating temporary references for those properties. @@ -500,7 +502,7 @@ Other Style Guides - [6.2](#strings--line-length) Strings that cause the line to go over 100 characters should be written across multiple lines using string concatenation. - - [6.3](#strings--concat-perf) 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). + - [6.3](#strings--concat-perf) **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 @@ -538,7 +540,7 @@ Other Style Guides function sayHi(name) { return `How are you, ${ name }?`; } - +这里空格有啥问题吗？ // good function sayHi(name) { return `How are you, ${name}?`; @@ -571,6 +573,8 @@ Other Style Guides - [7.1](#functions--declarations) Use function declarations instead of function expressions. jscs: [`requireFunctionDeclarations`](http://jscs.info/rule/requireFunctionDeclarations) > Why? Function declarations are named, so they're easier to identify in call stacks. Also, the whole body of a function declaration is hoisted, whereas only the reference of a function expression is hoisted. This rule makes it possible to always use [Arrow Functions](#arrow-functions) in place of function expressions. + + 最好讨论一下hoist什么的 ```javascript // bad @@ -583,7 +587,7 @@ Other Style Guides ``` - - [7.2](#functions--iife) Wrap immediately invoked function expressions in parentheses. eslint: [`wrap-iife`](http://eslint.org/docs/rules/wrap-iife.html) jscs: [`requireParenthesesAroundIIFE`](http://jscs.info/rule/requireParenthesesAroundIIFE) + - [7.2](#functions--iife) **Wrap immediately invoked function expressions in parentheses. eslint: [`wrap-iife`](http://eslint.org/docs/rules/wrap-iife.html) jscs: [`requireParenthesesAroundIIFE`](http://jscs.info/rule/requireParenthesesAroundIIFE)** > Why? An immediately invoked function expression is a single unit - wrapping both it, and its invocation parens, in parens, cleanly expresses this. Note that in a world with modules everywhere, you almost never need an IIFE. @@ -593,9 +597,12 @@ Other Style Guides console.log('Welcome to the Internet. Please follow me.'); }()); ``` + + 这个括号要用 - [7.3](#functions--in-blocks) 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. eslint: [`no-loop-func`](http://eslint.org/docs/rules/no-loop-func.html) + 有意思，怎么记不住这个 - [7.4](#functions--note-on-blocks) **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). @@ -616,6 +623,8 @@ Other Style Guides }; } ``` + + 这个有看到了，什么时候怎么用？ - [7.5](#functions--arguments-shadow) Never name a parameter `arguments`. This will take precedence over the `arguments` object that is given to every function scope. @@ -633,7 +642,7 @@ Other Style Guides ``` - - [7.6](#es6-rest) Never use `arguments`, opt to use rest syntax `...` instead. eslint: [`prefer-rest-params`](http://eslint.org/docs/rules/prefer-rest-params) + - [7.6](#es6-rest) **Never use `arguments`, opt to use rest syntax `...` instead. eslint: [`prefer-rest-params`](http://eslint.org/docs/rules/prefer-rest-params)** > Why? `...` is explicit about which arguments you want pulled. Plus, rest arguments are a real Array, and not merely Array-like like `arguments`. @@ -723,7 +732,7 @@ Other Style Guides ``` - - [7.11](#functions--signature-spacing) Spacing in a function signature. + - [7.11](#functions--signature-spacing) **Spacing in a function signature.** > Why? Consistency is good, and you shouldn’t have to add or remove a space when adding or removing a name. @@ -737,7 +746,7 @@ Other Style Guides const x = function () {}; const y = function a() {}; ``` - +好吧 - [7.12](#functions--mutate-params) Never mutate parameters. eslint: [`no-param-reassign`](http://eslint.org/docs/rules/no-param-reassign.html) @@ -805,7 +814,7 @@ Other Style Guides ``` - - [8.2](#arrows--implicit-return) If the function body consists of a single expression, omit the braces and use the implicit return. Otherwise, keep the braces and use a `return` statement. eslint: [`arrow-parens`](http://eslint.org/docs/rules/arrow-parens.html), [`arrow-body-style`](http://eslint.org/docs/rules/arrow-body-style.html) jscs: [`disallowParenthesesAroundArrowParam`](http://jscs.info/rule/disallowParenthesesAroundArrowParam), [`requireShorthandArrowFunctions`](http://jscs.info/rule/requireShorthandArrowFunctions) + - [8.2](#arrows--implicit-return) **If the function body consists of a single expression, omit the braces and use the implicit return. Otherwise, keep the braces and use a `return` statement. **eslint: [`arrow-parens`](http://eslint.org/docs/rules/arrow-parens.html), [`arrow-body-style`](http://eslint.org/docs/rules/arrow-body-style.html) jscs: [`disallowParenthesesAroundArrowParam`](http://jscs.info/rule/disallowParenthesesAroundArrowParam), [`requireShorthandArrowFunctions`](http://jscs.info/rule/requireShorthandArrowFunctions) > Why? Syntactic sugar. It reads well when multiple functions are chained together. @@ -955,7 +964,7 @@ Other Style Guides ``` - - [9.3](#constructors--chaining) Methods can return `this` to help with method chaining. + - [9.3](#constructors--chaining) **Methods can return `this` to help with method chaining.** ```javascript // bad @@ -1089,7 +1098,7 @@ Other Style Guides ``` - - [10.2](#modules--no-wildcard) Do not use wildcard imports. + - [10.2](#modules--no-wildcard) **Do not use wildcard imports.** > Why? This makes sure you have a single default export. @@ -1118,8 +1127,8 @@ Other Style Guides ``` - - [10.4](#modules--no-duplicate-imports) Only import from a path in one place. - eslint: [`no-duplicate-imports`](http://eslint.org/docs/rules/no-duplicate-imports) + - [10.4](#modules--no-duplicate-imports) **Only import from a path in one place. + eslint: [`no-duplicate-imports`](http://eslint.org/docs/rules/no-duplicate-imports)** > Why? Having multiple lines that import from the same path can make code harder to maintain. ```javascript @@ -1139,7 +1148,7 @@ Other Style Guides ``` - - [10.5](#modules--no-mutable-exports) Do not export mutable bindings. + - [10.5](#modules--no-mutable-exports) **Do not export mutable bindings.** eslint: [`import/no-mutable-exports`](https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/no-mutable-exports.md) > Why? Mutation should be avoided in general, but in particular when exporting mutable bindings. While this technique may be needed for some special cases, in general, only constant references should be exported. @@ -1189,7 +1198,7 @@ Other Style Guides ## Iterators and Generators - - [11.1](#iterators--nope) Don't use iterators. Prefer JavaScript's higher-order functions like `map()` and `reduce()` instead of loops like `for-of`. eslint: [`no-iterator`](http://eslint.org/docs/rules/no-iterator.html) + - [11.1](#iterators--nope) **Don't use iterators. Prefer JavaScript's higher-order functions like `map()` and `reduce()` instead of loops like `for-of`.** eslint: [`no-iterator`](http://eslint.org/docs/rules/no-iterator.html) > Why? This enforces our immutable rule. Dealing with pure functions that return values is easier to reason about than side effects. @@ -1213,6 +1222,8 @@ Other Style Guides const sum = numbers.reduce((total, num) => total + num, 0); sum === 15; ``` +所以，就是两个专用方法forEach reduce + - [11.2](#generators--nope) Don't use generators for now. @@ -1283,7 +1294,7 @@ Other Style Guides // good const isJedi = luke.jedi; ``` - +什么好处 - [12.2](#properties--bracket) Use bracket notation `[]` when accessing properties with a variable. @@ -1306,7 +1317,7 @@ Other Style Guides ## Variables - - [13.1](#variables--const) Always use `const` 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. + - [13.1](#variables--const) **Always use `const` 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 @@ -1410,7 +1421,7 @@ Other Style Guides ## Hoisting - - [14.1](#hoisting--about) `var` declarations get hoisted to the top of their scope, their assignment does not. `const` and `let` declarations are blessed with a new concept called [Temporal Dead Zones (TDZ)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let#Temporal_dead_zone_and_errors_with_let). It's important to know why [typeof is no longer safe](http://es-discourse.com/t/why-typeof-is-no-longer-safe/15). + - [14.1](#hoisting--about) **`var` declarations get hoisted to the top of their scope, their assignment does not. `const` and `let` declarations are blessed with a new concept called [Temporal Dead Zones (TDZ)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let#Temporal_dead_zone_and_errors_with_let). It's important to know why [typeof is no longer safe](http://es-discourse.com/t/why-typeof-is-no-longer-safe/15).** ```javascript // we know this wouldn't work (assuming there @@ -1459,7 +1470,7 @@ Other Style Guides }; } ``` - +需要讨论 - [14.3](#hoisting--named-expresions) Named function expressions hoist the variable name, not the function name or the function body. @@ -1530,7 +1541,7 @@ Other Style Guides ``` - - [15.3](#comparison--shortcuts) Use shortcuts. + - [15.3](#comparison--shortcuts) **Use shortcuts.** ```javascript // bad @@ -1775,7 +1786,7 @@ Other Style Guides ``` - - [17.3](#comments--actionitems) 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`. + - [17.3](#comments--actionitems) **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`.** - [17.4](#comments--fixme) Use `// FIXME:` to annotate problems. @@ -1843,7 +1854,7 @@ Other Style Guides function test() { console.log('test'); } - +空格 // bad dog.set('attr',{ age: '1 year', @@ -1919,8 +1930,8 @@ Other Style Guides ``` - - [18.6](#whitespace--chains) Use indentation when making long method chains (more than 2 method chains). Use a leading dot, which - emphasizes that the line is a method call, not a new statement. eslint: [`newline-per-chained-call`](http://eslint.org/docs/rules/newline-per-chained-call) [`no-whitespace-before-property`](http://eslint.org/docs/rules/no-whitespace-before-property) + - [18.6](#whitespace--chains) **Use indentation when making long method chains (more than 2 method chains). Use a leading dot, which + emphasizes that the line is a method call, not a new statement.** eslint: [`newline-per-chained-call`](http://eslint.org/docs/rules/newline-per-chained-call) [`no-whitespace-before-property`](http://eslint.org/docs/rules/no-whitespace-before-property) ```javascript // bad @@ -1941,7 +1952,7 @@ Other Style Guides .end() .find('.open') .updateCount(); - +看起里舒服点 // bad const leds = stage.selectAll('.led').data(data).enter().append('svg:svg').classed('led', true) .attr('width', (radius + margin) * 2).append('svg:g') @@ -2168,7 +2179,7 @@ Other Style Guides ``` - - [19.2](#commas--dangling) Additional trailing comma: **Yup.** eslint: [`comma-dangle`](http://eslint.org/docs/rules/comma-dangle.html) jscs: [`requireTrailingComma`](http://jscs.info/rule/requireTrailingComma) + - [19.2](#commas--dangling) **Additional trailing comma:** **Yup.** eslint: [`comma-dangle`](http://eslint.org/docs/rules/comma-dangle.html) jscs: [`requireTrailingComma`](http://jscs.info/rule/requireTrailingComma) > Why? This leads to cleaner git diffs. Also, transpilers like Babel will remove the additional trailing comma in the transpiled code which means you don't have to worry about the [trailing comma problem](es5/README.md#commas) in legacy browsers. @@ -2266,7 +2277,7 @@ Other Style Guides ``` - - [21.3](#coercion--numbers) Numbers: Use `Number` for type casting and `parseInt` always with a radix for parsing strings. eslint: [`radix`](http://eslint.org/docs/rules/radix) + - [21.3](#coercion--numbers) **Numbers: Use `Number` for type casting and `parseInt` always with a radix for parsing strings.** eslint: [`radix`](http://eslint.org/docs/rules/radix) ```javascript const inputValue = '4'; @@ -2313,7 +2324,7 @@ Other Style Guides ``` - - [21.6](#coercion--booleans) Booleans: + - [21.6](#coercion--booleans) **Booleans:** ```javascript const age = 0; @@ -2403,7 +2414,7 @@ Other Style Guides ``` - - [22.5](#naming--self-this) Don't save references to `this`. Use arrow functions or Function#bind. jscs: [`disallowNodeTypes`](http://jscs.info/rule/disallowNodeTypes) + - [22.5](#naming--self-this) **Don't save references to `this`. Use arrow functions or Function#bind.** jscs: [`disallowNodeTypes`](http://jscs.info/rule/disallowNodeTypes) ```javascript // bad @@ -2429,9 +2440,11 @@ Other Style Guides }; } ``` + 不要保存this + - - [22.6](#naming--filename-matches-export) A base filename should exactly match the name of its default export. + - [22.6](#naming--filename-matches-export) **A base filename should exactly match the name of its default export.** ```javascript // file 1 contents @@ -2515,7 +2528,7 @@ Other Style Guides ``` - - [23.3](#accessors--boolean-prefix) If the property/method is a `boolean`, use `isVal()` or `hasVal()`. + - [23.3](#accessors--boolean-prefix) **If the property/method is a `boolean`, use `isVal()` or `hasVal()`.** ```javascript // bad @@ -2567,7 +2580,7 @@ Other Style Guides // do something with listingId }); ``` - +什么作用 prefer: ```javascript