From 7c82e4d22ac7443d97c61bf11b9d502344a39a4c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ant=C3=A9rio=20Vieira?= Date: Thu, 28 Apr 2016 18:05:49 -0300 Subject: [PATCH 1/4] Original text and redundant removed --- a1/i18n/pt-BR.md | 1 - 1 file changed, 1 deletion(-) diff --git a/a1/i18n/pt-BR.md b/a1/i18n/pt-BR.md index 2f961aeb..1a9f9a4a 100644 --- a/a1/i18n/pt-BR.md +++ b/a1/i18n/pt-BR.md @@ -2093,7 +2093,6 @@ ou *Mantenha o módulo da aplicação leve* - Somente coloque a lógica para reunir o aplicativo no módulo da aplicação. Deixe os recursos em seus próprios módulos. - **Por que?** Adding additional roles to the application root to get remote data, display views, or other logic not related to pulling the app together muddies the app module and make both sets of features harder to reuse or turn off. **Por que?** Colocar funções adicionais na raiz da aplicação para obter dados remoto, modos de exibição, ou outra lógica não relacionada com o acoplamento do aplicativo, torna mais difícil reutilizar os recursos ou mesmo, desligá-los. **Por que?** O módulo da aplicação torna-se um manifesto que descreve os módulos que ajudam a definir a aplicação. From 1ca751af92fd0d4bac171b2cd86dd0ed698c7602 Mon Sep 17 00:00:00 2001 From: Eric Lee Carraway Date: Wed, 27 Apr 2016 12:42:00 -0500 Subject: [PATCH 2/4] fix typo: declaration => declarations --- a1/README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/a1/README.md b/a1/README.md index a02bce82..6e98aa0d 100644 --- a/a1/README.md +++ b/a1/README.md @@ -535,7 +535,7 @@ While this guide explains the *what*, *why* and *how*, I find it helpful to see *Why?*: Placing the implementation details of a function later in the file moves that complexity out of view so you can see the important stuff up top. - *Why?*: Function declaration are hoisted so there are no concerns over using a function before it is defined (as there would be with function expressions). + *Why?*: Function declarations are hoisted so there are no concerns over using a function before it is defined (as there would be with function expressions). *Why?*: You never have to worry with function declarations that moving `var a` before `var b` will break your code because `a` depends on `b`. @@ -844,7 +844,7 @@ While this guide explains the *what*, *why* and *how*, I find it helpful to see *Why?*: Placing the implementation details of a function later in the file moves that complexity out of view so you can see the important stuff up top. - *Why?*: Function declaration are hoisted so there are no concerns over using a function before it is defined (as there would be with function expressions). + *Why?*: Function declarations are hoisted so there are no concerns over using a function before it is defined (as there would be with function expressions). *Why?*: You never have to worry with function declarations that moving `var a` before `var b` will break your code because `a` depends on `b`. From 2cc42788c814cd367ab78664a9687a0048b67503 Mon Sep 17 00:00:00 2001 From: Andrey Date: Wed, 29 Jun 2016 02:01:16 -0500 Subject: [PATCH 3/4] Fixed typo --- a1/i18n/ru-RU.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/a1/i18n/ru-RU.md b/a1/i18n/ru-RU.md index bd8a3f50..83b2d033 100644 --- a/a1/i18n/ru-RU.md +++ b/a1/i18n/ru-RU.md @@ -2735,7 +2735,7 @@ ## Contributing -Сначала откройте issue и объясните вопрос/проблему для того, чтобы обсудить потенциальные изменения/добавления. Если у вас есть вопросы по этому руководству, вы можете свободно задавать их, создавая в хранилище issues. Если вы нашли опечатку, создайте pull request. Идея в том, чтобы содержимое всегда дежать актуальным и используя возможности системы Github, помочь рассказать историю с вопросами или проблемами и распространить ее, чтобы она была доступна через поиск Google. Почему? Потому что, если у вас был такой вопрос, то вполне вероятно, что кто-то тоже ищет решение на этот же вопрос! Вы можете узнать больше здесь о том как можно сотрудничать. +Сначала откройте issue и объясните вопрос/проблему для того, чтобы обсудить потенциальные изменения/добавления. Если у вас есть вопросы по этому руководству, вы можете свободно задавать их, создавая в хранилище issues. Если вы нашли опечатку, создайте pull request. Идея в том, чтобы содержимое всегда держать актуальным и используя возможности системы Github, помочь рассказать историю с вопросами или проблемами и распространить ее, чтобы она была доступна через поиск Google. Почему? Потому что, если у вас был такой вопрос, то вполне вероятно, что кто-то тоже ищет решение на этот же вопрос! Вы можете узнать больше здесь о том как можно сотрудничать. *Добавляя материал в данное хранилище вы согласны с тем, ваше содержимое будет доступно согласно приведенной ниже лицензии.* From d2c6568a454977b30dce2a5b26a1a3e21418ed06 Mon Sep 17 00:00:00 2001 From: Sergio Cruz Date: Sun, 4 Sep 2016 11:28:00 -0400 Subject: [PATCH 4/4] adds block about angular low-level functions Update README.md Update README.md Addressed comments made in johnpapa/angular-styleguide#768 Low level functions: added code samples and more why's Angular Helper Functions: more reviews in johnpapa/angular-styleguide#768 Angular Helper Functions: addressing more comments on johnpapa/angular-styleguide#768 Helper functions: Changed language to sound more like a soft suggestion --- a1/README.md | 82 +++++++++++++++++++++++++++++++++++++++++++++++++--- 1 file changed, 78 insertions(+), 4 deletions(-) diff --git a/a1/README.md b/a1/README.md index 6e98aa0d..f28aae45 100644 --- a/a1/README.md +++ b/a1/README.md @@ -56,6 +56,7 @@ While this guide explains the *what*, *why* and *how*, I find it helpful to see 1. [Routing](#routing) 1. [Task Automation](#task-automation) 1. [Filters](#filters) + 1. [Helper Functions](#helper-functions) 1. [Angular Docs](#angular-docs) ## Single Responsibility @@ -3268,13 +3269,86 @@ Use [Gulp](http://gulpjs.com) or [Grunt](http://gruntjs.com) for creating automa **[Back to top](#table-of-contents)** -## Filters +## Helper Functions -###### [Style [Y420](#style-y420)] +Angular 1.x ships with some [helper functions](https://docs.angularjs.org/api/ng/function) whose equivalent functionality can be found within newer versions of JavaScript (e.g. `angular.isArray()`, `angular.forEach()`, etc). In such cases we should favor usage of native JavaScript functions. - - Avoid using filters for scanning all properties of a complex object graph. Use filters for select properties. +###### [Style [Y500](#style-y500)] - *Why?*: Filters can easily be abused and negatively affect performance if not used wisely, for example when a filter hits a large and deep object graph. + - Suggestion: Use native JavaScript functions instead of Angular's helper functions whenever possible. + + *Why?*: You can replace a of lot Angular's helper functions with native ES2015+ functionality such as [`Object.assign()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign) for copying objects and the [Spread Syntax](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator#Copy_an_array) for copying arrays _(ie. `[...arr1]`)_. + + *Why?*: Because these are features that have been made available in the latest versions of JavaScript, but did not exist natively when the Angular helper functions were first written. + + **Example 1**: Replacing `angular.forEach()` and `angular.isArray()`: + + ```javascript + var arr = [1, 2, 3]; + + // Instead of this: + angular.forEach(arr, function(value) { + console.log(value); + }); + + // Try this: + arr.forEach(function(value) { + console.log(value); + }); + ``` + + ```javascript + var obj = { hello: 'Hello', world: 'World' }; + + // Instead of this: + angular.forEach(obj, function(value) { + console.log(value); + }); + + // Try this: + Object.keys(obj) + .forEach(function(key) { + console.log(obj[key]); + }); + ``` + + ```javascript + // Instead of this: + angular.isArray([1, 2, 3]); // true + angular.isArray({ hello: 'World' }); // false + + // Try this: + Array.isArray([1, 2, 3]); // true + Array.isArray({ hello: 'World' }); // false + ``` + + **Example 2:** Favor usage of JavaScript features (in this case available starting with ES2015) over `angular.copy()` and `angular.extend()`. + + ```javascript + var arr1 = [1, 2, 3]; + + // Instead of this: + var copyArr1 = angular.copy(arr1); + + // Try this: + var copyArr1 = [...arr1]; + + ``` + + ```javascript + var obj1 = { hello: 'Hello' }; + var obj2 = { world: 'World' }; + + // Instead of this + var mergedObjects = angular.extend({}, obj1, obj2); // {hello: 'Hello', world: 'World'} + + // Try this: + var mergedObjects = Object.assign({}, obj1, obj2); // {hello: 'Hello', world: 'World'} + ``` + + - Note: you might need to use a [polyfill](https://babeljs.io/docs/usage/polyfill/) to take advantage of the latest features of JavaScript for better browser support. + + - Note: Be sure to understand the differences in implementation when using a native JavaScript feature over an Angular helper. For example Angular's `forEach` implementation does not throw an error if you pass it a `null` or `undefined` object, whereas JavaScript's native implementation only works with arrays. **[Back to top](#table-of-contents)**