logo
20.03.2019 14:07
1
Máte sadu neměnných dat, která chcete definovat sdruženě.
Podobně jako konstanty tříd v PHP:
PHP kód:
class Foo {
    private const 
BAR 'baz';

Jak?

1. Static getter (ES6)
Kód:
class Consts {
  static get POINTER_EVENTS() {
    return ['pointerdown', 'pointerup', ];
  }
}
console.log(Consts.POINTER_EVENTS);
2. Frozen object (ES5)
Kód:
const FrozenConsts = Object.freeze({
  POINTER_EVENTS: ['pointerdown', 'pointerup', ],
});
console.log(FrozenConsts.POINTER_EVENTS);
3. Soukromé konstanty v revealing module (ES6)
Dostupné pouze zevnitř, ale je nutné použít návrhový vzor revealing module. Nefunguje v class
Kód:
let interaction = (function Interaction () {
  const POINTER_EVENTS = ['pointerdown', 'pointerup', ];
  function foo() { console.log(POINTER_EVENTS); }
  return publicAPI = { foo: foo };
})();
interaction.foo();
Jak to řešíte vy?

(Hudba budoucnosti: Statická deklarace v třídě)
Kód:
class Foo {
    static const #PRIVATE_CONST = 'bar';
}

Co se právě děje na Webtrhu?

20.03.2019 15:27
2
Řeším to pomocí Object.freeze (navíc v souboru někde zvlášť který importuji, jak je potřeba, či vyjímečně ním rozšířím prototyp nějaké knihovny, kterou všude používám - například Vue, mám potom config dostupný ve všech komponentech, aniž bych jej musel samostatně importovat), například pokud se jedná o nějaká konfigurační data. Když chci navíc použít něco na styl Enum použiju Symbol, ten ale jistě nějak webpack/babel polifilluje.
20.03.2019 15:44
3
Jak to myslíte s tím rozšířením prototypu? Zmrazíte objekt s konstantami a přidáte ho prototypu dostupného z vašich tříd/modulů?
Můžete ukázat příklad?
20.03.2019 16:13
4
To je sice Vue specific, ale:

bus.js
Kód:
import Vue from 'vue';

export default {
  init() {
    const EventBus = new Vue();
    Object.defineProperty(Vue.prototype, '$bus', { value: EventBus });
  },
};
<náhodná komponenta projektu>.vue
Kód:
<script>
export default {
  mounted() {
     this.$bus.$on('SOME_EVENT', this.someEventHandler);
  },
  beforeDestroy() {
     this.$bus.$off('SOME_EVENT', this.someEventHandler);
  },
  methods: {
    someEventHandler(e) {
      // do smth
    },
  },
};
</script>
Není to sice config, ale myšlenka je snad jasná - nemusím tam nikde v komponentě importovat soubor s něčím, protože to něco již všude mám.