eslint-plugin-ember
Version:
Eslint plugin for Ember.js apps
55 lines (41 loc) • 1.38 kB
Markdown
Using mixins makes sharing code simple at first, but add significant complexity as a project developes and grows larger.
For more details and examples of how mixins create problems down-the-line, see these excellent blog posts:
* [Mixins Considered Harmful](https://reactjs.org/blog/2016/07/13/mixins-considered-harmful.html)
* [Why Are Mixins Considered Harmful?](http://raganwald.com/2016/07/16/why-are-mixins-considered-harmful.html)
```javascript
// GOOD
// my-utils.js
export function isValidClassName(classname) {
return !!className.match('-class');
}
export function hideModal(obj, value) {
set(obj, 'isHidden', value);
}
// my-component.js
import { isValidClassName } from 'my-utils';
export default Component.extend({
aComputedProperty: computed('obj', function() {
return isValidClassName(get(obj, 'className'));
}),
});
===========================================================
// BAD
// my-mixin.js
export default Mixin.create({
isValidClassName(classname) {
return !!className.match('-class');
},
hideModal(value) {
this.set('isHidden', value);
}
});
// my-component.js
import myMixin from 'my-mixin';
export default Component.extend(myMixin, {
aComputedProperty: computed('obj', function() {
return this.isValidClassName(get(obj, 'className'));
}),
});
```