From 45584d2c5eb58056775a09c134a9e96c770e547d Mon Sep 17 00:00:00 2001 From: ian Date: Thu, 2 Jun 2016 18:23:27 +0800 Subject: [PATCH 01/14] add key point to readme --- README.md | 56 +++++++++++++++++++++++++++---------------------------- 1 file changed, 28 insertions(+), 28 deletions(-) diff --git a/README.md b/README.md index c31d41b5e9..a464486442 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. @@ -338,7 +338,7 @@ Other Style Guides ``` - - [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 +355,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 +416,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 +500,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 @@ -583,7 +583,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. @@ -633,7 +633,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 +723,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. @@ -805,7 +805,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 +955,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 +1089,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 +1118,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 +1139,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 +1189,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. @@ -1306,7 +1306,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 +1410,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 @@ -1530,7 +1530,7 @@ Other Style Guides ``` - - [15.3](#comparison--shortcuts) Use shortcuts. + - [15.3](#comparison--shortcuts) **Use shortcuts.** ```javascript // bad @@ -1775,7 +1775,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. @@ -1919,8 +1919,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 @@ -2168,7 +2168,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 +2266,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 +2313,7 @@ Other Style Guides ``` - - [21.6](#coercion--booleans) Booleans: + - [21.6](#coercion--booleans) **Booleans:** ```javascript const age = 0; @@ -2403,7 +2403,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 @@ -2431,7 +2431,7 @@ Other Style Guides ``` - - [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 +2515,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 From 5ba5ac6a424264122ccd97073ca10aab0f3c7488 Mon Sep 17 00:00:00 2001 From: Ken Lu Date: Sat, 4 Jun 2016 20:21:09 -0400 Subject: [PATCH 02/14] Update README.md --- README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/README.md b/README.md index a464486442..ca50dece9e 100644 --- a/README.md +++ b/README.md @@ -336,6 +336,8 @@ Other Style Guides // good someStack.push('abracadabra'); ``` +这里push有什么特别好处？ + - [4.3](#es6-array-spreads) **Use array spreads `...` to copy arrays.** From 6d8859b30636d708d8c124a29b8b797ab8c455d0 Mon Sep 17 00:00:00 2001 From: Ken Lu Date: Sat, 4 Jun 2016 20:29:32 -0400 Subject: [PATCH 03/14] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index ca50dece9e..eab8bff85f 100644 --- a/README.md +++ b/README.md @@ -540,7 +540,7 @@ Other Style Guides function sayHi(name) { return `How are you, ${ name }?`; } - +这里空格有啥问题吗？ // good function sayHi(name) { return `How are you, ${name}?`; From e48a1b612a29df7a69c668a2a795ee38d26e5956 Mon Sep 17 00:00:00 2001 From: Ken Lu Date: Sat, 4 Jun 2016 20:35:00 -0400 Subject: [PATCH 04/14] Update README.md --- README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/README.md b/README.md index eab8bff85f..39e99aac49 100644 --- a/README.md +++ b/README.md @@ -573,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 From 4fe1b67015fa7066a09d1058d235664066ce3bc6 Mon Sep 17 00:00:00 2001 From: Ken Lu Date: Sat, 4 Jun 2016 20:36:53 -0400 Subject: [PATCH 05/14] Update README.md --- README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/README.md b/README.md index 39e99aac49..37f81cd9ec 100644 --- a/README.md +++ b/README.md @@ -597,6 +597,8 @@ 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) From 9a7ddd0f4a9e08bf1ecbd5c1a8f5be52693ce892 Mon Sep 17 00:00:00 2001 From: Ken Lu Date: Sat, 4 Jun 2016 20:40:11 -0400 Subject: [PATCH 06/14] Update README.md --- README.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/README.md b/README.md index 37f81cd9ec..a78d44af59 100644 --- a/README.md +++ b/README.md @@ -602,6 +602,7 @@ Other Style Guides - [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). @@ -622,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. From 94d27735e18a20eed5e84d9d3d2c27b3fb4afe08 Mon Sep 17 00:00:00 2001 From: Ken Lu Date: Sat, 4 Jun 2016 20:44:40 -0400 Subject: [PATCH 07/14] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index a78d44af59..ad0e29c752 100644 --- a/README.md +++ b/README.md @@ -746,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) From 1cfd73f99ed64bf8d837493d303395eac0c3585d Mon Sep 17 00:00:00 2001 From: Ken Lu Date: Sat, 4 Jun 2016 20:52:03 -0400 Subject: [PATCH 08/14] Update README.md --- README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/README.md b/README.md index ad0e29c752..959312b358 100644 --- a/README.md +++ b/README.md @@ -1222,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. From 616108fcda756e4fc92c33c8a79804678130e27b Mon Sep 17 00:00:00 2001 From: Ken Lu Date: Sat, 4 Jun 2016 20:53:01 -0400 Subject: [PATCH 09/14] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 959312b358..ec988dccd5 100644 --- a/README.md +++ b/README.md @@ -1294,7 +1294,7 @@ Other Style Guides // good const isJedi = luke.jedi; ``` - +什么好处 - [12.2](#properties--bracket) Use bracket notation `[]` when accessing properties with a variable. From b6719d1b7bdaf7deef86303cd764d080c5e4577a Mon Sep 17 00:00:00 2001 From: Ken Lu Date: Sat, 4 Jun 2016 20:53:59 -0400 Subject: [PATCH 10/14] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index ec988dccd5..245e43dbd7 100644 --- a/README.md +++ b/README.md @@ -1470,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. From 29d4d15ff52f8448ba3250e2cecb6af547df9089 Mon Sep 17 00:00:00 2001 From: Ken Lu Date: Sat, 4 Jun 2016 20:57:14 -0400 Subject: [PATCH 11/14] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 245e43dbd7..acc3d25abb 100644 --- a/README.md +++ b/README.md @@ -1854,7 +1854,7 @@ Other Style Guides function test() { console.log('test'); } - +空格 // bad dog.set('attr',{ age: '1 year', From 0c92239faea0d755b7daa2c249d3c48408fa9c6d Mon Sep 17 00:00:00 2001 From: Ken Lu Date: Sat, 4 Jun 2016 20:58:10 -0400 Subject: [PATCH 12/14] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index acc3d25abb..0ab96c14ca 100644 --- a/README.md +++ b/README.md @@ -1952,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') From 9f976f83c2d4172ef0f2525ce85700dda9a0fe59 Mon Sep 17 00:00:00 2001 From: Ken Lu Date: Sat, 4 Jun 2016 21:00:23 -0400 Subject: [PATCH 13/14] Update README.md --- README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/README.md b/README.md index 0ab96c14ca..5cce60c7fd 100644 --- a/README.md +++ b/README.md @@ -2440,6 +2440,8 @@ Other Style Guides }; } ``` + 不要保存this + - [22.6](#naming--filename-matches-export) **A base filename should exactly match the name of its default export.** From a1ffa4ee6bd4f624c06257aaa5d4a1f1f0deecbf Mon Sep 17 00:00:00 2001 From: Ken Lu Date: Sat, 4 Jun 2016 21:02:19 -0400 Subject: [PATCH 14/14] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 5cce60c7fd..ea24bb5841 100644 --- a/README.md +++ b/README.md @@ -2580,7 +2580,7 @@ Other Style Guides // do something with listingId }); ``` - +什么作用 prefer: ```javascript