Extension de HTML la voie aurelia.io

Les plats clés

• Aurelia.io, un framework JavaScript moderne, permet aux développeurs de créer des éléments et des attributs personnalisés en HTML, améliorant la flexibilité et la fonctionnalité des applications Web.
• Les attributs personnalisés dans Aurelia.io peuvent être utilisés pour envelopper les plugins existants, fournir des raccourcis pour les liaisons courantes ou modifier les éléments HTML existants sans accès à code direct. Cela facilite l'ajout de nouvelles fonctionnalités aux éléments existants.
• La création de nouveaux éléments dans Aurelia.io implique de définir une classe pour l'élément et une vue pour sa représentation HTML. Cela permet la création d'éléments entièrement nouveaux avec un comportement et une structure personnalisés, améliorant la réutilisation du code et la conception modulaire.
• Aurelia.io utilise un ensemble de conventions simples pour réduire la quantité de code requise, ce qui le rend plus adapté aux développeurs. Il offre également une compatibilité avec d'autres bibliothèques et frameworks JavaScript, permettant une plus grande flexibilité dans le développement Web.

Enseigner au vieux chien HTML New Tricks est un objectif majeur des cadres JavaScript modernes d'aujourd'hui. Que ce soit en suivant des normes potentielles comme les composants Web, en créant des directives personnalisées ou en étendant les classes existantes, les chances sont élevées que votre cadre de choix fournit un moyen d'étendre le balisage de HTML lui-même. Dans un article précédent, écrit par Brad Barrow, vous avez été présenté à un nouveau joueur: Aurelia. Cet article s'appuiera sur l'article et le code de Brad et vous montrera comment créer des éléments personnalisés ainsi que des attributs personnalisés en suivant les conventions d'Aurelia.

Le code complet de cet article peut être trouvé sur notre dépôt GitHub et vous pouvez voir une démo de ce que nous allons construire ici (veuillez laisser du temps pour que l'application initialise).

Pourquoi le besoin de plus de balisage?

Avant de sauter directement dans l'action, comprenons d'abord le cas d'utilisation potentiel pour créer de nouveaux composants. Pour ce faire, nous allons jeter un aperçu conceptuel de l'exemple d'introduction comme indiqué dans la figure ci-dessous. Nous avons deux pages, représentées par un ViewModel (VM) et une vue, montrant des photos drôles et des vidéos GIF. Chacun de ceux-ci a une liste répétée qui rend lui-même des articles contenant une image et un bloc de texte.

AURELIA REDDIT Client Schéma conceptuel

En examinant la vue, nous pouvons voir que l'acquisition de données, ainsi que le rendu, sont étroitement couplées dans une paire VM / View.

<span><span><span><template</span>></span>
</span>  <span><span><span><ul</span> class<span>="list-group"</span>></span>
</span>    <span><span><span><li</span> class<span>="list-group-item"</span> repeat.for<span>="p of posts"</span>></span>
</span>      <span><span><span><img</span> src.bind<span>="p.data.thumbnail"</span> /></span>
</span>      <span><span><span><a</span> href<span>="http://reddit.com${p.data.permalink}"</span>></span>
</span>        ${p.data.title}
      <span><span><span></a</span>></span>
</span>    <span><span><span></li</span>></span>
</span>  <span><span><span></ul</span>></span>
</span><span><span><span></template</span>></span></span>

Ce n'est peut-être pas un problème avec un exemple simple, mais peut se transformer en un inconvénient majeur à mesure que le système augmente et de plus en plus d'exigences sont recueillies.

Améliorer les éléments existants avec des attributs personnalisés

Imaginez que nous obtenons une demande pour fournir un popover pour chacun des messages des pages drôles. Pour ce faire, nous pourrions facilement câbler la fonctionnalité de Bootstrap directement dans le balisage en plaçant les attributs de données nécessaires suivis d'une initialisation à l'intérieur de notre FunnyVM. Mais que se passe-t-il si nous avons soudainement besoin de le faire sur l'autre page aussi? Fournir la fonctionnalité en déclarant un attribut personnalisé peut nous faciliter la vie. Ceux-ci sont particulièrement utiles dans les scénarios suivants:

• Emballage des plugins existants
• raccourcis pour les liaisons communes telles que le style ou la classe
• modification des éléments HTML existants / éléments personnalisés sans accès direct à un code

Maintenant, salissons nos mains et voyons ce qu'il faut pour construire notre premier attribut personnalisé.

Création de la popover

Commençons par regarder ce que nous aimerions réaliser. Le nouveau popover d'attribut doit accepter les paramètres pour le placement, le titre et le contenu de la popover. Le placement est fixé à droite, donc une simple chaîne en tant que valeur est suffisante. Pour les deux autres propriétés, nous allons utiliser la liaison des données d'Aurelia pour cartographier les valeurs itérées. Afin de charger le fichier, nous utilisons la fonction de requise d'Aurelia. L'attribut From contient le chemin relatif à la ressource à importer.

<span><span><span><template</span>></span>
</span>  <span><span><span><ul</span> class<span>="list-group"</span>></span>
</span>    <span><span><span><li</span> class<span>="list-group-item"</span> repeat.for<span>="p of posts"</span>></span>
</span>      <span><span><span><img</span> src.bind<span>="p.data.thumbnail"</span> /></span>
</span>      <span><span><span><a</span> href<span>="http://reddit.com${p.data.permalink}"</span>></span>
</span>        ${p.data.title}
      <span><span><span></a</span>></span>
</span>    <span><span><span></li</span>></span>
</span>  <span><span><span></ul</span>></span>
</span><span><span><span></template</span>></span></span>

Afin de réaliser cela, nous commençons par créer un nouveau fichier JavaScript dans le dossier SRC appelé popover.js. L'attribut personnalisé, comme toutes les autres constructions Aurelia, est une classe ES6 exportée simple plutôt qu'une collection de fonctions transmises dans une API prédéfinie (comme le font de nombreux cadres hérités).

<span><span><span><require</span> from<span>="./popover"</span>></span><span><span></require</span>></span>    
</span>...
<span><span><span><img</span> src.bind<span>="p.data.thumbnail"</span>
</span></span><span>     <span>popover<span>="placement: 'right';
</span></span></span><span><span>              title.bind: p.data.url;
</span></span><span><span>              content.bind: p.data.title<span>"</span> /></span></span>

Par rapport à d'autres cadres, Aurelia déclare les constructions en les décrivant via des métadonnées. Mais au lieu d'utiliser des fonctions statiques ou des API compliquées, Aurelia exploite les décorateurs ES7 de pointe pour y parvenir. Nous allons importer les décorateurs nécessaires de l'emballage au-trame au-trame. Quant au contrôle lui-même, nous utiliserons le contrôle JavaScript Popover fourni par Twitter Bootstrap. Nous importons donc la poignée jQuery $ ainsi que Bootstrap afin d'initialiser le code JavaScript de Bootstraps.

L'étape suivante consiste à appliquer les métadonnées mentionnées précédemment afin qu'Aurelia sache ce qu'il obtient lorsqu'il charge le fichier. En attachant le décorateur CustomAttribute, nous nommons notre composant avec la valeur donnée. Le décorateur liant en revanche déclare une propriété à laquelle notre point de vue peut se lier. Nous répétons simplement ce décorateur pour chaque propriété disponible.

<span>import <span>{customAttribute, bindable, inject}</span> from 'aurelia-framework';
</span><span>import $ from 'bootstrap';
</span><span>import bootstrap from 'bootstrap';
</span><span>...</span>

Le premier décorateur Inject s'occupe de fournir l'élément DOM réel comme paramètre à notre méthode de constructeur, qui est ensuite stocké pour une utilisation ultérieure.

<span><span><span><template</span>></span>
</span>  <span><span><span><ul</span> class<span>="list-group"</span>></span>
</span>    <span><span><span><li</span> class<span>="list-group-item"</span> repeat.for<span>="p of posts"</span>></span>
</span>      <span><span><span><img</span> src.bind<span>="p.data.thumbnail"</span> /></span>
</span>      <span><span><span><a</span> href<span>="http://reddit.com${p.data.permalink}"</span>></span>
</span>        ${p.data.title}
      <span><span><span></a</span>></span>
</span>    <span><span><span></li</span>></span>
</span>  <span><span><span></ul</span>></span>
</span><span><span><span></template</span>></span></span>

Maintenant que nous avons toutes les informations nécessaires que nous pouvons opter pour le cycle de vie des comportements en déclarant une méthode appelée Bind. Cela garantit que nous initialisons le composant au moment approprié, comparable à la méthode Ready de JQuery.

<span><span><span><require</span> from<span>="./popover"</span>></span><span><span></require</span>></span>    
</span>...
<span><span><span><img</span> src.bind<span>="p.data.thumbnail"</span>
</span></span><span>     <span>popover<span>="placement: 'right';
</span></span></span><span><span>              title.bind: p.data.url;
</span></span><span><span>              content.bind: p.data.title<span>"</span> /></span></span>

Enfin, nous ajoutons les gestionnaires modifiés. Notez que ceux-ci ne sont pas réellement exécutés dans notre exemple, car la source de liaison ne change pas au fil du temps.

<span>import <span>{customAttribute, bindable, inject}</span> from 'aurelia-framework';
</span><span>import $ from 'bootstrap';
</span><span>import bootstrap from 'bootstrap';
</span><span>...</span>

Affichez le fichier complet sur github

Maintenant que nous avons vu comment vous pouvez ajouter de nouvelles fonctionnalités en fournissant des attributs aux éléments existants, passons à autre chose et commençons à écrire nos propres éléments personnalisés.

Créer de nouvelles balises avec des éléments personnalisés

Afin de créer des éléments entièrement nouveaux, Aurelia exploite une approche très similaire aux attributs personnalisés. À titre d'exemple, nous allons reconstruire les publications de la page GIF à représenter par un élément personnalisé appelé Reddit-GIF et offrir la possibilité d'opinir la vidéo réelle en activité. Le balisage qui en résulte devrait être le suivant:

@<span>inject(Element)
</span>@<span>customAttribute('popover')
</span>@<span>bindable('title')
</span>@<span>bindable('content')
</span>@<span>bindable('placement')
</span><span>export class Popover {
</span><span>...</span>

Comme vous pouvez le voir, nous utilisons la nouvelle balise et fournissons les informations nécessaires via les liaisons de données à la propriété de données.

L'étape suivante consiste à créer l'élément réel. Nous le faisons en créant la vue de l'élément reddit-gif.html et sa machine virtuelle reddit-gif.js dans le dossier src. La vue, vue suivante, tire parti du balisage précédent de GIFS.html et ajoute un bouton qui bascule un iframe qui est utilisé pour intégrer la vidéo réelle. Encore une fois, les vues d'Aurelia sont enveloppées à l'intérieur d'une étiquette de modèle:

<span>constructor(element) {
</span>  <span>this.element = element;
</span><span>}</span>

En regardant la pièce VM, nous suivons un processus similaire à celle lors de la création d'un attribut personnalisé. Mais cette fois, nous tirons parti d'un décorateur différent qui dira à Aurelia que nous allons créer un personnalité avec une seule propriété nommée Data.

<span>bind() {
</span>  <span>// initialize the popover
</span>  <span>$(this.element).popover({ 
</span>    <span>title: this.title,
</span>    <span>placement: this.placement,
</span>    <span>content: this.content,
</span>    <span>trigger: 'hover' });
</span><span>}</span>

Ensuite, nous définissons un membre GIFACTIVE pour garder une trace de l'affichage de l'IFRAME. Nous définissons également initialement le membre GIFSRC à vider, afin de ne pas charger de contenu si l'IFRAME est invisible.

<span>titleChanged(newValue){
</span>  <span>$(this.element).data('bs.popover').options.title = newValue;
</span><span>}
</span>
<span>contentChanged(newValue){
</span>  <span>$(this.element).data('bs.popover').options.content = newValue;
</span><span>}
</span>
<span>placementChanged(newValue){
</span>  <span>$(this.element).data('bs.popover').options.placement = newValue;
</span><span>}</span>

Enfin, nous ajoutons la fonction Togglegif utilisée par le bouton à bascule qui retourne la visibilité et la source sur chaque appel.

<span><span><span><require</span> from<span>="./reddit-gif"</span>></span><span><span></require</span>></span>
</span>...
<span><span><span><ul</span> class<span>="list-group"</span>></span>
</span>    <span><span><span><li</span> class<span>="list-group-item"</span> repeat.for<span>="p of posts"</span>></span>
</span>      <span><span><span><reddit-gif</span> data.bind<span>="p.data"</span>></span><span><span></reddit-gif</span>></span>
</span>    <span><span><span></li</span>></span>
</span><span><span><span></ul</span>></span></span>

Vous pouvez afficher le fichier HTML complet ici et le fichier JS ici

Réduire la quantité de code avec les conventions

Aurelia consiste à rendre l'expérience du développeur aussi agréable que possible. Faisons en face de la vérité: beaucoup d'entre nous n'aiment pas beaucoup taper. Ainsi, afin de vous sauver des frappes précieuses et d'améliorer la maintenance au fil du temps, Aurelia utilise un ensemble de conventions simples. Par exemple, la version complète d'un décorateur liant peut en fait ressembler à ceci, que nous avons travaillé en fournissant simplement le nom de la propriété. Toutes les autres options seront automatiquement déduites.

<span><span><span><template</span>></span>
</span>  <span><span><span><ul</span> class<span>="list-group"</span>></span>
</span>    <span><span><span><li</span> class<span>="list-group-item"</span> repeat.for<span>="p of posts"</span>></span>
</span>      <span><span><span><img</span> src.bind<span>="p.data.thumbnail"</span> /></span>
</span>      <span><span><span><a</span> href<span>="http://reddit.com${p.data.permalink}"</span>></span>
</span>        ${p.data.title}
      <span><span><span></a</span>></span>
</span>    <span><span><span></li</span>></span>
</span>  <span><span><span></ul</span>></span>
</span><span><span><span></template</span>></span></span>

Une autre chose à regarder est de savoir comment raccourcir l'utilisation de plusieurs propriétés. Ainsi, au lieu de définir chacun d'eux un par un, nous pouvons également dire à notre attribut personnalisé pour s'attendre à des propriétés dynamiques. Pour ce faire, nous décorions notre classe avec le décorateur Dynamicoptions. Maintenant, nous pouvons toujours réutiliser le même buteur de la vue, mais nous n'avons pas à définir manuellement toutes les déclarations de propriétés qui, comme son nom l'indique, est très utile dans des contextes dynamiques. Cela signifie que nous pouvons écrire une main de modification générale appelée dynamicpropertychanged, qui est appelée chaque fois qu'une propriété liée est modifiée.

<span><span><span><require</span> from<span>="./popover"</span>></span><span><span></require</span>></span>    
</span>...
<span><span><span><img</span> src.bind<span>="p.data.thumbnail"</span>
</span></span><span>     <span>popover<span>="placement: 'right';
</span></span></span><span><span>              title.bind: p.data.url;
</span></span><span><span>              content.bind: p.data.title<span>"</span> /></span></span>

Mais qu'en est-il des éléments personnalisés? Eh bien, nous avons déjà utilisé certaines conventions sans même nous en rendre compte. Le système a automatiquement rassemblé la vue et la paire de machines virtuelles juste en ayant le même nom. Si vous avez besoin d'utiliser une vue différente, vous pouvez utiliser le décorateur @useView (relativePath). Ou peut-être ne pas utiliser une vue du tout en déclarant @NoView. Nous pouvons même devenir fous et laisser notre point de vue être rendu dans le Shadowdom en ajoutant le décorateur Useshadowdom. Si vous n'êtes pas familier avec ce terme, veuillez jeter un œil à cet article

Conclusion

Nous, l'équipe Aurelia, espérons vous avoir donné un aperçu rapide de la façon d'étendre le HTML lui-même en tirant parti des éléments et des attributs personnalisés. Tout au long des exemples, nous espérons que vous avez pu voir notre concentration sur l'expérience du développeur en vous offrant un framework flexible mais facile à utiliser, qui ne vous attend pas ou ne vous fait pas utiliser une API étrange. Nous aimerions vous inviter à rejoindre notre chaîne Gitter si vous avez des questions. Nous aimerions également entendre vos expériences lorsque vous écrivez vos premiers éléments et attributs personnalisés.

Les questions fréquemment posées (FAQ) sur l'extension du HTML avec Aurelia.io

Qu'est-ce que Aurelia.io et comment étend-il HTML?

Aurelia.io est un framework JavaScript open-source moderne pour le développement Web, mobile et de bureau. Il étend HTML en permettant aux développeurs de créer des éléments HTML personnalisés, d'ajouter des attributs personnalisés aux éléments HTML existants et de contrôler le flux de rendu HTML. Ceci est réalisé via le puissant moteur de modèles d'Aurelia, qui interprète des éléments et des attributs personnalisés et les rend en HTML standard. Cela permet des applications Web plus dynamiques, interactives et complexes tout en maintenant un code propre et lisible.

Comment Aurelia.io se compare-t-il à d'autres frameworks JavaScript?

Aurelia.io ressort des autres cadres JavaScript en raison de l'accent mis sur les normes Web, la simplicité et l'extensibilité. Contrairement à de nombreux frameworks, Aurelia.io est conçu pour être une collection de bibliothèques collaboratrices, ce qui signifie que vous pouvez utiliser autant ou aussi peu de cadre que vous en avez besoin. Il met également l'accent sur le codage propre et basé sur la convention, réduisant la quantité de code de passe-partout nécessaire. De plus, l'engagement d'Aurelia.io à suivre les normes Web signifie que votre code sera à l'épreuve du temps et compatible avec les technologies Web à venir.

Comment créer des éléments personnalisés dans Aurelia.io?

Création Les éléments personnalisés dans Aurelia.io impliquent la définition d'une classe pour l'élément et une vue pour sa représentation HTML. La classe contient la logique de l'élément, tandis que la vue définit sa structure HTML. Une fois défini, l'élément personnalisé peut être utilisé dans n'importe quelle application Aurelia.io, tout comme un élément HTML standard. Cela permet la réutilisation du code et la conception modulaire, ce qui rend vos applications plus faciles à développer et à entretenir.

Que sont les attributs personnalisés dans Aurelia.io et comment les utiliser?

Attributs personnalisés dans Aurelia. Les IO sont un moyen d'ajouter un comportement personnalisé aux éléments HTML existants. Ils sont définis d'une manière similaire aux éléments personnalisés, avec une classe pour la logique de l'attribut et une vue pour sa représentation HTML. Une fois défini, l'attribut personnalisé peut être ajouté à n'importe quel élément HTML dans une application Aurelia.io, en étendant sa fonctionnalité sans avoir besoin pour créer un tout nouvel élément.

Comment Aurelia.io gère-t-il la liaison des données?

Aurelia.io prend en charge la liaison des données bidirectionnelle, ce qui signifie que les modifications du modèle mettent automatiquement à jour la vue, et vice versa. Ceci est réalisé via le système d'observabilité d'Aurelia.io, qui suit les modifications des données et met à jour les parties pertinentes de la vue. Cela facilite la création d'applications dynamiques et interactives où l'interface utilisateur reflète toujours l'état actuel des données.

.io est conçu pour être compatible avec d'autres bibliothèques et cadres JavaScript. Il utilise une architecture modulaire, ce qui signifie que vous pouvez choisir les parties du cadre à utiliser. Cela facilite l'intégration d'Aurelia.io dans les projets existants, ou d'utiliser d'autres bibliothèques et frameworks aux côtés d'Aurelia.io.

Comment gère le routage et la navigation aurelia.io? Comprend un routeur puissant qui permet des scénarios de navigation complexes. Le routeur prend en charge les routes imbriquées, les paramètres facultatifs et les routes dynamiques, entre autres fonctionnalités. Cela facilite la création d'applications à une seule page avec Aurelia.io, où l'utilisateur peut naviguer entre différentes vues sans rafraîchir la page.

Quelle est la courbe d'apprentissage pour Aurelia.io?

Aurelia.io est conçue pour être facile à apprendre, en mettant l'accent sur la simplicité et la convention sur la configuration. Si vous connaissez JavaScript et HTML, vous devriez pouvoir ramasser rapidement Aurelia.io. La documentation du cadre est complète et comprend de nombreux exemples pour vous aider à démarrer.

Comment est testé Aurelia.io et à quoi ressemblent ses performances?

Aurelia.io est entièrement testé pour s'assurer que son? fiabilité et performance. Il utilise une combinaison de tests unitaires, de tests d'intégration et de tests de bout en bout pour couvrir tous les aspects du cadre. En termes de performances, Aurelia.io est conçue pour être rapide et efficace, avec une empreinte minimale et un rendu optimisé.

Quel type de soutien et de communauté Aurelia.io a-t-il?

Aurelia. IO a une communauté dynamique et active de développeurs qui contribuent au cadre et se soutiennent mutuellement. Il existe de nombreuses ressources disponibles, y compris un forum communautaire, une salle de chat Gitter et une balise de débordement de pile. De plus, l'équipe Aurelia.io fournit des services de soutien professionnel et de formation.

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!