Quel est le symbole (@) faire en javascript ES6? (ECMAScript 2015)

Je suis à la recherche à un certain ES6 code et je ne comprends pas ce que le symbole @ quand il est placé devant une variable. La chose la plus proche que j'ai pu trouver a quelque chose à voir avec les champs privés?

Code que j'ai été à la recherche à partir de la redux bibliothèque:

import React, { Component } from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'redux/react';
import Counter from '../components/Counter';
import * as CounterActions from '../actions/CounterActions';

@connect(state => ({
  counter: state.counter
}))
export default class CounterApp extends Component {
  render() {
    const { counter, dispatch } = this.props;
    return (
      <Counter counter={counter}
               {...bindActionCreators(CounterActions, dispatch)} />
    );
  }
}

Voici un blog que j'ai trouvé sur le sujet: https://github.com/zenparsing/es-private-fields

Dans ce blog, tous les exemples sont dans le contexte d'une classe - que signifie le symbole est utilisé dans un module?

  • Ceux-ci sont appelés des annotations.
  • Ceux qui ne sont pas ES6, mais certains expérimentale transpiler chose. L'article lié est une proposition pour l'ES7.
  • Pouvez-vous ajouter un @ pour le titre ainsi que cela apparaît dans les recherches pour @ javascript?
  • l'a fait. Bonne idée.
InformationsquelleAutor Kevin Wu | 2015-08-04
  1. 35

    C'est un décorateur. C'est un proposition être ajouté à ECMAScript. Il y a plusieurs ES6 et ES5 équivalent des exemples sur: https://github.com/wycats/javascript-decorators

    Décorateurs de modifier dynamiquement la fonctionnalité d'une fonction, d'une méthode ou d'une classe sans avoir à utiliser directement les sous-classes ou de modifier le code source de la fonction décorée.

    Ils sont couramment utilisés pour contrôler l'accès, l'enregistrement, l'annotation.

    InformationsquelleAutor Kit Sunde
  2. 75

    J'ai trouvé accepté la réponse n'était pas assez pour m'aider à régler cette question, donc je vais ajouter un peu plus de détails pour aider les autres qui trouvent cela.

    Le problème est qu'on ne sait pas exactement ce est le décorateur. Le décorateur dans l'exemple donné n'est pas seulement le @ symbole, c'est le @connect fonction. Il suffit de mettre, le @connect fonction est décoration la CounterApp classe.

    Et ce qu'il est en train de faire dans ce cas? C'est connexion la state.counter valeur les accessoires de la classe. Rappelez-vous que dans redux le connect fonction prend deux arguments: mapStateToProps et mapDispatchToProps. Dans cet exemple, on prend un seul argument - mapStateToProps.

    Je n'ai pas étudié ce trop, mais cela semble être un moyen d'encapsuler votre état à des accessoires et de l'expédition-à-accessoires mappages de sorte qu'ils accompagnent vos composants plutôt que d'être situé dans un autre fichier.

    InformationsquelleAutor Kryten
  3. 5

    Qu'est-ce que @myDecorator()?

    La @ symbole en javascript, synonyme d'un décorateur. Les décorateurs ne sont pas présents dans ES6 donc le code que vous travaillez avec le décorateur est probablement transpiled à une version de javascript qui peut être exécuté dans n'importe quel navigateur.

    Qu'est ce qu'un décorateur?

    Un décorateur s'étend (c'est à dire orne) un objet du comportement dynamique. La possibilité d'ajouter un nouveau comportement au moment de l'exécution est effectué par un Décorateur d'objet qui "s'enroule" autour de l'objet d'origine. Un décorateur est pas seulement un concept en javascript. C'est un modèle de conception utilisé dans tous les langages de programmation orientés objet. Voici une définition de wikipedia:

    En programmation orientée objet, le décorateur modèle est un design
    modèle     qui permet de comportement pour être ajouté à un objet individuel,
    dynamiquement, sans affecter le comportement des autres objets de la
    même classe. Le décorateur modèle est souvent utile pour le respect de la
    Principe de Responsabilité unique, car elle permet de fonctionnalités pour être
    divisé entre les classes uniques sujets de préoccupation

    Pourquoi utiliser un décorateur?

    La fonctionnalité d'un objet peut être modifié au moment de l'exécution lors de l'utilisation d'un décorateur. Par exemple, dans votre code, vous tout simplement importé le décorateur et de l'ajouter à votre CounterApp classe. Maintenant, votre CounterApp a ajouté dynamiquement fonctionnalité Sans vous connaître les détails de mise en œuvre.

    Exemple:

    //decorator lights is a function which receives the class as an argument
let lights = function(tree) {
  //The behaviour of the class is modified here
  tree.treeLights = 'Christmas lights'
}

@lights  //the decorator is applied here
class ChristmasTree {}

console.log(ChristmasTree.treeLights);  //logs Christmas lights
    InformationsquelleAutor Willem van der Veen