EmmanuelDemey / EmmanuelDemey/eslint-plugin-angular
Function Declarations to Hide Implementation Details (Y034)
- Dominant language
- JavaScript
- Stars
- 620
- Forks
- 127
- PR merge metrics
- No merged PRs in 30d
Description
https://github.com/johnpapa/angularjs-styleguide/edit/master/README.md
- Use function declarations to hide implementation details. Keep your bindable members up top. When you need to bind a function in a controller, point it to a function declaration that appears later in the file. This is tied directly to the section Bindable Members Up Top. For more details see [this post](http://www.johnpapa.net/angular-function-declarations-function-expressions-and-readable-code).
_Why?_: Placing bindable members at the top makes it easy to read and helps you instantly identify which members of the controller can be bound and used in the View. (Same as above.)
_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?_: You never have to worry with function declarations that moving `var a` before `var b` will break your code because `a` depends on `b`.
_Why?_: Order is critical with function expressions
``` javascript
/**
* avoid
* Using function expressions.
*/
function Avengers(dataservice, logger) {
var vm = this;
vm.avengers = [];
vm.title = 'Avengers';
var activate = function() {
return getAvengers().then(function() {
logger.info('Activated Avengers View');
});
}
var getAvengers = function() {
return dataservice.getAvengers().then(function(data) {
vm.avengers = data;
return vm.avengers;
});
}
vm.getAvengers = getAvengers;
activate();
}
```
Notice that the important stuff is scattered in the preceding example. In the example below, notice that the important stuff is up top. For example, the members bound to the controller such as `vm.avengers` and `vm.title`. The implementation details are down below. This is just easier to read.
``` javascript
/*
* recommend
* Using function declarations
* and bindable members up top.
*/
function Avengers(dataservice, logger) {
var vm = this;
vm.avengers = [];
vm.getAvengers = getAvengers;
vm.title = 'Avengers';
activate();
function activate() {
return getAvengers().then(function() {
logger.info('Activated Avengers View');
});
}
function getAvengers() {
return dataservice.getAvengers().then(function(data) {
vm.avengers = data;
return vm.avengers;
});
}
}
```
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.