Comment accéder aux fonctions des membres dans les éléments polymère

Cet article explore l'accès aux fonctions membres dans des objets polymères, un défi commun pour les développeurs de polymère. Nous examinerons les approches correctes et incorrectes, mettant en évidence le rôle de l'encapsulation de Dom Shadow.

Les plats clés

• L'accès aux fonctions des membres de l'objet polymère directement par nom d'élément (sans le sélecteur d'ID #) est l'approche recommandée.
• L'événement polymer-ready garantit que l'élément est entièrement mis à niveau avant d'essayer l'accès à la fonction, empêchant les erreurs undefined.
• Les éléments polymères sont des éléments HTML personnalisés réutilisables, améliorant l'efficacité du développement Web. Ils fonctionnent parfaitement avec diverses bibliothèques et frameworks JavaScript.

Les pièges d'un accès incorrect

Considérons un composant Web: <x id="radial-button-template"></x>. Tenter d'accéder à ses fonctions via son ID à l'aide de document.querySelector("#radial-button-template") échoue en raison de l'encapsulation de Dom Shadow. L'élément retourné n'expose pas les fonctions internes; Ils apparaissent comme undefined.

Les approches correctes

Méthode 1: Nom de l'élément direct Accès

La méthode la plus simple consiste à utiliser le nom de balise de l'élément directement dans le querySelector:

<code class="language-javascript">var btn = document.querySelector("x-radial-buttons");
btn.getFirstElement; // Correctly returns the element</code>

Cela contourne les restrictions Shadow Dom et fournit un accès direct aux fonctions membres. Il est généralement préféré éviter d'attribuer des ID aux éléments polymère pour cette raison.

Méthode 2: L'événement polymer-ready

Le processus de mise à niveau des éléments asynchrones

du polymère peut entraîner des problèmes si vous essayez d'accéder aux fonctions avant la fin de la mise à niveau. L'événement polymer-ready résout ceci:

<code class="language-javascript">window.addEventListener('polymer-ready', function(e) {
  var xFoo = document.querySelector('x-foo');
  xFoo.barProperty = 'baz'; // Access functions here
});</code>

Cela garantit que les appels de fonction ne se produisent qu'après l'initialisation de l'élément polymère.

Application pratique

L'enseignement JavaScript suivant montre l'accès aux éléments polymère et à leurs fonctions:

<code class="language-javascript">(function(PokémonApp) {
  // ... (other code) ...

  form.addEventListener('submit', function(e) {
    e.preventDefault();
    playerElement.speak();
    var btn = document.querySelector("x-radial-buttons");
    btn.getFirstElement(); // Correct access
  });

  // ... (rest of the code) ...
})(PokémonApp);</code>

Ce code accède correctement à getFirstElement après que l'élément x-radial-buttons est prêt.

Ressources d'apprentissage supplémentaires

Microsoft propose de vastes ressources d'apprentissage gratuites sur le développement JavaScript et Web, y compris des tutoriels sur l'optimisation des performances, les fondamentaux de la plate-forme Web et la création d'applications Windows universelles à l'aide de HTML et JavaScript. Ces ressources, ainsi que des outils comme Visual Studio Community et Azure Trial, fournissent un chemin d'apprentissage complet. Cet article fait partie d'une série de développement Web de Microsoft.

Questions fréquemment posées

Cette section a été omise car elle contient des informations déjà couvertes dans le corps principal de l'article réécrit. Les points clés concernant les éléments en polymère, leur fonctionnalité et les méthodes d'accès aux fonctions membres sont déjà traités ci-dessus.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!