EmmanuelDemey / EmmanuelDemey/eslint-plugin-angular

Function Declarations to Hide Implementation Details (Y034)

Open
#38 0 comments 0 reactions 0 assignees View on GitHub
Rule
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.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.